ASP.NET MVC 入门11、使用AJAX

转载 2009年03月24日 15:46:00

本系列文章基于ASP.NET MVC beta.本示例Blog系统同步更新的演示站点:http://4mvcblog.qsh.in/

在ASP.NET MVC beta发布之前,M$就宣布支持开源的JS框架jQuery,然后ASP.NET MVC beta发布后,你建立一个ASP.NET MVC beta的项目后,你可以在项目的scripts目录下找到ASP.NET AJAX和jQuery的JS。反正我是比较喜欢jQuery的,所以对于M$此举还是挺欣慰的。

废话不多说,我们使用AJAX来实现发表评论的功能吧。先来看看怎样使用M$的JS框架来进行异步AJAX请求。

首先,当然是要引入M$的AJAX框架的JS:

<script src="/Content/MicrosoftAjax.js" type="text/javascript"></script>
<script src="/Content/MicrosoftMvcAjax.js" type="text/javascript"></script> 

 

ASP.NET MVC的框架的Helper方法中提供了对他自身的AJAX的支持,使用的是System.Web.Mvc.Ajax命名空间下面的方法。你可以这样写代码:

image

或者:

image

在AjaxHelper中并没有EndForm方法,你可以直接写Html来关闭form,或者你也可以使用Html.EndForm();来关闭。好,下面我们来写发表评论的AjaxForm:

image

这里详细说下AjaxOptions的可选配置的各个属性的作用。

public string Confirm :没测试,不知道干嘛用的,知道的说一下.
public string HttpMethod :就是指定请求的Http方法,"POST" "GET" "PUT" 等等
public InsertionMode InsertionMode :返回的内容要更新的目标元素的方式。有三种方式:
    Replace :替换目标元素里面的内容;
    InsertBefore :返回内容插入到目标元素的前面;
    InsertAfter:返回内容插入到目标元素的后面。

public string LoadingElementId :指定在进行异步请求的时候要显示的提示信息的Loading元素的ID
public string OnBegin :在发送异步请求前触发的JavaScript方法
public string OnComplete :在发送异步请求完成后触发的JavaScript方法
public string OnFailure :在发送异步请求失败的时候触发的JavaScript方法
public string OnSuccess :在发送异步请求成功的时候触发的JavaScript方法
public string UpdateTargetId :指定返回的内容要更新的目标元素的ID
public string Url :请求的URL,不指定则为form的action的url。

 

在上面的代码中,在异步请求成功后会调用名称为clearComment的JavaScript方法来清除输入框的评论内容,然后返回内容会替换掉id为boxcomments元素里面的内容。完整的客户端代码如下:


<div class="entry">
<% 
    Html.RenderPartial(
"_commentList", ViewData.Model.Comments);
    
if (BlogSettings.Instance.IsCommentsEnabled){ 

   Ajax.BeginForm(
"AddComment"new { controller = "Home", id = "" }, new AjaxOptions()
   {
       HttpMethod 
= "Post",
       LoadingElementId 
= "loading",
       
//OnBegin = "commentValidate",
       OnSuccess 
= "clearComment",
       UpdateTargetId 
= "boxcomments",
       InsertionMode 
= InsertionMode.Replace
   }, 
new { id = "commentform" }); 
%> 

    
<h3 id="respond">发表评论</h3>
    
<p>欢迎留下你的评论,你的支持,是我最大的动力!</p>
    
<p><label for="author">Name (required)</label>
    
<input type="text" tabindex="1" size="22" value="" id="author" name="author"/>
    
<%= Html.ValidationMessage("Author")%></p>
    
<p><label for="email">E-mail (will not be published) (required)</label>
    
<input type="text" size="22" tabindex="2" value="" id="email" name="email"/>
    
<%= Html.ValidationMessage("Email")%></p>
    
<p><label for="url">Website</label>
    
<input type="text" tabindex="3" size="22" value="" id="Website" name="Website"/></p> 

    
<p><%= Html.ValidationMessage("Content")%>
    
<textarea tabindex="4" rows="10" cols="5" id="commentContent" name="content"></textarea></p> 

    
<p><input type="submit" value="Submit Comment" tabindex="5" id="submit" name="submit"/>
    
<span id="loading" style="display:none;">数据处理中</span>
    
<input type="hidden" value="<%= ViewData.Model.Id %>" id="comment_post_ID" name="comment_post_ID"/></p>
</form>
<script type="text/javascript" language="javascript">
    
function clearComment(a, b, c, d) {
        $get(
"commentContent").value = "";
    }    
</script>
<% } %>
</div> 

以上为使用M$的AJAX框架来实现AJAX异步请求,下面来看看使用jQuery怎么做呢。前面说过,我个人比较喜欢jQuery,所以示例的4mvcBlog里面的将使用jQuery来实现。

首先,我们用jQuery写一个用于提交form表单的异步请求的小"插件":

(function($) {
    $.fn.ajaxForm 
= function(success) {
        
var form = $(this);
        
var btn = form.find(":submit");
        form.submit(
function() {
            $.ajax(
{
                url: form.attr(
"action"),
                type: form.attr(
"method"),
                data: form.serialize(),
                beforeSend: 
function(xhr) {
                    btn.attr(
"disabled"true);
                    showLoading();
                }
,
                success: 
function(data) {
                    
if (success) { success(data); }
                }
,
                error: 
function() {
                    alert(
"请求出错,请重试");
                }
,
                complete: 
function() {
                    btn.attr(
"disabled"false);
                    hideLoading();
                }

            }
);
            
return false;
        }
);
    }
;
    
function showLoading() {
        $(
"#loading").css("display""");
    }
;
    
function hideLoading() {
        $(
"#loading").css("display""none");
    }
;
}
)(jQuery); 

 

然后我们不需要修改原来的一般的form,我们只需要使用ajaxForm 方法来指定要进行ajax请求的form的id就可以了:

<form id="commentform" method="post" action="<%= Url.Action("AddComment",new{controller="Home",id=""}) %>"> 

<h3 id="respond">发表评论</h3>
    
<p>欢迎留下你的评论,你的支持,是我最大的动力!</p>
    
<p><label for="author">Name (required)</label>
    
<input type="text" tabindex="1" size="22" value="" id="author" name="author"/>
    
<%= Html.ValidationMessage("Author")%></p>
    
<p><label for="email">E-mail (will not be published) (required)</label>
    
<input type="text" size="22" tabindex="2" value="" id="email" name="email"/>
    
<%= Html.ValidationMessage("Email")%></p>
    
<p><label for="url">Website</label>
    
<input type="text" tabindex="3" size="22" value="" id="Website" name="Website"/></p> 

    
<p><%= Html.ValidationMessage("Content")%>
    
<textarea tabindex="4" rows="10" cols="5" id="commentContent" name="content"></textarea></p> 

    
<p><input type="submit" value="Submit Comment" tabindex="5" id="submit" name="submit"/>
    
<span id="loading" style="display:none;">数据处理中</span>
    
<input type="hidden" value="<%= ViewData.Model.Id %>" id="comment_post_ID" name="comment_post_ID"/></p>
</form>


<script type="text/javascript" language="javascript">    

//我们只需要在这里注册一下事件就可以,这就是jQuery和Html干净的分离的优雅。
$("#commentform").ajaxForm(success);
    
function success(data) {
        
if (data.search(/^/{[/s/S]+/}$/img) > -1{
            alert(eval(
"(" + data + ")").ErrorMsg.toString());
        }
 else {
            
var c = $(".boxcomments");
            
if (c.length <= 0{
                c 
= $('<div class="boxcomments"></div>');
                c.insertBefore(
"#commentform");
            }

            c.html($(data).find(
".boxcomments").html());
            $(
"#commentContent").val("");
        }

    }
 

</script>

后台代码如下:

Code

对于上面的后台代码的[CallByAjax(true)]特性你可以参考我Asp.net Mvc Preview 5 体验--实现ActionSelectionAttribute来判断是否为AJAX请求而选择不同的Action这一篇文章。

暂时就到这里吧。Enjoy!具体效果请下载示例代码运行查看或到演示站点http://4mvcblog.qsh.in/查看。post by Q.Lee.lulu

最新的Blog示例程序代码: 4mvcBlog_10.rar

ajax传递给asp.net mvc 后台数组参数方式

在项目上用到了批量删除与批量更改状态,前台使用了EasyUI的DataGrid,用到了批量更改数据状态功能。 在前台可以获取每条数据的ID,但是如何通过数组方式传递给后台? 通过昨晚的各种...
  • xwnxwn
  • xwnxwn
  • 2017年03月18日 11:47
  • 2344

七天学会ASP.NET MVC (一)——深入理解ASP.NET MVC

ASP.NET vs MVC vs WebForms 许多ASP.NET开发人员开始接触MVC认为MVC与ASP.NET完全没有关系,是一个全新的Web开发,事实上ASP.NET是创建WEB应用...
  • sunkooshining
  • sunkooshining
  • 2016年07月18日 17:15
  • 12252

asp.net mvc基于jQuery+Ajax实现无刷新分页

自己写了个采用asp.net mvc框架的Demo,分页功能采用的是jQuery+Ajax实现的无刷新分页。 解决方案思想:页面数据的初始加载和按页加载都是通过ajax来进行,页面分页链接点击后利用...
  • wangzl1163
  • wangzl1163
  • 2016年06月22日 15:05
  • 5122

[11] 使用 MVC 5 的 EF6 Code First 入门 系列:为ASP.NET MVC应用程序实现继承

[渣译文] 使用 MVC 5 的 EF6 Code First 入门 系列:为ASP.NET MVC应用程序实现继承 2014-05-15 09:02 by Bce, 1014 阅读, 2 评论, ...
  • Litt_J
  • Litt_J
  • 2014年12月29日 14:37
  • 799

asp.net mvc中的ajax以及分页入门

 在asp.net mvc中如果使用jquery来写ajax的话,成功的时候返回的数据保存在dada中,不用写data.d,而web中是data.d. $(function...
  • u011955860
  • u011955860
  • 2014年05月22日 16:58
  • 489

ASP.NET MVC3入门教程之ajax交互

本文转载自:http://www.youarebug.com/forum.php?mod=viewthread&tid=100&extra=page%3D1 随着web技术的不断发展与进步,在web...
  • whh306318848
  • whh306318848
  • 2014年03月04日 17:04
  • 827

Asp.Net MVC2 实用入门系列:第五篇:MVC整合Ajax

摘要       本文将从完成“输入数据验证”这个功能出发,逐渐展开ASP.NET MVC与Ajax结合的方法。首先,本文将使用ASP.NET MVC提供的同步方式完成数据验证。而后,将分别结合AS...
  • moon66sun
  • moon66sun
  • 2012年10月08日 16:40
  • 525

asp.net mvc 使用Ajax调用Action 返回数据。

使用asp.net mvc 调用Action方法很简单。 一、无参数方法。 1、首先,引入jquery-1.5.1.min.js 脚本,根据版本不同大家自行选择。 script src="@...
  • jsjpanxiaoyu
  • jsjpanxiaoyu
  • 2016年08月19日 01:57
  • 356

ASP.NET MVC3书店--第八节 使用Ajax的购物车(第三部分)

8.4 购物车控制器     购物车控制器中主要实现三个处理:将书籍加入购物车,将书籍从购物车中删除,查阅购物车中书籍信息。它主要使用我们刚才创建的三个类:ShoppingCartViewModel...
  • zhanghuangbin
  • zhanghuangbin
  • 2011年10月12日 13:01
  • 976

Asp.Net Mvc 使用jQuery实现Ajax文件上传

1. 实现传统的网络文件上传解决方案          首先,我先实现一个传统的网络文件上传方案,建立一个web页面,我还需要一个和两个元素就能解决问题,如在Index.aspx文件中有如下元素: ...
  • w809026418
  • w809026418
  • 2011年12月21日 13:37
  • 10580
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:ASP.NET MVC 入门11、使用AJAX
举报原因:
原因补充:

(最多只允许输入30个字)