MVC Ajax Helper oder Jquery laden Teilviews_jquery asynchron-js-Tutorial-php.cn

MVC Ajax Helper oder Jquery laden Teilviews_jquery asynchron

WBOY

Freigeben： 2016-05-16 15:29:10

Original

1568 Leute haben es durchsucht

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

Nach dem Login kopieren

Teilansichten asynchron über jQuery laden

In der Ansicht „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>
}

Nach dem Login kopieren

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

Nach dem Login kopieren

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)

Nach dem Login kopieren

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>Index</h2>
<div>
 @Ajax.ActionLink("通过MVC Ajax Helper","Load","Home", new {pre = "K"}, new AjaxOptions(){UpdateTargetId = "result1"})
</div>
<div id="result1">
</div>

Nach dem Login kopieren

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

Nach dem Login kopieren

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&#63; page)
  {
   pp = new PagingParam(page &#63;&#63; 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;
  }

Nach dem Login kopieren

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

Nach dem Login kopieren

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>

Nach dem Login kopieren