MVC Ajax Helper or Jquery asynchronously load partial views_jquery
May 16, 2016 pm 03:29 PMNo more nonsense, let me just post the code for you.
Model:
namespace MvcApplication1.Models { public class Team { public string Preletter { get; set; } public string Name { get; set; } } }
Load partial views asynchronously via jQuery
In Home/Index.cshtml view:
@{ ViewBag.Title = "Index"; Layout = "~/Views/Shared/_Layout.cshtml"; } <h2>Index</h2> <div> <a href="#" id="a">通过jQuery异步</a> <br/> </div> <div id="result"> </div> @section scripts { <script type="text/javascript"> $(function() { $('#a').click(function() { $.ajax({ url: '@Url.Action("Index","Home")', data: { pre: 'B' }, type: 'POST', success: function(data) { $('#result').empty().append(data); } }); return false; }); }); </script> }
In HomeController:
using System.Collections.Generic; using System.Linq; using System.Web.Mvc; using MvcApplication1.Models; namespace MvcApplication1.Controllers { public class HomeController : Controller { public ActionResult Index() { return View(); } [HttpPost] public ActionResult Index(string pre) { var result = GetAllTeams().Where(t => t.Preletter == pre).ToList(); ViewBag.msg = "通过jQuery异步方式到达这里~~"; return PartialView("TeamY", result); } private List<Team> GetAllTeams() { return new List<Team>() { new Team(){Name = "巴西队", Preletter = "B"}, new Team(){Name = "克罗地亚队", Preletter = "K"}, new Team(){Name = "巴拉圭", Preletter = "B"}, new Team(){Name = "韩国", Preletter = "K"} }; } } }
Partial view TeamY.cshtml:
@model IEnumerable<MvcApplication1.Models.Team> @{ var result = string.Empty; foreach (var item in Model) { result += item.Name + ","; } } @ViewBag.msg.ToString() <br/> @result.Substring(0,result.Length - 1)
Load partial views asynchronously via MVC Ajax Helper
The jquery.unobtrusive-ajax.js file needs to be referenced in the Home/Index.cshtml view, and the strongly typed partial view content returned from the controller is rendered into the div specified by UpdateTargetId.
@{ ViewBag.Title = "Index"; Layout = "~/Views/Shared/_Layout.cshtml"; } <h2>Index</h2> <div> @Ajax.ActionLink("通过MVC Ajax Helper","Load","Home", new {pre = "K"}, new AjaxOptions(){UpdateTargetId = "result1"}) </div> <div id="result1"> </div>
In HomeController:
using System.Collections.Generic; using System.Linq; using System.Web.Mvc; using MvcApplication1.Models; namespace MvcApplication1.Controllers { public class HomeController : Controller { public ActionResult Index() { return View(); } public ActionResult Load(string pre) { var result = GetAllTeams().Where(t => t.Preletter == pre).ToList(); ViewBag.msg = "通过MVC Ajax Helper到达这里~~"; return PartialView("TeamY", result); } private List<Team> GetAllTeams() { return new List<Team>() { new Team(){Name = "巴西队", Preletter = "B"}, new Team(){Name = "克罗地亚队", Preletter = "K"}, new Team(){Name = "巴拉圭", Preletter = "B"}, new Team(){Name = "韩国", Preletter = "K"} }; } } }
Part of the view is the same as the previous method.
The methods of loading some views by refreshing the page include:
Html.RenderPartial()
Html.RenderAction()
The following will introduce to you how to implement asynchronous loading of some content in MVC
Define a method in action to get the result set
public ActionResult GetItemTree(string title, int itemid, int? page) { pp = new PagingParam(page ?? 1, VConfig.WebConstConfig.PageSize); Common.Page.PagedList<Entity.Res_Item_Resource_R> res_Item_Resource_R = iResourceService.GetRes_Item_Resource_RByItemId(itemid, pp); ViewData["res_Item_Resource_R"] = res_Item_Resource_R; res_Item_Resource_R.AddParameters = new System.Collections.Specialized.NameValueCollection(); res_Item_Resource_R.AddParameters.Add("title", title); res_Item_Resource_R.AddParameters.Add("itemid", itemid.ToString()); ViewResult vr = new ViewResult { ViewData = ViewData, MasterName = "", }; return vr; }
Use the following jquery code to asynchronously call the above action on the main page
$(function () { var id = '<%=itemid %>'; $.ajax({ type: "POST", url: "/Student/GetItemTree", data: { title: '<%=Model.Name %>', itemid: id, page: 1 }, beforeSend: function (data) { //取回数据前 $("#itemTree").html('<span style="padding:5">数据加载中...</span>'); }, error: function (data) { //发生错误时 // debugger; }, success: function (data) { //成功返回时 $("#itemTree").html(data); } });
Finally, write the data structure you want to return in the partial view GetItemTree.ascx
One thing to note is that if paging is involved, AJAX paging should be used
<div style="float: left"> <%=Html.AjaxPager(resItemResourceBefore, "itemTree", "GetItemTree", "Student")%> </div>

Hot Article

Hot tools Tags

Hot Article

Hot Article Tags

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

Replace String Characters in JavaScript

Custom Google Search API Setup Tutorial

8 Stunning jQuery Page Layout Plugins
