MVC Ajax Helper atau Jquery memuatkan sebahagian views_jquery secara tak segerak

Tiada lagi perkara karut, izinkan saya siarkan kod untuk anda.

Model:

namespace MvcApplication1.Models
{
 public class Team
 {
  public string Preletter { get; set; }
  public string Name { get; set; }
 }
}

Muatkan paparan separa secara tidak segerak melalui jQuery

Dalam paparan Laman Utama/Index.cshtml:

@{
 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>
}

Dalam Pengawal Rumah:

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"}
   };
  }
 }
}

Paparan separa 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)

Muatkan paparan separa secara tidak segerak melalui MVC Ajax Helper

Fail jquery.unobtrusive-ajax.js perlu dirujuk dalam paparan Home/Index.cshtml dan kandungan paparan separa yang ditaip kuat yang dikembalikan daripada pengawal dipaparkan ke dalam div yang ditentukan oleh 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>

Dalam Pengawal Rumah:

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"}
   };
  }
 }
}

Sebahagian daripada pandangan adalah sama seperti kaedah sebelumnya.

Kaedah memuatkan beberapa paparan dengan menyegarkan halaman termasuk:

Html.RenderPartial()
Html.RenderAction()

Berikut akan memperkenalkan kepada anda cara melaksanakan pemuatan tak segerak bagi sesetengah kandungan dalam MVC

Tentukan kaedah dalam tindakan untuk mendapatkan set hasil

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;
  }

Gunakan kod jquery berikut untuk memanggil tindakan di atas secara tak segerak pada halaman utama

 $(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);
   }
  });

Akhir sekali, tulis struktur data yang anda mahu kembalikan dalam paparan separa GetItemTree.ascx
Satu perkara yang perlu diambil perhatian ialah jika paging terlibat, paging AJAX harus digunakan

<div style="float: left">
  <%=Html.AjaxPager(resItemResourceBefore, "itemTree", "GetItemTree", "Student")%>
 </div>