写在前面：由于工作需要，本人刚接触asp.net mvc，虽然webform的项目干过几个。但是也不是很精通。抛开asp.net webform和asp.net mvc的各自优劣和诸多差异先不说。我认为虽然mvc和webform有诸多不同，但是也只是为了达到相同的目的而在各自的机制下采取了不同的手段而已。更何况它们都是基于asp.net框架的。因此在解决mvc开发过程中的问题时，我很容易联想到在webform下同样的问题是如何解决的。以此来作为对照。我姑且把这种方法叫做迁移学习法吧。我以"小孩之心"来揣测肯定有很多前辈也做样做过吧。

前几天有人问起一个问题：在webform中，异步请求可以跳转到当前页面后台的一个方法吗？就像mvc中跳转到当前控制器的action一样。我当时给出了参考方案：使用webmethod。是的，今天就围绕这个话题来展开。简单地讲讲在webform和mvc中的ajax异步请求。

webfrom中的ajax异步请求

先来扯个蛋。我们知道为了实现模型显示和逻辑的分离，webform采用了事件驱动。也就是事先注册好对应的操作的事件操作。这么一来，每次服务器控件的事件触发，都会page load一下。然后才执行相应的事件逻辑。这样做的一个后果是每次都要初始化页面的数据。为了平衡，又采用了viewstate，在Page_Load事件中加上if(Page.IsPostBack)的判断来过滤重复的初始化绑定工作。当然即使这样，还是引发了服务器回传，会导致页面全局的刷新(虽然省去了初始化数据绑定时的数据请求)。那么说了这么多废话，你自然而然的会想到要使用一种什么办法来阻止这种行为的发生。我们知道aspx页面实际上最后请求的是页面本身(也就是form表单生成的action指向自己)。在这之中，我们似乎可以察觉点什么。也就是如何实现请求自身的同时还能不导致界面的全部刷新，那么很自然地就想到了一种技术：回调。说了这么多，来段代码回顾下webform中使用jquery实现异步请求。

aspx:

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

<!DOCTYPE html>

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

<head runat="server">

    <script src="Scripts/jquery-1.4.1.min.js"></script>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>

    <script>

        $(function () {

            $("#btnTest").click(function () {

                $.ajax({

                    type: "POST",

                    contentType: "application/json",

                    url: "Index.aspx/SayHello",

                    data: null,

                    dataType: "json",

                    success: function (msg) {

                        alert(msg.d);

                    }

                });

            });

        });

    </script>

</head>

<body>

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

        <div>

            <input type="button" id="btnTest" value="Test" />

        </div>

    </form>

</body>

</html>

aspx.cs:

[System.Web.Services.WebMethod]

public static string SayHello()

{

    return "Hello";

}

从WebMethod属性不难看出这实际上还是应用了webservice组件的方式来实现的。当然ajax实现异步请求的资源可以使aspx、ashx、webservice等，其用法基本差不多，此处不作赘述。

mvc中的ajax异步请求

由于mvc采用基于路由映射，所以Controller中的Action可以直接通过url请求。下面是mvc中实现jquery局部刷新的实例

@model IEnumerable<MvcAppDemo.Models.MovieDB>

@{

    ViewBag.Title = "List";

}

<p>

    <a href="#" id="Add">添加</a>

    <div id="create"></div>

</p>

<table>

    <tr>

        <th>

            @Html.DisplayNameFor(model => model.Title)

        </th>

        <th>

            @Html.DisplayNameFor(model => model.Director)

        </th>

        <th>

            @Html.DisplayNameFor(model => model.Date)

        </th>

        <th>

            Delete

        </th>

    </tr>

    @if (Model != null && Model.Count() != )

    {

        foreach (var item in Model)

        {

            <tr>

                <td>

                    @Html.DisplayFor(modelItem => item.Title)

                </td>

                <td>

                    @Html.DisplayFor(modelItem => item.Director)

                </td>

                <td>

                    @Html.DisplayFor(modelItem => item.Date)

                </td>

                <td></td>

            </tr>

        }

    }

</table>

<script src="~/Scripts/jquery-1.8.2.min.js"></script>

<script type="text/javascript">

    $("#Add").click(function () {

        $.get("/Movies/Create", function (response) {

            $("#create").html(response);

        });

        return false;

    });

｝

