由ASP.NET所谓前台调用后台、后台调用前台想到HTTP——实践篇（二）

在由ASP.NET所谓前台调用后台、后台调用前台想到HTTP——理论篇中描述了一下ASP.NET新手的三个问题及相关的HTTP协议内容，在由ASP.NET所谓前台调用后台、后台调用前台想到HTTP——实践篇（一）中已经解答了关于服务器怎么改变页面元素或“调用”JavaScript的问题，为了避免上篇啰啰嗦嗦一大推，这次直奔主题——ASP.NET前台如何调用后台方法

问题细化

所谓前台调用后台这种问题的提出无非是因为很多新手受了ASP.NET服务器端控件的“误导”，你不是说前台没有把JavaScript语句、页面元素什么的传到后台，所以前台调用后台，或者后台监视页面变化是扯淡嘛！那ASP.NET中为什么服务器端控件一点击就能调用后台制定方法呢？按照你前面的理论即使用了服务器端控件，那么到了浏览器页面也变成最普通不过的HTML文本了，怎么还能够调用服务器端方法呢？！

确实，浏览器呈现的是HTML文本，我们先不用拘泥于ASP.NET怎么做到的前台“调用”后台，我们可以自己实现一下，不过在此之前我们得明白一些过于Post的问题

简单聊聊Post

我们在看很多网页的时候都会看到这样的内容

<form id="form1" method="post" action="Default.aspx">
<input type="text" name="wd" />
<input type="submit" name="test" value="test" />
</form>

这段HTML文本同学们都能看懂，页面上有一个form，form内有两个input，点击submit的时候，页面form内容会以post方式被提交到Default.aspx这个页面。

HTTP协议中的Post方法会将所处的form提交到form指定页面，如果form指定的方法为post（还可能是get等），那么form内有些数据会一并被提交。

既然不是整个form被提交，那么哪些数据会被提交呢？

1.input的name和value

2.input type=”submit” 只有被点击的时候才将其本身name与value提交

3.对于多个name相同的input type=”checkbox”，只有选中项的值会被提交（多个value以,连接）

4.对于多个name相同的input type=”radio”，只有选中项的value会被提交（同名的radio只能单选）

5.select的name和被选中的option的vaue（不是option的text）

6.textarea 的name与value

这样被提交的数据可以在提交的页面的后台中以Request.Form[“name”]的方式查到其值

input type=”submit” “调用”后台方法

知道了form和post的最基本知识，我们就可以模拟ASP.NET的button调用后台方法了，首先准备这样一个页面

<form id="form1" method="post" action="Default.aspx">
<input type="submit" name="test" value="test"/>
</form>

在后台添加想调用的方法

protected void test_Click(object sender, EventArgs e)
{
Response.Write("Button Click!");
}

很简单的内容，后台方法的两个参数完全可以不用（和事件有关），填上只是为了增加其逼真性，代码中有几个需要注意的地方

1.form的方法需要设为post，这个很明显。。。

2.form的action设为页面本身，也就是让页面提交给自己

3.input要有name

准备工作做好后就可以模拟JavaScript调用后台方法了，在页面的 OnLoad方法中写入代码

protected override void OnLoad(EventArgs e)
{
if (Request.Form["test"]!=null)
{
test_Click(this, new EventArgs());
}
base.OnLoad(e);

}

聪明的同学肯定可以看出端倪了，在点击test的时候会提交表单，页面的OnLoad会自动执行，这时候会判断提交过来的表单中是否包含test（submit被点击后会被提交，不点击不提交，所以可以根据name可以判断出哪个按钮被按了），就这么简单，点击submit的时候，预定义的方法就被调用了，要是页面上有很多submit，这时候就需要if-else或者switch或者for这样的东西来判断到底是哪个submit被点击了，然后调用对应方法。

asp: button

对比一下，ASP.NET正好用，首先人家的from是这样的

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

人家自动就给render成这样了





我们也不需要自己在OnLoad中添加if-else，只要在control的属性中添加OnClick=”XXX”就可以了，我没看过.NET源码，但是我大胆的揣测，虽然不用再OnLoad里if-else了，但应该也是类似的方式处理。

不自动提交表单的怎么办

细心的同学可能要问了，你这么做是可以，但是依赖于表单提交，我们知道并不是所有的页面元素都会点一下就提交表单，像控件asp: DropDownList的OnSelectIndexChanged事件，人家也会调用回台方法，那是怎么做的？

其实非常简单，对于这种需求，仍然可以用表单提交的方式处理，不能自动提交表单，那么我们可以用JavaScript帮助其提交，看个select change “调用”后台函数的例子，首先像这样修改页面，添加一个select

<form id="form1" method="post" action="Default.aspx">
<input type="hidden" id="__param" name="__param" />
<input id="test" name="test" type="submit" value="test" />
<select id="select1" name="select1">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<script type="text/javascript">
document.getElementById('select1').onchange = function () {
document.getElementById('__param').value = this.name;
document.getElementById('form1').submit();
};
</script>
</form>

