VBHTML中如何设置按钮重置搜索字段并返回初始视图？

原生HTML的<input type="reset">按钮仅能将表单内的输入控件恢复到当前页面首次渲染时的默认值，不会触发页面重载，也不会重置服务端返回的过滤后表格数据。
你点击Search提交表单后，服务端会把传入的SearchString参数回填到搜索文本框的value属性，此时页面渲染完成后，文本框的默认值就是你刚才输入的搜索词，表格也是过滤后的结果。这时候点Reset按钮，只会把文本框的值重置为这个回填的搜索词，不会回到未搜索的初始列表状态，看起来就像按钮没有响应。

直接替换原有Reset按钮的实现即可，两种常用方案任选：

方案1：普通按钮跳转（最简洁） #

把原来的reset类型输入框改成普通按钮，点击时直接跳转到不带搜索参数的列表初始地址，代码如下：

@Using Html.BeginForm()
    @<p>
        Search: @Html.TextBox("SearchString")

        <input type="submit" value="Search" />
        <button type="button" onclick="window.location.href = window.location.pathname;">Reset</button>
    </p>
End Using

点击按钮后会直接加载不带任何查询参数的初始页面，表格会回到未搜索的状态，搜索框也会恢复为空。

方案2：保留reset类型按钮+阻止默认行为 #

如果你想保留reset按钮的语义，可以给按钮加点击事件，先阻止原生reset的默认逻辑，再执行页面跳转：

@Using Html.BeginForm()
    @<p>
        Search: @Html.TextBox("SearchString")

        <input type="submit" value="Search" />
        <input type="reset" value="Reset" onclick="event.preventDefault();window.location.href = window.location.pathname;" />
    </p>
End Using

• 如果你的初始列表页默认带分页、排序这类固定参数，跳转时把这些参数拼接到地址里即可，只要不携带SearchString参数，就能回到搜索前的初始视图。
• 不要依赖原生reset按钮实现跨请求的状态重置，它本身就只处理当前页面内的表单控件值重置，不涉及服务端数据状态的回退。

内容的提问来源于stack exchange，提问作者Brooke Harris