MVC Ajax Helper 또는 Jquery는 부분 views_jquery를 비동기적으로 로드합니다.

더 이상 쓸데없는 소리는 하지 마세요. 그냥 코드를 게시하겠습니다.

모델:

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

jQuery를 통해 부분 뷰를 비동기식으로 로드

Home/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>
}

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

부분 보기 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)

MVC Ajax Helper를 통해 부분 뷰를 비동기적으로 로드

jquery.unobtrusive-ajax.js 파일은 Home/Index.cshtml 뷰에서 참조되어야 하며 컨트롤러에서 반환된 강력한 형식의 부분 뷰 콘텐츠는 UpdateTargetId에서 지정한 div로 렌더링됩니다.

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

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

일부 화면은 이전 방식과 동일합니다.

페이지를 새로 고쳐 일부 뷰를 로드하는 방법은 다음과 같습니다.

Html.RenderPartial()
HTML.RenderAction()

다음은 MVC에서 일부 콘텐츠의 비동기 로딩을 구현하는 방법을 소개합니다

결과 세트를 얻기 위한 실제 메소드 정의

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

다음 jquery 코드를 사용하여 기본 페이지에서 위 작업을 비동기적으로 호출하세요

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

마지막으로 부분 뷰 GetItemTree.ascx에 반환하려는 데이터 구조를 작성합니다.
한 가지 주의할 점은 페이징이 관련된 경우 AJAX 페이징을 사용해야 한다는 것입니다

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