JQuery异步加载PartialView的方法


Posted in Javascript onJune 07, 2016

本文实例讲述了JQuery异步加载PartialView的方法。分享给大家供大家参考,具体如下:

需求:页面上有dropdown之类的控件,当选择里面不同值的时候,下面关联的内容跟着改变。

思路:把与 dropdown关联的会改变的内容放到PartialView(ascx)里,用JQuery绑定dropdown的change事件,当选择值改变时,用JQuery ajax请求与PartialView相关的Action,得到数据后讲取到的内容覆盖原来的内容。

实现:

Model 类:

public class User
{
    public string UserName { get; set; }
    public int Age { get; set; }
    public int UserID { get; set; }
    public static List<User> GetUsers()
    {
      List<User> userList = new List<User>();
      User user = null;
      user = new User();
      user.UserID = 1;
      user.UserName = "小明";
      user.Age = 20;
      userList.Add(user);
      user = new User();
      user.UserID = 2;
      user.UserName = "小红";
      user.Age = 21;
      userList.Add(user);
      user = new User();
      user.UserID = 3;
      user.UserName = "小强";
      user.Age = 22;
      userList.Add(user);
      return userList;
    }
    public static User GetUserById(int userId)
    {
      return GetUsers().SingleOrDefault(u=>u.UserID==userId);
    }
}

我们的PartialView:

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<MvcApplication2.Models.User>" %>
<div>
  <%if (Model != null)
   {%>
  用户名:<%=Model.UserName%><br />
  年龄:<%=Model.Age%>
  <%} %>
</div>

主页面:

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<MvcApplication2.Models.User>" %>
<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
  Index
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
  <h2>Index</h2>
  <%=Html.DropDownList("users", ViewData["users"] as List<SelectListItem>)%>
  <div id="userDetails">
    <%Html.RenderPartial("UserDetails", Model); %>
  </div>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="HeadMeta" runat="server">
  <script language="javascript" src="/Scripts/user.js" type="text/javascript"></script>
</asp:Content>

Controller类:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using MvcApplication2.Models;
namespace MvcApplication2.Controllers
{
  public class UserController : Controller
  {
    public ActionResult Index()
    {
      List<SelectListItem> userIdList = new List<SelectListItem>();
      foreach (MvcApplication2.Models.User item in MvcApplication2.Models.User.GetUsers())
      {
        userIdList.Add(new SelectListItem { Text = item.UserName,Value = item.UserID.ToString()});
      }
      ViewData["users"] = userIdList;
      MvcApplication2.Models.User user = MvcApplication2.Models.User.GetUsers().FirstOrDefault();
      return View(user);
    }
    public PartialViewResult UserDetails(int? userId)
    {
      MvcApplication2.Models.User user = null;
      if (userId == null)
      {
        user = MvcApplication2.Models.User.GetUsers().FirstOrDefault();
      }
      else
      {
        user = MvcApplication2.Models.User.GetUserById(userId.Value);
      }
      return PartialView(user);
    }
  }
}

我们需要在Master页里指定我们的PartialView对应的Action路径,这样实现:

在Head里加上如下代码:

<script language="javascript" type="text/javascript">
    mySite = {
    actions : {
        userDetails: '<%=Url.Action("UserDetails","User")%>'
    }
};
</script>

我们对应的JS代码:

$(document).ready(function () {
  $("#users").change(function () {
    dropDownChange();
  });
});
function dropDownChange() {
  var userId = $("#users").val();
  $.ajax({
    type: "POST",
    url: mySite.actions.userDetails,
    data: { userId: userId },
    success: function (data) {
      $("#userDetails").html(data);
    }
  });
}

这样就实现了选择相应的user,显示对应的详细信息了。

