AspNet MVC下的Ajax

JQuery Ajax

 

跟普通的WebForm的开发方式都一致的

 

Url地址不同点：请求的是Controller下的Action

 

在使用Json返回JsonResult时注意要将第二个参数设置允许Get提交方式：returnJson("",JsonRequestBehavior.AllowGet)

 

在Ajax开发中要注意Ajax方法体内的参数设置正确

提交方式要跟Action打的标签一致

 

示例：

 $(function () {
        $("#btnGetDate").click(function () {
            $.ajax({
                url: "/Student/GetDateNow",
                type: "POST",
                data: "",
                success: function (date) {
                    alert(date);
                    $("#hehh").val(date);
                }
            });
        });
    });

Aspnet MVC Microsoft Ajax

 

将微软提供的脚本引入到页面中

注意引用的顺序

Ajax.BeginForm没有提供闭合的方法，请使用Using配合关闭

AjaxOptions参数的设置

SuccessMthod只是提供提醒，并没有数据的传递

 

示例：

<h2>Microsoft ajax</h2>
        <% using (Ajax.BeginForm("GetDateNow", new AjaxOptions { HttpMethod = "Post", InsertionMode = InsertionMode.Replace,OnSuccess="ShowYesz",UpdateTargetId="resultDiv" }))
           {%>
           <div id='resultDiv'>dd</div>
        <input type="text" id="microsfotAjax" />
        <input type="submit" value="提¬¨¢交?" />
        <%} %>

AjaxOptions的参数

 

UnobtrusiveAjax

 

应当将JavaScript （或其它脚本）从 Html 中分离出来，就像最初将样式从 Html 中分离出来一样道理。简单来说就是将嵌入在 Html 中的JavaScript 全部取出来，放在单独的 js 文件中，页面中不要出现任何 onclick、onload 使用Unobtrusive Ajax 我们最大的收益就是简单易于维护的代码（Code is cleaner and easier to maintain）。

 

基本特点

•网页内容和表单使用纯 HTML；

 

•不借助 JavaScript，表单和超级连接也能正常使用；

 

•页面外观完全由 CSS 控制，而不是 HTML（不要用 table 来布局） 或JavaScript；

任何人都能通过任何设备（考虑不支持JavaScript的设备）访问

 

UnobtrusiveAjax使用方式

 

引用相应的Javascript文件

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

•代码里启用：

•HtmlHelper.ClientValidationEnabled= true;

•HtmlHelper.UnobtrusiveJavaScriptEnabled= true;