Asp.Net WebForm ViewState

news2024/10/6 22:18:57

ViewState用于保存服务器控件(runat="server")状态便于在触发回调后（PostBack）恢复页面。

页面拖入一个Form id="form1" runat="server",里面添加一个<asp:Button id="Button1" Text="删除" OnClick="Button1_Click" OnClientClick="return checkDel(this)" />

<form id="form1" class="pure-form" name="form1" runat="server">
    <input type="text" id="txtName" name="Name" placeholder="名称" size="10"/>
    <input name="Reset" type="submit" value="重置" />
    <input name="Search" type="submit" value="查询" />
    <button name="Button1" type="button" class="pure-button pure-button-primary" onclick="doSearch()">查询</button>
    <asp:Button runat="server" UseSubmitBehavior="false" ID="Button1" OnClick="Button1_Click" class="pure-button pure-button-primary" Text="删除" />
</form>
<label runat="server" id="lblFormKeys"></label><br />
<label runat="server" id="lblEventTarget"></label>
<script src="/js/jquery-3.6.4.min.js"></script>
<script>
    function doSearch() {
        var btn = $("#txtName").val() || "Button1";
        __doPostBack(btn, "");
    }
</script>

1.点击按钮后台Request["__EVENTTARGET"]为null,给Button添加UseSubmitBehavior="false"即可。此时查看客户端代码可以看到自动在form元素下添加了一下内容：

<div class="aspNetHidden">
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="" />
</div>

<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['form1'];
if (!theForm) {
    theForm = document.form1;
}
function __doPostBack(eventTarget, eventArgument) {
    if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
        theForm.__EVENTTARGET.value = eventTarget;
        theForm.__EVENTARGUMENT.value = eventArgument;
        theForm.submit();
    }
}
//]]>
</script>
<div class="aspNetHidden">

	<input type="hidden" name="__VIEWSTATEGENERATOR" id="__VIEWSTATEGENERATOR" value="" />
	<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="" />
</div>

2.input submit点击时会将自身的name值作为表单域提交

点击重置：