只是一个简单的Demo,希望对需要此功能的人起到帮助作用。

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
JavaScript事件列表解说
Dec 22 Javascript
20款非常优秀的 jQuery 工具提示插件 推荐
Jul 15 Javascript
用js实现table单元格高宽调整,兼容合并单元格(兼容IE6、7、8、FF)实例
Jun 25 Javascript
node.js中的fs.rmdir方法使用说明
Dec 16 Javascript
jQuery通过控制节点实现仅在前台通过get方法完成参数传递
Feb 02 Javascript
jquery获取select选中值的方法分析
Dec 22 Javascript
jQuery扩展实现text提示还能输入多少字节的方法
Nov 28 Javascript
vue的Virtual Dom实现snabbdom解密
May 03 Javascript
react-redux中connect()方法详细解析
May 27 Javascript
jQuery模拟12306城市选择框功能简单实现方法示例
Aug 13 jQuery
js实现图片无缝循环轮播
Oct 28 Javascript
从源码角度来回答keep-alive组件的缓存原理
Jan 18 Javascript
基于JS实现无缝滚动思路及代码分享
Jun 07 #Javascript
Bootstrap学习笔记之css样式设计(1)
Jun 07 #Javascript
jQuery hover事件简单实现同时绑定2个方法
Jun 07 #Javascript
PassWord输入框代码分享
Jun 07 #Javascript
Bootstrap学习笔记之css组件(3)
Jun 07 #Javascript
JavaScript判断数组重复内容的两种方法(推荐)
Jun 06 #Javascript
JavaScript数组的定义及数字操作技巧
Jun 06 #Javascript
You might like
Java中final关键字详解
2015/08/10 PHP
thinkphp诸多限制条件下如何getshell详解
2020/12/09 PHP
javascript中RegExp保留小数点后几位数的方法分享
2013/08/13 Javascript
jQuery自带的一些常用方法总结
2014/09/03 Javascript
返回顶部按钮响应滚动且动态显示与隐藏
2014/10/14 Javascript
jquery trigger实现联动的方法
2016/02/29 Javascript
jquery uploadify如何取消已上传成功文件
2017/02/08 Javascript
详解使用nodeJs安装Vue-cli
2017/05/17 NodeJs
微信小程序开发中的疑问解答汇总
2017/07/03 Javascript
react-native DatePicker日期选择组件的实现代码
2017/09/12 Javascript
全面介绍vue 全家桶和项目实例
2017/12/27 Javascript
vue cli 3.0 使用全过程解析
2018/06/14 Javascript
ES6入门教程之变量的解构赋值详解
2019/04/13 Javascript
Vue代码整洁之去重方法整理
2019/08/06 Javascript
详解vuex数据传输的两种方式及this.$store undefined的解决办法
2019/08/26 Javascript
JS获取当前时间戳方法解析
2020/08/29 Javascript
[00:36]TI7不朽珍藏III——斯温不朽展示
2017/07/15 DOTA
[02:07]2017国际邀请赛中国区预选赛直邀战队前瞻
2017/06/23 DOTA
安装dbus-python的简要教程
2015/05/05 Python
深度定制Python的Flask框架开发环境的一些技巧总结
2016/07/12 Python
python多进程和多线程究竟谁更快(详解)
2017/05/29 Python
python+opencv实现霍夫变换检测直线
2020/10/23 Python
Python3.5 Pandas模块缺失值处理和层次索引实例详解
2019/04/23 Python
python数据爬下来保存的位置
2020/02/17 Python
Python3 pickle对象串行化代码实例解析
2020/03/23 Python
更新升级python和pip版本后不生效的问题解决
2020/04/17 Python
Django Admin 上传文件到七牛云的示例代码
2020/06/20 Python
10个最常见的HTML5面试题 附答案
2016/06/06 HTML / CSS
TCP协议通讯的过程和步骤是什么
2015/10/18 面试题
写clone()方法时,通常都有一行代码,是什么?
2012/10/31 面试题
表扬信格式
2014/01/12 职场文书
学校出纳员岗位职责
2014/03/18 职场文书
实验室标语
2014/06/21 职场文书
群众路线个人整改措施
2014/10/24 职场文书
Python中常见的导入方式总结
2021/05/06 Python
台式电脑蓝牙适配器怎么安装?台式电脑蓝牙适配器安装教程
2022/04/08 数码科技