与webform平台上的各种实现方式比较

  Asp.net WebForm 和 Asp.net MVC(简称MVC) 都是基于Asp.net的web开发框架,两者有很大的区别,其中一个就是MVC更加注重http本质,而WebForm试图屏蔽http,为此提供了大量的服务器控件和ViewState机制,让开发人员可以像开发Windows Form应用程序一样,基于事件模型去编程。两者各有优缺点和适用情景,但MVC现在是许多Asp.net开发者的首选。

  WebForm是建立在Asp.net的基础上的,Asp.net提供了足够的扩展性,我们也可以利用这些在WebForm下编写像MVC一样的框架,这个有机会再写。说到WebForm很多人就会联想到服务器控件(拖控件!!!),其实不然,我们也可以完全不使用服务器控件,像MVC那样关注html。WebForm要抛弃服务器控件,集中关注html,首先就要将<form runat="server"></form>标签去掉,这个runat server 的form 是其PostBack机制的基础。既然我们要回归到html+css+js,那么意味着许多东西都要自己实现,例如处理Ajax请求。不像MVC那样,WebForm开始的设计就将服务器控件作为主要组成部分,如果不使用它,那么只能利用它的扩展性去实现。

  本系列就是实现一个基于WebForm平台的轻量级ajax组件,主要分为三个部分:

  1. 介绍WebForm下各种实现方式。

  2. 分析ajaxpro组件。

  3. 编写自己的ajax组件。

一、Ajax简介

  异步允许我们在不刷新整个页面的情况下,像服务器请求或提交数据。对于复杂的页面,为了请求一点数据而重载整个页面显然是很低效的,ajax就是为了解决这个问题的。ajax的核心是XmlHttpRequest对象,通过该对象,以文本的形式向服务器提交请求。XmlHttpRequest2.0后,还支持提交二进制数据。

  ajax安全:出于安全考虑,ajax受同源策略限制;也就是只能访问同一个域、同一个端口的请求,跨域请求会被拒绝。当然有时候需求需要跨域发送请求,常用的跨域处理方法有CORS(跨域资源共享)和JSONP(参数式JSON)。

  ajax数据交互格式:虽然Ajax核心对象XmlHttpRequest有"XML"字眼,但客户端与服务器数据交换格式不局限于xml,例如现在更多是使用json格式。  

  ajax 也是有缺点的。例如对搜索引擎的支持不太好;有时候也会违背url资源定位的初衷。

二、Asp.net MVC 平台下使用ajax

  在MVC里,ajax调用后台方法非常方便,只需要指定Action的名称即可。

  前台代码:

<body> <h1>index</h1> <input type="button" value="GetData" /> <span></span> </body> <script type="text/javascript"> function getData() { $.get("GetData", function (data) { $("#result").text(data); }); } </script>

  后台代码:

public class AjaxController : Controller { public ActionResult GetData() { if(Request.IsAjaxRequest()) { return Content("data"); } return View(); } }

三、WebForm 平台下使用ajax

  3.1 基于服务器控件包或者第三方组件

  这是基于服务器控件的,例如ajax toolkit工具包,或者像FineUI这样的组件。web前端始终是由html+css+js组成的,只不过如何去生成的问题。原生的我们可以自己编写,或者用一些前端插件;基于服务器控件的,都是在后台生成的,通常效率也低一点。服务器组件会在前台生成一系列代理,本质还是一样的,只不过控件封装了这个过程,不需要我们自己编写。基于控件或者第三方组件的模式,在一些管理系统还是挺有用的,访问量不是很大,可以快速开发。

  3.2 基于ICallbackEventHandler接口

  .net 提供了ICallbackEventHandler接口,用于处理回调请求。该接口需要用ClientScriptManager在前台生成代理脚本,用于发送和接收请求,所以需要<form runat="server">标签。

  前台代码:

<body> <form runat="server"> <div> <input type="button" value="获取回调结果" /> <span></span> </div> </form> </body> <script type="text/javascript"> function getCallbackResult(result){ document.getElementById("result").innerHTML = result; } </script>

  后台代码:

public partial class Test1 : System.Web.UI.Page, ICallbackEventHandler { protected void Page_Load(object sender, EventArgs e) { //客户端脚本Manager ClientScriptManager scriptMgr = this.ClientScript; //获取回调函数,getCallbackResult就是回调函数 string functionName = scriptMgr.GetCallbackEventReference(this, "", "getCallbackResult", ""); //发起请求的脚本,callServer就是点击按钮事件的执行函数 string scriptExecutor = "function callServer(){" + functionName + ";}"; //注册脚本 scriptMgr.RegisterClientScriptBlock(this.GetType(), "callServer", scriptExecutor, true); } //接口方法 public string GetCallbackResult() { return "callback result"; } //接口方法 public void RaiseCallbackEvent(string eventArgument) { } }

  这种方式有以下缺点

  1. 实现起来较复杂,每个页面Load事件都要去注册相应的脚本。

  2. 前台会生成一个用于代理的脚本文件。

  3. 对于页面交互复杂的,实现起来非常麻烦。

  4. 虽然是回调,但是此时页面对象还是生成了。

  3.3 使用一般处理程序

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wfygfz.html