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对html元素取值与赋值的方法
Nov 20 Javascript
Javascript获取表单名称(name)的方法
Apr 02 Javascript
JQuery+EasyUI轻松实现步骤条效果
Feb 22 Javascript
js导出excel文件的简洁方法(推荐)
Nov 02 Javascript
判断颜色是否合法的正则表达式(详解)
May 03 Javascript
原生javascript实现的全屏滚动功能示例
Sep 19 Javascript
Node.js学习之地址解析模块URL的使用详解
Sep 28 Javascript
layer.prompt使文本框为空的情况下也能点击确定的方法
Sep 24 Javascript
js实现数字从零慢慢增加到指定数字示例
Nov 07 Javascript
js实现图片粘贴到网页
Dec 06 Javascript
微信小程序国际化探索实现(附源码地址)
May 20 Javascript
JavaScript实现沿五角星形线摆动的小圆实例详解
Jul 28 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制作静态网站的模板框架
2006/10/09 PHP
修改php.ini不生效问题解决方法(上传大于8M的文件)
2013/06/14 PHP
php面向对象中static静态属性和静态方法的调用
2015/02/08 PHP
PHP利用APC模块实现大文件上传进度条的方法
2015/10/29 PHP
基于jquery的弹出提示框始终处于窗口的居中位置(类似于alert弹出框的效果)
2011/09/28 Javascript
基于jquery的当鼠标滚轮到最底端继续加载新数据思路分享(多用于微博、空间、论坛 )
2011/10/10 Javascript
浅谈javascript语法和定时函数
2015/05/03 Javascript
JS之相等操作符详解
2016/09/13 Javascript
JS只能输入正整数的简单实例
2016/10/07 Javascript
js实现右键菜单功能
2016/11/28 Javascript
jQuery实现限制文本框的输入长度
2017/01/11 Javascript
jQuery实现标签页效果实战(4)
2017/02/08 Javascript
JS及JQuery对Html内容编码,Html转义
2017/02/17 Javascript
JS时间控制实现动态效果的实例讲解
2017/07/31 Javascript
简单实现jquery隔行变色
2017/11/09 jQuery
Vue兼容ie9的问题全面解决方案
2018/06/19 Javascript
vue给组件传递不同的值方法
2018/09/29 Javascript
原生js实现抽奖小游戏
2019/06/27 Javascript
解决vue-router 二级导航默认选中某一选项的问题
2019/11/01 Javascript
JS动态图片的实现方法完整示例
2020/01/13 Javascript
vue中的计算属性和侦听属性
2020/11/06 Javascript
[02:41]DOTA2英雄基础教程 谜团
2013/12/10 DOTA
[57:16]2014 DOTA2华西杯精英邀请赛 5 25 LGD VS VG第二场
2014/05/26 DOTA
列举Python中吸引人的一些特性
2015/04/09 Python
Python+MongoDB自增键值的简单实现
2016/11/04 Python
一个基于flask的web应用诞生 flask和mysql相连(4)
2017/04/11 Python
Python pyinotify日志监控系统处理日志的方法
2018/03/08 Python
Centos7下源码安装Python3 及shell 脚本自动安装Python3的教程
2020/03/07 Python
如何将tensorflow训练好的模型移植到Android (MNIST手写数字识别)
2020/04/22 Python
Molly Bracken法国电子商店:法国女性时尚品牌
2019/07/24 全球购物
2014年小学安全工作总结
2014/12/04 职场文书
初中生考试作弊检讨书
2014/12/14 职场文书
2015年社区矫正工作总结
2015/04/21 职场文书
2015年基层党建工作总结
2015/05/14 职场文书
生产设备维护保养制度
2015/08/06 职场文书
java协程框架quasar和kotlin中的协程对比分析
2022/02/24 Java/Android