AutoPostBack通过现象看本质

时间：2021-12-05 17:57:08

在做人事档案管理系统时遇到一个功能需要实现前台数据（实时）与后台进行交互，解决这个问题首先想到的是应用控件的AutoPostBack属性。本以为这个问题就这样解决了（不用javascript、jquery、ajax）,但是在实现的过程中确发现没那么简单。

何为AutoPostBack

AutoPostBack是asp.net中众多服务器控件中的一个属性，如TextBox、Lable、RadioButton、CheckBox、GridView等等。如果AutoPostBack属性值设置为true，当控件的值或状态改变时，客户端即浏览器会将这一变化请求传回到服务器，当然服务器也会对这一变化做出响应。所以依靠控件的这一属性客户端就可以做到实时的与服务器交互，如填写表单时可以实时验证输入的信息是否规范，不过这样做会加重服务器的负担。假设一个网站需要注册个人信息，每个人填写完一条都需要服务器进行验证和响应，会大大加重服务器的负担，所以对于表单验证这样的事情通常交给客户端来处理，这样就减轻了服务器负担。

AutoPostBack+javascript

这次遇到的问题主要是在GridView中每一行有单选按钮和数据，我们需要根据选中的行拿到后边与之对应的数据。解决这个问题首先要注意的是gridview中的控件和数据都是根据后台数据生成的即数据跟控件都是动态的。对于单选按钮要实现单选必须设置单选按钮的GroupName属性使他们处于同一组中.设置单选的GroupName=“xuanzze”代码运行后查看网页源代码会发现gridview的name="ctl00_ContentPlaceHolder1_gridView"，RadioButton的name="ctl00$ContentPlaceHolder1$gridView$ctl02$xuanze",此时的单选按钮都是在gridview中动态生成的，设置的GroupName属性在代码运行时会失去作用.解决的方法是利用javascript当进行选择时遍历所有RadioButton，把RadioButton的name属性设置为同一值。单选的问题解决了，但随之而来的是RadioButton的AutoPostBack属性设置失效了，即后台与RadioButton的OnCheckedChanged对应的方法不在执行。

用例测试一：AutoPostBack

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="radionTest.aspx.cs" Inherits="Testcookie.radionTest" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title>用例一</title>

</head>

<body>

    <form id="form1" runat="server" >

    <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

    <asp:radiobutton ID="Radiobutton1" runat="server" AutoPostBack="true" OnCheckedChanged="Radio_OnCheckedChanged"   ></asp:radiobutton>

    </form>

</body>

</html>

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

namespace Testcookie

{

    public partial class radionTest : System.Web.UI.Page

    {

        protected void Page_Load(object sender, EventArgs e)

        {

        }

        protected void Radio_OnCheckedChanged(object sender, EventArgs e)

        {

            String word = TextBox1.Text;

            if(RadioButton1.Checked==true)

            {

            Response.Write(word);//当单选按钮选中时打印输出文本框内容

            }

        }

    }

}

在表单中加入一个RadioButton服务器控件，一个TextBox控件，将RadioButton的AutoPostBack属性设置为true,让RadioButton的与OnCheckedChanged属性对应的方法输出文本框的内容。代码运行，断点调试发现单击单选按钮后后台方法会从Page_Load方法开始执行即相当于重新加载页面。

用例测试二：AutopostBack+Javascript

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="radionTest.aspx.cs" Inherits="Testcookie.radionTest" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title>用例二</title>

 </head>

<body>

    <form id="form1" runat="server" >

    <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

    <asp:radiobutton ID="Radiobutton1" runat="server" AutoPostBack="true" OnCheckedChanged="Radio_OnCheckedChanged" onclick="return alert("警告！")"  ></asp:radiobutton>

    </form>

</body>

</html>

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

namespace Testcookie

{

    public partial class radionTest : System.Web.UI.Page

    {

        protected void Page_Load(object sender, EventArgs e)

        {

        }

        protected void Radio_OnCheckedChanged(object sender, EventArgs e)

        {

            String word = TextBox1.Text;

            if(RadioButton1.Checked==true)

            {

            Response.Write(word);//当单选按钮选中时打印输出文本框内容

            }

        }

    }

}

在用例一的基础上给RadioButton的添加Onclick事件：onclick="return alert("警告！")"，发现AutoPostBack属性设置又无效了。把RadioButton的OnClick事件删除，运行代码结果AutopostBack属性正常，后台代码也运行。根据这一结果猜测是RadioButton的Onclick事件对AutoPostBack属性的设置起了作用。
用例测试三 JS模拟AutoPostBack
    根据用例的测试结果猜测是RadioButton的OnClick的Javascript函数影响了AutoPostBack属性。AutoPostBack实现实时与后台数据交互是如何实现的？初步猜测是跟js有关。

用例测试三：AutoPostBack+javascript（提交表单）

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="radionTest.aspx.cs" Inherits="Testcookie.radionTest" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title>用例三</title>

    <script language="javascript" type="text/javascript">

        function ty() {

            document.getElementById("form1").submit();//提交表单

        }

    </script>

</head>

<body>

    <form id="form1" runat="server" >

    <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

    <asp:radiobutton ID="Radiobutton1" runat="server" AutoPostBack="true" OnCheckedChanged="Radio_OnCheckedChanged" onclick="return ty()"  ></asp:radiobutton>

     </form>

</body>

</html>

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

namespace Testcookie

{

    public partial class radionTest : System.Web.UI.Page

    {

        protected void Page_Load(object sender, EventArgs e)

        {

        }

        protected void Radio_OnCheckedChanged(object sender, EventArgs e)

        {

            String word = TextBox1.Text;

            if(CheckBox1.Checked==true)

            {

            Response.Write(word);//当单选按钮选中时打印输出文本框内容

            }

        }

    }

}

在用例三中用RadioButton的OnClick事件提交表单，发现JS运行了，也实现了AutoPostBack属性的效果。在网上查了很多的资料，大多都是介绍AutopostBack的基本功能就如上面介绍的一样，没有找到AutoPostBack实现机制有关的资料。

总结与发现


利用javascript提交表单实现了AutopostBack要实现的效果，但是还是不敢确定AutopostBack的实现机制。 最后在查询msdn的过程中发现国外的也有人问这个问题：what is autopostback?

对于这个问题的回答，大部分人的回答都是浅显的介绍了AutopostBack属性的功能，并没有解释AutopostBack的实现机制。不过看到页面的最后还是看到一些兴奋的信息。

Re: what is autopostback?
Mar 02, 2011 09:07 AM|LINK
Postback occurs when you submit a form using button or javascript.
By default Dropdowns, checkboxes, radiobuttons don't have server side event. ASP.Net makes use of javascript to give server side events to these conrols. Hence if you want these controls to do postback you need to set Autopostback = true. Once done whenever you do any change to these controls a javascript method called as __doPostback is called which submits the form thus causing postback。

大致的意思是：
    当你利用提交按钮或javascript提交表单时PostBack就会发生。Dropdowns、CheckBox、RadioButto这些控件在服务器端并没有相应的事件，Asp.net中利用javascript给这些控件添加事件从而实现PostBack。所以如果当你需要PostBack时需要将AutopostBack属性设置为true。无论什么时候一旦控件发生改变就会自动触发一个名为__doPostback的提交表单的js函数。

相关文章