提交后保留表单值 - Razor Pages

Question

在我的.net Core - Razor Pages Web应用程序中，我正在努力处理提交搜索框后的表单清除问题。我需要在表单提交按钮调用onPostAction后持久化搜索的值。

以下是我的index.cshtml（简化为一个搜索框和两个按钮--post & clear filter）。

    <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()")

现在，它为我工作得很好... 非常感谢你的帮助!