日期:2014-05-16  浏览次数:21119 次

asp.net mvc3 Ajax 简单应用

研究这个方法是用来异步提交表格,使表格能达到异步刷新,而不至于刷新页面的流量过大

如果当表格的列非常大时,我们如果用jquery要去一个一个拼接处表格来,但是如果直接用微软提供的Ajax,可以直接更新一个局部视图

直接看代码:

View:    Index.cshtml

@{
    ViewBag.Title = "Home Page";
}

<script language="javascript" type="text/javascript" src="/Scripts/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="/Scripts/jquery.unobtrusive-ajax.min.js"></script>
<script language="javascript" type="text/javascript" src="/Scripts/MicrosoftAjax.js"></script>
<script language="javascript" type="text/javascript" src="/Scripts/MicrosoftMvcAjax.js"></script>


<h2>@ViewBag.Message</h2>
<p>
@{var mod = ViewData["list"];}
	<!--引用局部视图-->
    @{Html.RenderPartial("Demo2", mod);}

    To learn more about ASP.NET MVC visit <a href="http://asp.net/mvc" title="ASP.NET MVC Website">http://asp.net/mvc</a>.
</p>
比较时间
@(DateTime.Now)



一个局部视图:Demo2

@model List<string>

<div id="dvOrders">
<!--记得指出要更新的区域,该请求是一个Ajax请求-->
@using (Ajax.BeginForm("Index", "Home", new AjaxOptions { HttpMethod = "post", UpdateTargetId = "dvOrders" }))
{
<ul>
        @foreach (var item in Model)
        {
            <li>@(item + DateTime.Now)</li> 
        }
</ul>
         <input type="submit" value="submit" />
}
</div>

controller:HomeController

public ActionResult Index()
        {
            
            if (Request.IsAjaxRequest())
            {//如果该请求是Ajax请求
                var testObj = new List<string>() { "eee", "fff", "ddd","ggg" };
                ViewData["list"] = testObj;
                return PartialView("Demo2", testObj);
            }
            else
            {
                ViewBag.Message = "Welcome to ASP.NET MVC!";    
                var testObj = new List<string>() { "aaa", "bbbb", "ccc" };
                ViewData["list"] = testObj;
            }
                
            return View();
        }