ASP.NET MVC实践系列4-Ajax应用

ASP.NET MVC中支持Ajax的方式和webform中有些区别，没有了updatepanel，所以对于初学者来说在最开始应用时似乎没有在webform中简单，但实际使用上更为灵活而跟webform比较并没有增加多少复杂度。

一、ASP.NET MVC  Ajax 的 Helpers

对于ASP.NET MVC中的Ajax的学习，需要重点了解Ajax.ActionLink()和Ajax.BeginForm()这两个Helper，Ajax是System.Web.Mvc.ViewPage中的属性，它返回的类型是AjaxHelper，而ASP.NET MVC中的View都是继承于System.Web.Mvc.ViewPage，所以在页面上能直接使用这两个Helper。

1、Ajax.ActionLink()：向客户端输入一个链接地址，跟Html.ActionLink()很相似，当单击这个链接时可以异步调用Controller中的方法

Ajax.ActionLink()方法有许多重载，我们这里举例说明其中一个比较常用的重载：

public static string ActionLink(this AjaxHelper ajaxHelper, string linkText, string actionName, object routeValues, AjaxOptions ajaxOptions);
linkText：是显示在客户端的文本

actionName：是Action的名字，默认情况下我们会使用当前的Controller。

routeValues：将传入到Controller中方法的参数

ajaxOptions：配置Ajax的一些选项，看完下面的例子我们再详细讲解这个配置选项。

这里先举一个简单的例子：

View：

    <script src="<%= Url.Content("~/Scripts/MicrosoftAjax.js") %>" type="text/javascript"></script>

    <script src="<%= Url.Content("~/Scripts/MicrosoftMvcAjax.js") %>" type="text/javascript"></script>

    <%=Ajax.ActionLink("test","Hello",new{name="lfm"},new AjaxOptions{UpdateTargetId="results"}) %>
    <div id="results">
    </div>

虽然ASP.NET MVC 的sctrpts中已经有了Ajax的脚本，但使用之前仍然还要在页面中引用。Ajax.ActionLink("test","Hello",new{name="lfm"},new AjaxOptions{UpdateTargetId="results"}) 的意思是前端页面显示的文本为test，当点击test时会调用Controller中的Hello方法，参数为lfm，返回的内容会在id=results的标签中显示。

Controller:

public ActionResult ActionLinkTest()
        {
            return View();
        }
        public string Hello(string name)
        {
            return "Hello:" + name;
        }

 

2、ajaxOptions重要选项讲解

属性	类型	解释
Confirm	string	如果指定了这个选项，当单击链接时会弹出一个确认窗口
LoadingElementId	string	如果指定了这个选项，当点击链接时，会将指定的id标签内容的css改为显示状态
UpdateTargetId	string	如果指定了这个选项，异步调用完之后的返回值会替换这个标签。

 Confirm例子：在View中键入   <%=Ajax.ActionLink("ConfirmTest", "Hello", new { name = "lfm" }, new AjaxOptions {Confirm="你确定么", UpdateTargetId = "results" })%>
当单击ConfirmTest时会弹出如下窗口：

LoadingElementId例子：

View：

<%=Ajax.ActionLink("LoadingTest","HelloSleep",new{name="lfm"},new AjaxOptions{LoadingElementId="loading",UpdateTargetId="results"}) %>
    <div id="loading" style="display: none">
        Loading......
    </div>
    <div id="results">
    </div>

Controller:

public string HelloSleep(string name)
        {
            Thread.Sleep(2000);
            return "Hello:" + name;
        }

 

3、Ajax.BeginForm()：跟Html.BeginForm()很相似，当按提交按钮时会异步的调用相应的Controller中的方法

View：

 <% using (Ajax.BeginForm("Hello",
new AjaxOptions { UpdateTargetId = "myResults" }))
       { %>
       <%=Html.TextBox("name") %>
       <input type="submit" value="调用" />
    <% } %>
    <div id="myResults">
        返回结果
    </div>

Controller:

   public string Hello(string name)
        {
            return "Hello:" + name;
        }
        public ActionResult BeginFormTest()
        {
            return View();
        }

 

二、具体案例：

1、查询news列表

主显示页面的View（NewsShow）：

<script src="<%= Url.Content("~/Scripts/MicrosoftAjax.js") %>" type="text/javascript"></script>

    <script src="<%= Url.Content("~/Scripts/MicrosoftMvcAjax.js") %>" type="text/javascript"></script>

    <% using (Ajax.BeginForm("Search",
new AjaxOptions { UpdateTargetId = "myResults" ,LoadingElementId="loading"}))
       { %>
       <%=Html.TextBox("title") %>
       <input type="submit" value="查询" />
    <% } %>
    <div id="myResults">
        返回结果
    </div>
<div id="loading" style="display:none">
Loading
</div>

另外需要创建一个Partial的View（NewsList）：

<table>
    <tr>
        <th>
            Title
        </th>
        <th>
            Content
        </th>
        <th>
            Author
        </th>
        <th>
            CreateTime
        </th>
        <th>
            Country
        </th>
    </tr>
    <% foreach (var item in Model)
       { %>
    <tr>
        <td>
            <%= Html.Encode(item.id) %>
        </td>
        <td>
            <%= Html.Encode(item.Title) %>
        </td>
        <td>
            <%= Html.Encode(item.Content) %>
        </td>
        <td>
            <%= Html.Encode(item.Author) %>
        </td>
        <td>
            <%= Html.Encode(String.Format("{0:g}", item.CreateTime)) %>
        </td>
        <td>
            <%= Html.Encode(item.Country) %>
        </td>
    </tr>
    <% } %>
</table>

Controller:

public ActionResult Search(string title)
        {
            NewsDataDataContext dc = new NewsDataDataContext();
            return View("NewsList", dc.News.Where(n => n.Title.Contains(title)));
        }
        public ActionResult NewsShow()
        {
            return View();
        }

这里需要注意的就是ajax的返回可以支持ActionResult，只要这个ActionResult为Partial类型的View即可正确显示

 三、参考：

《Professional ASP.NET MVC 1.0》

《Pro ASP.NET MVC  Framework》

四、源码