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:

复制代码
ExpandedBlockStart.gif Code
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时会弹出如下窗口:

2009102815095278.jpg

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:

ExpandedBlockStart.gif Code
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:

复制代码
ExpandedBlockStart.gif Code
   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:

复制代码
ExpandedBlockStart.gif Code
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》

四、源码


本文转自 你听海是不是在笑 博客园博客,原文链接:http://www.cnblogs.com/nuaalfm/archive/2009/10/28/1591410.html   ,如需转载请自行联系原作者
相关文章
|
10天前
|
设计模式 开发框架 前端开发
MVC 模式在 C# 中的应用
MVC(Model-View-Controller)模式是广泛应用于Web应用程序开发的设计模式,将应用分为模型(存储数据及逻辑)、视图(展示数据给用户)和控制器(处理用户输入并控制模型与视图交互)三部分,有助于管理复杂应用并提高代码可读性和维护性。在C#中,ASP.NET MVC框架常用于构建基于MVC模式的Web应用,通过定义模型、控制器和视图,实现结构清晰且易维护的应用程序。
20 2
|
5月前
|
前端开发 Java 测试技术
Java一分钟之Spring MVC:构建Web应用
【5月更文挑战第15天】Spring MVC是Spring框架的Web应用模块,基于MVC模式实现业务、数据和UI解耦。常见问题包括:配置DispatcherServlet、Controller映射错误、视图解析未设置、Model数据传递遗漏、异常处理未配置、依赖注入缺失和忽视单元测试。解决这些问题可提升代码质量和应用性能。注意配置`web.xml`、`@RequestMapping`、`ViewResolver`、`Model`、`@ExceptionHandler`、`@Autowired`,并编写测试用例。
329 3
|
5月前
|
开发框架 前端开发 JavaScript
ASP.NET AJAX使用方法概述(三)
ASP.NET AJAX使用方法概述(三)
43 1
|
2月前
|
前端开发 Java UED
瞬间变身高手!JSF 与 Ajax 强强联手,打造极致用户体验的富客户端应用,让你的应用焕然一新!
【8月更文挑战第31天】JavaServer Faces (JSF) 是 Java EE 标准的一部分,常用于构建企业级 Web 应用。传统 JSF 应用采用全页面刷新方式,可能影响用户体验。通过集成 Ajax 技术,可以显著提升应用的响应速度和交互性。本文详细介绍如何在 JSF 应用中使用 Ajax 构建富客户端应用,并通过具体示例展示 Ajax 在 JSF 中的应用。首先,确保安装 JDK 和支持 Java EE 的应用服务器(如 Apache Tomcat 或 WildFly)。
33 0
|
2月前
|
存储 前端开发 数据库
神秘编程世界惊现强大架构!Web2py 的 MVC 究竟隐藏着怎样的神奇魔力?带你探索实际应用之谜!
【8月更文挑战第31天】在现代 Web 开发中,MVC(Model-View-Controller)架构被广泛应用,将应用程序分为模型、视图和控制器三个部分,有助于提高代码的可维护性、可扩展性和可测试性。Web2py 是一个采用 MVC 架构的 Python Web 框架,其中模型处理数据和业务逻辑,视图负责呈现数据给用户,控制器则协调模型和视图之间的交互。
29 0
|
2月前
|
开发框架 .NET 开发工具
【Azure 应用服务】App Service 的.NET Version选择为.NET6,是否可以同时支持运行ASP.NET V4.8的应用呢?
【Azure 应用服务】App Service 的.NET Version选择为.NET6,是否可以同时支持运行ASP.NET V4.8的应用呢?
|
2月前
|
开发框架 监控 .NET
【Azure 应用程序见解】在Docker中运行的ASP.NET Core应用如何开启Application Insights的Profiler Trace呢?
【Azure 应用程序见解】在Docker中运行的ASP.NET Core应用如何开启Application Insights的Profiler Trace呢?
|
3月前
|
开发框架 搜索推荐 前端开发
【.NET全栈】ASP.NET开发Web应用——Web部件技术
【.NET全栈】ASP.NET开发Web应用——Web部件技术
|
2月前
|
开发框架 .NET API
如何在 ASP.NET Core Web Api 项目中应用 NLog 写日志?
如何在 ASP.NET Core Web Api 项目中应用 NLog 写日志?
|
3月前
|
XML 前端开发 API
惊艳全场的秘诀!AJAX、Fetch API与Python后端,打造令人惊叹的Web应用!
【7月更文挑战第13天】构建现代Web应用的关键在于提供无缝用户体验,这涉及AJAX和Fetch API的异步数据交换以及Python(如Flask)的后端支持。Fetch API以其基于Promise的简洁接口,改进了AJAX的复杂性。例如,一个Flask应用可提供用户数据,前端利用Fetch API在不刷新页面的情况下显示信息。这种结合提升了效率,减少了服务器负载,是现代Web开发的趋势。随着技术发展,预期将有更多工具优化这一过程。
58 3

相关实验场景

更多