14、ASP.NET MVC入门到精通——Ajax

简介:

本系列目录:ASP.NET MVC4入门到精通系列目录汇总

Unobtrusive Ajax使用方式(非入侵式)

非入侵式,通俗来讲:就是将嵌入在Html中的JavaScript全部取出来,放在单独的 js 文件中,html标签中不要出现任何onclick、onload 等

Unobtrusive Ajax 方便程序员编写简单易于维护的ajax代码(Code is cleaner and easier to maintain)。

基本特点

1.网页内容和表单使用纯 HTML;

2.不借助 JavaScript,表单和超级连接也能正常使用;

3.页面外观完全由 CSS 控制,而不是 HTML(不要用 table 来布局) 或 JavaScript;

4.任何人都能通过任何设备(考虑不支持JavaScript的设备)访问;

 ASP.Net MVC 全局开启非入侵ajax

ASP.NET MVC4中,已经默认开启客户端验证和非侵入式js。Web.config中

    <add key="ClientValidationEnabled" value="true" />
    <add key="UnobtrusiveJavaScriptEnabled" value="true" />

页面添加非入侵js文件

<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>

可在单个视图页面(View)上关闭

@{Html.EnableUnobtrusiveJavaScript(false);}
@{Html.EnableClientValidation(false);}

注意下js引用顺序

<script src="@Url.Content("~/Scripts/jquery.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>

AjaxHelper

异步链接按钮

 注意:必须开启 非入侵式 Ajax:导入Jquery和unobtrusiveAjax文件

View中:@Ajax.ActionLink 创建 ajax 超链接按钮,一般用来请求动态生成的部分html代码(分部视图)

@Ajax.ActionLink("链接文本", "PartialViewTest", new AjaxOptions() {
                         UpdateTargetId="divMsg",//数据显示的html容器id
                         InsertionMode= InsertionMode.Replace, //替换容器内容
                         HttpMethod="Post" })

Controller中

        public PartialViewResult PartialViewTest()
        {
            ViewData["Msg"] = "Hello world!";
            return PartialView();
        }

异步表单

View中:@Ajax.BeginForm 创建 异步表单

复制代码
@using(Ajax.BeginForm("PartialViewTest","Home",new AjaxOptions{
         UpdateTargetId="msgDiv" , InsertionMode= InsertionMode.Replace, 
         HttpMethod="post" , OnFailure= "fail",
         LoadingElementId="lodeingmsg"}))
{
    <input type="text" name="txtName" />
    <input type="submit" />
}
复制代码

Controller:

        public PartialViewResult PartialViewTest()
        {
            ViewData["Msg"] = "Hello world!";
            return PartialView();
        }

示例

View中:@Ajax.BeginForm 创建 异步表单

复制代码
@using(Ajax.BeginForm("PartialView","Home",new AjaxOptions{
         UpdateTargetId="msgDiv" , InsertionMode= InsertionMode.Replace, 
         HttpMethod="post" , OnFailure= "fail", OnSuccess="success" , 
         OnComplete="comlete", LoadingElementId="lodeingmsg"}))
{
    <input type="text" name="txtName" />
    <input type="submit" />
}
<div id="lodeingmsg" style="display:none;">加载中...</div>
<script type="text/javascript">function fail(xhr) { alert("方法参数是异步对象" + xhr.responseText); }
    function complete(xhr) { alert("方法参数是异步对象" + xhr.responseText); }
    function success(text) { alert("方法参数是响应报文体" + text); }
</script>
复制代码

UpdateTargetId:目标元素id,获取服务器响应后,将获取的响应报文体显示到目标元素的innerHTML中。
InsertionMode:   InsertAfter 插入目标元素原有内容之后;InsertBefore 插入目标元素原有内容之前,Replace,替换目标元素原有内容
LoadingElementId:异步对象readyState==4之前显示"正在加载"状态的元素id
AjaxOptions对象生成【对应】触发ajax请求的标签的 属性

<a data-ajax="true" data-ajax-method="Post" data-ajax-mode="replace" data-ajax-update="#divMsg" href="/Home/PartialViewTest">链接文本</a>

请求Json数据

View中:

@Ajax.ActionLink("click here", "DogList", new AjaxOptions() {
                         UpdateTargetId="divMsg",
                         InsertionMode= InsertionMode.Replace, 
                         HttpMethod="Get" })

