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


Posted in Javascript onNovember 29, 2015

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

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>
Javascript 相关文章推荐
jquery怎样实现ajax联动框(二)
Mar 08 Javascript
JS中批量给元素绑定事件过程中的相关问题使用闭包解决
Apr 15 Javascript
jquery仿苹果的时间/日期选择效果
Mar 08 Javascript
jquery.validate表单验证插件使用详解
Jun 21 jQuery
关于js的三种使用方式(行内js、内部js、外部js)的程序代码
May 05 Javascript
jQuery实现的别踩白块小游戏完整示例
Jan 07 jQuery
JS实现图片轮播效果实例详解【可自动和手动】
Apr 04 Javascript
详解vue的双向绑定原理及实现
May 05 Javascript
10种JavaScript最常见的错误(小结)
Jun 21 Javascript
vue项目中使用AES实现密码加密解密(ECB和CBC两种模式)
Aug 12 Javascript
浅谈JavaScript中this的指向更改
Jul 28 Javascript
Python机器学习之决策树和随机森林
Jul 15 Javascript
Javascript闭包实例详解
Nov 29 #Javascript
jQuery实现图片上传和裁剪插件Croppie
Nov 29 #Javascript
javascript高级编程之函数表达式 递归和闭包函数
Nov 29 #Javascript
javascript实现拖动元素交换位置
Nov 29 #Javascript
javascript实现网页中涉及的简易运动(改变宽高、透明度、位置)
Nov 29 #Javascript
通用javascript代码判断版本号是否在版本范围之间
Nov 29 #Javascript
jQuery如何使用自动触发事件trigger
Nov 29 #Javascript
You might like
php在线生成ico文件的代码
2007/10/09 PHP
PHP读取XML值的代码(推荐)
2011/01/01 PHP
php中使用Curl、socket、file_get_contents三种方法POST提交数据
2011/08/12 PHP
php解压文件代码实现php在线解压
2014/02/13 PHP
33道php常见面试题及答案
2015/07/06 PHP
Laravel5.* 打印出执行的sql语句的方法
2017/07/24 PHP
PHP实现生成推广海报的方法详解
2018/03/14 PHP
jquery $.ajax()取xml数据的小问题解决方法
2010/11/20 Javascript
jquery.fileEveryWhere.js 一个跨浏览器的file显示插件
2011/10/24 Javascript
JavaScript判断访问的来源是手机还是电脑,用的哪种浏览器
2013/12/12 Javascript
用jquery写的一个万年历(自写)
2014/01/20 Javascript
分享我的jquery实现下拉菜单心的
2015/11/29 Javascript
如何用angularjs制作一个完整的表格
2016/01/21 Javascript
vue.js内部自定义指令与全局自定义指令的实现详解(利用directive)
2017/07/11 Javascript
Vue学习笔记进阶篇之过渡状态详解
2017/07/14 Javascript
js实现canvas图片与img图片的相互转换的示例
2017/08/31 Javascript
基于AngularJS的简单使用详解
2017/09/10 Javascript
vue实现添加与删除图书功能
2018/10/07 Javascript
js代码编写无缝轮播图
2020/09/13 Javascript
[00:36]DOTA2上海特级锦标赛 Alliance战队宣传片
2016/03/04 DOTA
python异步任务队列示例
2014/04/01 Python
python实现根据主机名字获得所有ip地址的方法
2015/06/28 Python
在Django框架中运行Python应用全攻略
2015/07/17 Python
使用Python读取安卓手机的屏幕分辨率方法
2018/03/31 Python
Python列表推导式与生成器用法分析
2018/08/02 Python
对pandas中时间窗函数rolling的使用详解
2018/11/28 Python
python树莓派红外反射传感器
2019/01/21 Python
关于Python 的简单栅格图像边界提取方法
2019/07/05 Python
pytorch中torch.max和Tensor.view函数用法详解
2020/01/03 Python
Python+OpenCV实现图像的全景拼接
2020/03/05 Python
Python 使用office365邮箱的示例
2020/10/29 Python
eBay德国站:eBay.de
2017/09/14 全球购物
计算机科学与技术应届生求职信
2013/11/07 职场文书
大学团日活动总结书
2015/05/11 职场文书
《圆明园的毁灭》教学反思
2016/02/16 职场文书
浅谈MySQL中的六种日志
2022/03/23 MySQL