我们除了select元素还添加了两个内容，一个input type=”hidden”的隐藏元素，一段JavaScript脚本，在JavaScript脚本中对select的onchange绑定了一个方法，当select选择项变化的时候，把其name赋值给隐藏域的value，然后提交表单，由于隐藏域可定会被提交，这样我们可以同样在页面的Onload中判断谁的onchange触发了，然后调用预定义方法，后台代码是这样的

protected override void OnLoad(EventArgs e)
{
string param= Request.Form["__param"];
if (Request.Form["test"]!=null)
{
test_Click(this, new EventArgs());
}
else if (param == "select1")
{
select_Change(this, new EventArgs());
}
base.OnLoad(e);
}

protected void test_Click(object sender, EventArgs e)
{
Response.Write("Button Click!");
}

protected void select_Change(object sender, EventArgs e)
{
string newValue = Request.Form["select1"];
Response.Write("Seclect value chaned to " + newValue);
}

是不是很简单呢？先判断是不是submit，不是的话判断隐藏域，命中后调用预定义方法。

细心的同学仍然会发现问题，要是一个元素上同时又两个事件怎么办？比如还想对这个select添加cilck事件怎么办，这时候我们可以修改隐藏域的值，不仅记录name，还记上事件类型，类似这样

document.getElementById('select1').onchange = function () {
document.getElementById('__param').value = this.name+"$ onchange";
document.getElementById('form1').submit();
};

document.getElementById('select1').onclick = function () {
document.getElementById('__param').value = this.name+"$ onclick";
document.getElementById('form1').submit();
};

然后在后台判断的时候，我们可以先把参数按$分割为两个字符串，分别判断元素与事件类型，当然我们也可以再添加一个隐藏域，用来记事件类型，大同小异。

还有同学回问，如果我在客户端同样写了select的onclick，不就把你的代码覆盖了吗？这样我就不能post了，对于这个问题我们大可以换种方式绑定事件处理程序，用addEventListener(attachEven)的方式，这样post的代码和自己写的客户端的就可以同时存在了，这样

var select = document.getElementById('select1');
select.onclick = function () {
//
//
//
};

select.addEventListener('clcik', function () {//浏览器兼容性问题要处理，这里就不演示了
document.getElementById('__param').value = this.name + "$ onclick";
document.getElementById('form1').submit();
}, false);

asp: DropDownList

我们可以看看ASP.NET是怎么处理的，在页面上写一个DropDownList，设起AutoPostBack属性为true

<form id="form1" runat="server">
<asp:DropDownList ID="ddlTest" runat="server" AutoPostBack="true">
<asp:ListItem>1</asp:ListItem>
<asp:ListItem>2</asp:ListItem>
<asp:ListItem>3</asp:ListItem>
</asp:DropDownList>
</form>

生成的页面源码是这样的

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

</title><style type="text/css"></style></head>
<body cz-shortcut-listen="true">
<form method="post" action="Default.aspx" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="">
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" 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="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEdAAWUpg6MZl3t8/pBYubwqWOJqSwDGOXu15HYfC2efhAyHc1gIfz8erLrnvHjMLCTGHuRsEl8lEzJ1SVLtM7lgCLfggLVPRtDk70yN7TcfPOwwBRLeEs10HSMSLT9zq5aYmmjMFX5QrdQAuJDrw+EXFTJ">
</div>
<select name="ddlTest" onchange="javascript:setTimeout('__doPostBack(\'ddlTest\',\'\')', 0)" id="ddlTest">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>

</select>
</form>

</body></html>

主要是这个方法，认真读读是不是和我们刚才写的类似呢，人家传了两个隐藏域，一个用来是Target，一个用来及参数

onchange="javascript:setTimeout('__doPostBack(\'ddlTest\',\'\')', 0)"

function __doPostBack(eventTarget, eventArgument) {
if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
theForm.__EVENTTARGET.value = eventTarget;
theForm.__EVENTARGUMENT.value = eventArgument;
theForm.submit();
}
}

未完待续，与君共勉

通过上面例子分析可以看得出来，JavaScript根本没有调用后台函数，只是提交了含有预设参数的表单，服务器根据参数调用后台方法，生成特定HTML，所谓前台调用后台也就这么回事儿。

有一个问题值得思考，为什么这种很想当然的做法PHP程序员可以轻松想到，很多.NET初级程序员却不行，甚至有时候我们都已经在使用了，比如根据Url的QueryString来调用不同方法，或进行不同处理，却没有进一步想到更常用的Button、DropDownList是怎么做到的？还是那句话，.NET程序员当自勉，不要被.NET的易用性惯坏，多学习原理知识，不要过分满足于做出来，而要多追求为什么，这样才能不断进步。