Controller中:使用 Json方法 返回一个 JsonResult

public ActionResult PartialView() //返回类型也可写 JsonResult
{
     var  dogList = db.Dogs.ToList();
     return Json(dogList, JsonRequestBehavior.AllowGet);
}

MVC框架默认不允许使用Json响应Get请求,需要开启。

Jquery请求控制器Action

除了url指向 控制器的 Action方法外,其它和以前一样
具体参见 Jquery帮助文档 ajax 方法:
$.ajax   
$.post   
$.load  
$.get

Jquery 模板插件

导入脚本:

<script src="@Url.Content("~/Scripts/jquery-1.7.1.min.js")"></script>
<script src="@Url.Content("~/Scripts/jquery.tmpl.min.js")"></script>

添加模板-占位符格式:$(json对象属性名):

<script id="temp" type="text/x-jquery-tmpl">
            <tr>
                <td>${CID}</td><td>${CName}</td><td>${CCount}</td>
            </tr>
</script>

为模板装载数据并最终生成html,添加到表格中:

function ajaxFinish(jsonObjArray) { //[{CID:"1",CName:"aa",CCount:"1"},....{}]
       $("#temp").tmpl(jsonObjArray).appendTo("#tbList");
}

 

本文转自邹琼俊博客园博客,原文链接:http://www.cnblogs.com/jiekzou/p/4821600.html,如需转载请自行联系原作者

相关文章
|
设计模式 前端开发 JavaScript
Ajax技术【Ajax 实战】(二)-全面详解(学习总结---从入门到深化)
Ajax技术【Ajax 实战】(二)-全面详解(学习总结---从入门到深化)
131 0
|
7月前
|
XML 前端开发 JavaScript
Ajax与Axios,以及Apifox的入门使用
本文由blue编写于2025年3月20日,主要介绍了Ajax、Axios以及Apifox的入门使用。文章首先讲解了Ajax的概念与作用,通过原生代码示例展示了如何实现异步数据交互;接着引入Axios,说明其对Ajax的封装简化了开发流程,并给出Axios实现相同功能的代码;最后详细讲述了Apifox的基本用法,包括创建接口、设置参数及生成Mock数据,为前后端开发提供了便利工具。
210 0
|
开发框架 前端开发 JavaScript
ASP.NET AJAX使用方法概述(三)
ASP.NET AJAX使用方法概述(三)
135 1
|
10月前
|
开发框架 缓存 .NET
GraphQL 与 ASP.NET Core 集成:从入门到精通
本文详细介绍了如何在ASP.NET Core中集成GraphQL,包括安装必要的NuGet包、创建GraphQL Schema、配置GraphQL服务等步骤。同时,文章还探讨了常见问题及其解决方法,如处理复杂查询、错误处理、性能优化和实现认证授权等,旨在帮助开发者构建灵活且高效的API。
227 3
|
JSON 前端开发 JavaScript
Django入门到放弃之ajax
Django入门到放弃之ajax
|
开发框架 前端开发 .NET
ASP.NET MVC WebApi 接口返回 JOSN 日期格式化 date format
ASP.NET MVC WebApi 接口返回 JOSN 日期格式化 date format
165 0
|
开发框架 前端开发 安全
ASP.NET MVC 如何使用 Form Authentication?
ASP.NET MVC 如何使用 Form Authentication?
297 0
|
XML JSON 前端开发
Ajax – JSON入门指南
Ajax – JSON入门指南
140 1
|
开发框架 前端开发 .NET
C# .NET面试系列六:ASP.NET MVC
<h2>ASP.NET MVC #### 1. MVC 中的 TempData\ViewBag\ViewData 区别? 在ASP.NET MVC中,TempData、ViewBag 和 ViewData 都是用于在控制器和视图之间传递数据的机制,但它们有一些区别。 <b>TempData:</b> 1、生命周期 ```c# TempData 的生命周期是短暂的,数据只在当前请求和下一次请求之间有效。一旦数据被读取,它就会被标记为已读,下一次请求时就会被清除。 ``` 2、用途 ```c# 主要用于在两个动作之间传递数据,例如在一个动作中设置 TempData,然后在重定向到另
518 5
|
开发框架 缓存 前端开发
安装ASP.NET AJAX (一安装)
安装ASP.NET AJAX (一安装)
231 0