MVC Ajax Helper或Jquery异步加载部分视图

前端技术 2023/09/06 JavaScript

废话不多说了，直接给大家贴代码了。

Model:

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异步加载部分视图

Home/Index.cshtml视图中需要引用jquery.unobtrusive-ajax.js文件，从控制器返回的强类型部分视图内容呈现到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中实现部分内容异步加载

action中定义一个得到结果集的方法

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代码异步调用上面的action

 $(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>

本文地址：https://www.stayed.cn/item/17324

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案