开发者社区> 橘子红了呐> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

由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成这样了

image

我们也不需要自己在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的易用性惯坏,多学习原理知识,不要过分满足于做出来,而要多追求为什么,这样才能不断进步。


    本文转自魏琼东博客园博客,原文链接:http://www.cnblogs.com/dolphinX/p/3337682.html,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Http实战之无状态协议、keep-alive分析(1)
Http实战之无状态协议、keep-alive分析(1)
17 0
Http实战之无状态协议、keep-alive分析(2)
Http实战之无状态协议、keep-alive分析(2)
25 0
HTTP协议相关概念(二)
HTTP协议相关概念(二)
16 0
HTTP协议相关概念(一)
HTTP协议相关概念(一)
9 0
http详解1-http协议和工作流程1
http详解1-http协议和工作流程1
10 0
http详解3-http协议和工作流程3
http详解3-http协议和工作流程3
9 0
http协议概念
http协议概念
15 0
TCP/IP协议之http与https通论
TCP/IP协议之http与https通论 TCP/IP是传输层协议, http是应用层协议。web使用http协议作应用层协议,封装http明文数据,然后使用tcp/ip做传输层协议将它通过网络传输。
1045 0
HTTP协议的几个重要概念
    1.连接(Connection):一个传输层的实际环流,它是建立在两个相互通讯的应用程序之间。   2.消息(Message):HTTP通讯的基本单位,包括一个结构化的八元组序列并通过连接传输。
736 0
超文本传输协议 -- HTTP/1.0 Hyptertext Transfer Protocol
组织:中国互动出版网(http://www.china-pub.com/)RFC文档中文翻译计划(http://www.china-pub.com/compters/emook/aboutemook.htm)E-mail:ouyang@china-pub.com译者:黄晓东(黄晓东  xdhuang@eyou.com)译文发布时间:2001-7-14版权:本中文翻译文档版权归中国互动出版网所有。
1744 0
文章
问答
文章排行榜
最热
最新
相关电子书
更多
阿里巴巴HTTP 2.0实践及无线通信协议的演进之路
立即下载
数据智能人机交互实践
立即下载
QQ移动页面框架优化实践
立即下载