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 克隆数组最简单的方法
Feb 12 Javascript
需要做特殊处理的DOM元素属性的访问
Nov 05 Javascript
了解一点js的Eval函数
Jul 26 Javascript
javascript实现的一个随机点名功能
Aug 26 Javascript
JavaScript节点及列表操作实例小结
Aug 05 Javascript
jQuery实现右侧显示可向左滑动展示的深色QQ客服效果代码
Oct 23 Javascript
jQuery 判断是否包含在数组中Array[]的方法
Aug 03 Javascript
微信公众平台开发教程(四) 实例入门:机器人回复(附源码)
Dec 02 Javascript
BootStrap轮播HTML代码(推荐)
Dec 10 Javascript
vux uploader 图片上传组件的安装使用方法
May 15 Javascript
ng-alain表单使用方式详解
Jul 10 Javascript
茶余饭后聊聊Vue3.0响应式数据那些事儿
Oct 30 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
PHP登陆后跳转到登陆前页面实现思路及代码
2014/01/17 PHP
PHP面向对象程序设计之多态性的应用示例
2018/12/19 PHP
javascript管中窥豹 形参与实参浅析
2011/12/17 Javascript
鼠标移入移出事件改变图片的分辨率的两种方法
2013/12/17 Javascript
javascript实现获取浏览器版本、操作系统类型
2015/01/29 Javascript
JQuery显示、隐藏div的几种方法简明总结
2015/04/16 Javascript
表单input项使用label同时引用Bootstrap库导致input点击效果区增大问题
2016/10/11 Javascript
正则表达式替换html元素属性的方法
2016/11/26 Javascript
使用Xcache缓存器加速PHP网站的配置方法
2017/04/22 Javascript
vue 实现剪裁图片并上传服务器功能
2018/03/01 Javascript
关于Mac下安装nodejs、npm和cnpm的教程
2018/04/11 NodeJs
Nodejs把接收图片base64格式保存为文件存储到服务器上
2018/09/26 NodeJs
vue项目引入Iconfont图标库的教程图解
2018/10/24 Javascript
深入了解响应式React Native Echarts组件
2019/05/29 Javascript
详解Element-UI中上传的文件前端处理
2019/08/07 Javascript
element-ui中dialog弹窗关闭按钮失效的解决
2020/09/22 Javascript
[01:11:32]VG vs FNATIC 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
Python全局变量用法实例分析
2016/07/19 Python
Python3 修改默认环境的方法
2019/02/16 Python
对django后台admin下拉框进行过滤的实例
2019/07/26 Python
python rsync服务器之间文件夹同步脚本
2019/08/29 Python
python异常处理和日志处理方式
2019/12/24 Python
Python3监控疫情的完整代码
2020/02/20 Python
python+selenium 脚本实现每天自动登记的思路详解
2020/03/11 Python
python输出结果刷新及进度条的实现操作
2020/07/13 Python
html5指南-5.使用web storage存储键值对的数据
2013/01/07 HTML / CSS
汉米尔顿手表官网:Hamilton
2020/09/13 全球购物
大专生工程监理求职信
2013/10/04 职场文书
学校百日安全生产活动总结
2014/07/05 职场文书
暑假社会实践心得体会
2014/09/02 职场文书
基于JavaScript实现年月日三级联动
2021/06/22 Javascript
Springboot/Springcloud项目集成redis进行存取的过程解析
2021/12/04 Redis
Nginx实现会话保持的两种方式
2022/03/18 Servers
剧场版《转生恶役只好拔除破灭旗标》公开最新视觉图 2023年上映
2022/04/02 日漫
详解Nginx的超时keeplive_timeout配置步骤
2022/05/25 Servers
Win11怎么添加用户?Win11添加用户账户的方法
2022/07/15 数码科技