MVC Ajax Helper oder Jquery laden Teilviews_jquery asynchron

Kein Unsinn mehr, lassen Sie mich einfach den Code für Sie posten.

Modell:

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

Teilansichten asynchron über jQuery laden

In der Ansicht „Home/Index.cshtml“:

@{
 ViewBag.Title = "Index";
 Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2 id="Index">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>
}

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

Teilansicht 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)

Teilansichten asynchron über MVC Ajax Helper laden

Auf die Datei jquery.unobtrusive-ajax.js muss in der Ansicht Home/Index.cshtml verwiesen werden, und der vom Controller zurückgegebene stark typisierte Teilansichtsinhalt wird in das durch UpdateTargetId angegebene Div gerendert.

@{
 ViewBag.Title = "Index";
 Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2 id="Index">Index</h2>
<div>
 @Ajax.ActionLink("通过MVC Ajax Helper","Load","Home", new {pre = "K"}, new AjaxOptions(){UpdateTargetId = "result1"})
</div>
<div id="result1">
</div>

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

Ein Teil der Ansicht ist derselbe wie bei der vorherigen Methode.

Zu den Methoden zum Laden einiger Ansichten durch Aktualisieren der Seite gehören:

Html.RenderPartial()
Html.RenderAction()

Im Folgenden erfahren Sie, wie Sie das asynchrone Laden einiger Inhalte in MVC implementieren

Definieren Sie eine Methode in Aktion, um die Ergebnismenge zu erhalten

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

Verwenden Sie den folgenden JQuery-Code, um die obige Aktion asynchron auf der Hauptseite aufzurufen

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

Schreiben Sie abschließend die Datenstruktur, die Sie zurückgeben möchten, in die Teilansicht GetItemTree.ascx
Zu beachten ist, dass bei Paging AJAX-Paging verwendet werden sollte

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