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

Question

在我的 .net Core - Razor 页面 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这个问题。 要重置值，我必须在javascript中创建自定义函数：

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

并从 onClic 操作调用它，例如 (onclick="resetForm(("(

现在它对我来说工作正常...非常感谢您的帮助！