MVC&WebForm对照学习：ajax异步请求的更多相关文章

  1. 【Spring学习笔记-MVC-5】利用spring MVC框架，实现ajax异步请求以及json数据的返回

    作者:ssslinppp      时间:2015年5月26日 15:32:51 1. 摘要 本文讲解如何利用spring MVC框架,实现ajax异步请求以及json数据的返回. Spring MV ...

  2. MVC&WebForm对照学习：文件上传(以图片为例)

    原文  http://www.tuicool.com/articles/myM7fe 主题 HTMLMVC模式Asp.net 博客园::首页::  ::  ::  ::管理 5 Posts :: 0 ...

  3. MVC&WebForm对照学习：传值方式

    刚从webform开发转到mvc,如果说像路由这样稍微复杂一点的知识点还可以暂时先放一放(前提是默认的路由规则基本满足大部分需求),那有个问题在快速开发中,我想是必须要当即解决的,那就是webform ...

  4. MVC&WebForm对照学习：文件下载

    说完了WebForm和MVC中的文件上传,就不得不说用户从服务器端下载资源了.那么今天就扯扯在WebForm和MVC中是如何实现文件下载的.说起WebForm中的文件上传,codeshark在他的博文 ...

  5. 09.VUE学习之watch监听属性变化实现类百度搜索栏功能ajax异步请求数据,返回字符串

    cmd下安装axios npm install axios 安装好后,会多出node_modules文件夹 思路: 监听data里的word改变时,发送ajax异步请求数据, 把返回的数据赋值给dat ...

  6. ajax异步请求实例

    1. 问题分析 用户管理显示页面:usermanagement.tpl(也可以说是MVC中的V,即视图) 用户管理数据发送页面:usermanagement.php(也可以说是MVC中的M,即模型) ...

  7. ajax异步请求

    做前端开发的朋友对于ajax异步更新一定印象深刻,作为刚入坑的小白,今天就和大家一起聊聊关于ajax异步请求的那点事.既然是ajax就少不了jQuery的知识,推荐大家访问www.w3school.c ...

  8. ajax异步请求302分析

    1.前言 遇到这样一种情况,打开网页两个窗口a,b(都是已经登录授权的),在a页面中退出登录,然后在b页面执行增删改查,这个时候因为授权原因,b页面后端的请求肯定出现异常(对这个异常的处理,进行内部跳 ...

  9. 关于我们ajax异步请求的方法与知识

      做前端开发的朋友对于ajax异步更新一定印象深刻,作为刚入坑的小白,今天就和大家一起聊聊关于ajax异步请求的那点事.既然是ajax就少不了jQuery的知识,推荐大家访问www.w3school ...

随机推荐

  1. [bzoj 3031] 理科男

    题意 给定一个进制分数 求是否是循环小数,且求出循环节长度 题解 暴力 il int find(int p){ int head=last[p%mod]; while(head&&pr ...

  2. 【娱乐】高端小游戏Manufactoria

    Manufactoria 是一款游戏.游戏中,一家生产机器人的工厂内部出了一 些问题,生产出来的机器人有很多不合格的.一个机器人可以用一个含有红色和 蓝色的颜色串来描述,只有颜色串符合某种规律的机器人 ...

  3. xml存储图片 二进制存储图片

    一．保存图片到XML文件 /// <summary> /// 保存图片到XML文件 /// </summary> private void UploadImageToXml() ...

  4. ${fn:length(worklicenseList)} ＃表示不在struts堆栈里，没有＃表示从struts堆栈里取

    ${fn:length(worklicenseList)} #表示不在struts堆栈里,没有#表示从struts堆栈里取

  5. Unity3D研究院之与Android相互传递消息

    原地址:http://www.xuanyusong.com/archives/676 上一篇文章我们学习了Unity向Android发送消息,如果Android又能给Unity回馈消息那么这就玩美了. ...

  6. HDU 2473 Junk-Mail Filter(并查集+删点，设立虚父节点/找个代理)

    题意:有N封邮件, 然后又两种操作,如果是M X Y , 表示X和Y是相同的邮件.如果是S X,那么表示对X的判断是错误的,X是不属于X当前所在的那个集合,要把X分离出来,让X变成单独的一个.最后问集 ...

  7. 青鸟 王云鹏老师写的SqlHelper 泛型方法，反射，支持实体类

    1: using System; 2: using System.Collections.Generic; 3: using System.Linq; 4: using System.Text; 5: ...

  8. 关于dynamic_cast

    http://www.groad.net/bbs/read.php?tid-5476.html dynamic_cast 进行运行时强制转换.如果在执行时转换非法,则会转换失败.dynamic_cas ...

  9. Python图片与其矩阵数据互相转换

    程序 # coding=gbk from PIL import Image import numpy as np # import scipy import matplotlib.pyplot as ...

  10. HTML5入门九---Canvas画布

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...