Question

在.net Core-Razor Pages Web应用程序中提交搜索框后，我正在努力清除表单。我需要在onPostAction之后保留从表单提交按钮调用的搜索值。

这是我的index.cshtml（简化为一个搜索框和2个按钮-发布并清除过滤器）

    <form method="post">
      <div class="form-group form-inline row ">
        <label class="col-md-2 font-weight-bold control-label">Phone Number</label>
        <input type="search" name="searchPhoneNumber" value="@ViewData["sPhoneNumber"]?.ToString()"/>
      </div>
      <div class="form-group form-inline row ">
        <input type="submit" value="Search"/>
        <button type="reset" onclick="$this.form.reset()">Clear All</button>
    </div>

然后在我的index.cshtml.cs中，我有OnPostAsync任务（再次简化）

[ViewData]
public string sPhoneNumber{ get; set; }
public async Task OnPostAsync(string searchPhoneNumber)
{
if (!String.IsNullOrEmpty(searchAlcatel))
        {
            records = records.Where(s => s.PhoneNumber.Contains(searchPhoneNumber));
            ViewData["sPhoneNumber"] = searchPhoneNumber;
        }
        else { ViewData["sPhoneNumber"] = ""; }
}
Model = await records.AsNoTracking().OrderBy(item => item.Surename).ToListAsync();

现在是问题所在。这种方式表单在提交按钮触发OnPost方法后保留了来自客户端的数据值，这正是我所需要的。但是！此解决方案也破坏了“重置”按钮的功能，因为它无法从该搜索输入中清除值。此外，如果我手动清除该搜索框的值并单击“重置”按钮，它将在该字段中产生最后使用的值，这绝对不是我想要的。

请问有什么方法可以在提交后保持表单值，同时使“重置”按钮同时作用于表单数据值？

非常感谢您提供任何帮助。

Answer 1

我按照@Aluan Haddad的建议解决了这个问题。要重置值，我必须在javascript中进行自定义功能：

<script type="text/javascript">
            function resetForm() {
                document.getElementById("searchPhone").value = "";
                document.getElementById("searchFax").value = "";
            }
        </script>

并通过onClic操作（如（onclick =“ resetForm（）”））调用它

现在对我来说很好...非常感谢您的帮助！

提交后保留表单值-Razor页面

1 个答案: