Maison > interface Web > js tutoriel > le corps du texte

MVC Ajax Helper ou Jquery chargent de manière asynchrone une vue partielle_jquery

WBOY
Libérer: 2016-05-16 15:29:10
original
1568 Les gens l'ont consulté

Plus de bêtises, laissez-moi vous poster le code.

Modèle :

namespace MvcApplication1.Models
{
 public class Team
 {
  public string Preletter { get; set; }
  public string Name { get; set; }
 }
}
Copier après la connexion

Charger des vues partielles de manière asynchrone via jQuery

Dans la vue Accueil/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>
}
Copier après la connexion

Dans 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"}
   };
  }
 }
}
Copier après la connexion

Vue partielle 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)
Copier après la connexion

Charger des vues partielles de manière asynchrone via MVC Ajax Helper

Le fichier jquery.unobtrusive-ajax.js doit être référencé dans la vue Home/Index.cshtml, et le contenu de la vue partielle fortement typé renvoyé par le contrôleur est restitué dans le div spécifié par 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>
Copier après la connexion

Dans 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"}
   };
  }
 }
}
Copier après la connexion

Une partie de la vue est la même que la méthode précédente.

Les méthodes de chargement de certaines vues en actualisant la page incluent :

Html.RenderPartial()
Html.RenderAction()

Ce qui suit vous présentera comment implémenter le chargement asynchrone de certains contenus dans MVC

Définir une méthode en action pour obtenir l'ensemble de résultats

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;
  }
Copier après la connexion

Utilisez le code jquery suivant pour appeler de manière asynchrone l'action ci-dessus sur la page principale

 $(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);
   }
  });
Copier après la connexion

Enfin, écrivez la structure de données que vous souhaitez renvoyer dans la vue partielle GetItemTree.ascx
Une chose à noter est que si la pagination est impliquée, la pagination AJAX doit être utilisée

<div style="float: left">
  <%=Html.AjaxPager(resItemResourceBefore, "itemTree", "GetItemTree", "Student")%>
 </div>
Copier après la connexion

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal