asp.net mvc3 基础篇之十二 ajax

ajax 这个术语不用说了搞web都熟悉这个

那么看一下最简单ajax例子

首先 model代码

    public class Person
    {
        [Required(ErrorMessage="请输入姓名")]
        public string FirstName { get; set; }
       [Required(ErrorMessage="请输入名字")]
        public string LastName { get; set; }
        [Range(18,100,ErrorMessage="请输入{1}到{2}之间")]
        public int age { get; set; }
        [DataType(DataType.Date)]
        public DateTime date { get; set; }

}

Controller中加一个Action

        [HttpPost]
        public ViewResult Indexs( )
        {
            List<Person> persons = new List<Person>();
            for (int i = 0; i < 10; i++)
            {
                Person person = new Person();
                person.FirstName = "ml";
                person.LastName = "dark";
                person.age =i;
                person.date = DateTime.Now;
                persons.Add(person);
            }

               return View(persons);
        }
View 加一个Indexs 页面    注意不需要用@model 不然多输出多余的字符串

@{
Layout = null;
}
@foreach(MvcApplication2.Models.Person p in Model ){
<li>@Html.DisplayFor(m=>p.age) @Html.DisplayFor(m=>p.date) </li>

}

不过需要接收页面那用默认页 Index页面

@using(Ajax.BeginForm("Indexs",ajaxo))
                                {

                                 <ul id="updateElement"></ul>

<input id="Submit1" type="submit" value="submit" />
}

最后确认一下web.config

是否true

然后测试即可

在mvc中ajax 最核心是AjaxOptions 参考http://msdn.microsoft.com/zh-cn/library/dd470751(v=VS.98).aspx 还有js jquery.unobtrusive-ajax.js

ajaxoptions类型一些属性 msdn文档已经说明很清楚了

那么修改一下index页面代码

@using(Ajax.BeginForm(ajaxo))
                                {

                                 <ul id="updateElement"></ul>


<input id="Submit1" type="submit" value="submit" />
}

url属性指定ajax输出页面url

如果想加个加载状态那么修改一下代码

@using (Ajax.BeginForm(ajaxo))
                                {
                            <div id="loading" style=" display:none;">加载ing</div>

                                 <ul id="updateElement"></ul>


<input id="Submit1" type="submit" value="submit" />
}

如果提交之前弹出对话框

    AjaxOptions ajaxo = new AjaxOptions { UpdateTargetId="updateElement"
          , Url=Url.Action("Indexs")
       , LoadingElementId="loading", LoadingElementDuration=3000
       , Confirm="确定吗?"
    };

还有一个 InsertionMode属性参考msdn简单明了 http://msdn.microsoft.com/zh-cn/library/system.web.mvc.ajax.insertionmode(v=VS.98).aspx

不过上面例子都是提交后ajax 好像asp.net中updatepanel控件一样

接下来创建ajax超级连接例子

                            <div id="loading" style=" display:none;">加载ing</div>

                                 <ul id="updateElement"></ul>

                             <div>
                             @Ajax.ActionLink("点击","Indexs",ajaxo)
                             </div>

还需要在Controller中indexs方法去掉httppost特性即可

接下来介绍一下ajax生命期函数

@model MvcApplication2.Models.Person
<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")"
type="text/javascript"></script>
<script src="@Url.Content("/Scripts/jquery.unobtrusive-ajax.js")"   type="text/javascript"></script>
<script type="text/javascript">
    function OnBegin() {
        alert("这是 OnBegin 函数调用");
    }
    function OnSuccess(data) {
        alert("这是 OnSuccess调用 " + data);
    }
    function OnFailure(request, error) {
        alert("这是 OnFailure 调用:" + error);
    }
    function OnComplete(request, status) {
        alert("这是 OnComplete 调用 " + status);
    }
</script>
@{
    AjaxOptions ajaxo = new AjaxOptions
    {
        UpdateTargetId = "updateElement"
        ,
        Url = Url.Action("Indexs")
        ,
        LoadingElementId = "loading",
        LoadingElementDuration = 3000
        ,
        OnBegin = "OnBegin",
        OnFailure = "OnFailure",
        OnSuccess = "OnSuccess",
        OnComplete = "OnComplete"
    };


}
<div id="loading" style="display: none;">
    加载ing</div>
<ul id="updateElement">
</ul>
<div>
    @Ajax.ActionLink("点击", ajaxo)
</div>
测试可以看到效果

接下来 json传送例子首先把Indexs方法修改一下

        public JsonResult   Indexs( )
        {
            List<Person> persons = new List<Person>();
            for (int i = 0; i < 10; i++)
            {
                Person person = new Person();
                person.FirstName = "ml";
                person.LastName = "dark";
                person.age =i;
                person.date = DateTime.Now;
                persons.Add(person);
            }

var jsons = persons.Select(m => new { date = m.date.ToLongDateString(), age = m.age });

return Json(jsons, JsonRequestBehavior.AllowGet);
}

关于indexs的页面可以忽略不用修改

然后在index页面

function OnSuccess(data) {
var updateelement = $("#updateElement")

       for(i=0;i<data.length;i++)
       {
            updateelement.append("<li>"+data[i].age+" "+data[i].date+"</li>")
       }

}</script>

@{
   AjaxOptions ajaxo = new AjaxOptions
    {
        Url = Url.Action("Indexs")
        ,
        LoadingElementId = "loading",
        LoadingElementDuration = 3000
        ,
   OnSuccess = "OnSuccess"
    };


}
<div id="loading" style="display: none;">
    加载ing</div>
<ul id="updateElement">
</ul>
<div>
    @Ajax.ActionLink("点击","indexs", ajaxo)
</div>

如果需要json格式发送到服务端可以用jquery ajax传送需要 json文件

posted @ 2011-11-01 15:40 糯米小虾阅读(2125) 评论(1) 收藏举报

刷新页面返回顶部

糯米小虾

asp.net mvc3 基础篇之十二 ajax

公告