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 25 Javascript
jQuery使用技巧简单汇总
Apr 18 Javascript
JavaScript图片轮播代码分享
Jul 31 Javascript
JavaScript+Java实现HTML页面转为PDF文件保存的方法
May 30 Javascript
又一枚精彩的弹幕效果jQuery实现
Jul 25 Javascript
JavaScript字符串对象(string)基本用法示例
Jan 18 Javascript
js es6系列教程 - 基于new.target属性与es5改造es6的类语法
Sep 02 Javascript
ES6学习教程之对象字面量详解
Oct 09 Javascript
JS实现预加载视频音频/视频获取截图(返回canvas截图)
Oct 09 Javascript
vue+jquery+lodash实现滑动时顶部悬浮固定效果
Apr 28 jQuery
详解Vue webapp项目通过HBulider打包原生APP
Jun 29 Javascript
vue+axios 前端实现登录拦截的两种方式(路由拦截、http拦截)
Oct 24 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
多重?l件?合查?(一)
2006/10/09 PHP
php5.3中连接sqlserver2000的两种方法(com与ODBC)
2012/12/29 PHP
基于PHP一些十分严重的缺陷详解
2013/06/03 PHP
PHP反射使用实例和PHP反射API的中文说明
2014/07/02 PHP
php使用文本统计访问量的方法
2016/05/12 PHP
PHP使用第三方即时获取物流动态实例详解
2017/04/27 PHP
php设计模式之单例模式用法经典示例分析
2019/09/20 PHP
laravel 解决强制跳转 https的问题
2019/10/22 PHP
基于JQuery的asp.net树实现代码
2010/11/30 Javascript
jQuery提交多个表单的小例子
2013/06/30 Javascript
javascript与Python快速排序实例对比
2015/08/10 Javascript
一种Javascript解释ajax返回的json的好方法(推荐)
2016/06/02 Javascript
清除浏览器缓存的几种方法总结(必看)
2016/12/09 Javascript
javascript稀疏数组(sparse array)和密集数组用法分析
2016/12/28 Javascript
微信小程序 图片上传实例详解
2017/05/05 Javascript
微信小程序用户自定义模版用法实例分析
2017/11/28 Javascript
解决Linux无法正常安装与卸载Node.js的方法
2018/01/19 Javascript
一份超级详细的Vue-cli3.0使用教程【推荐】
2018/11/15 Javascript
vue把输入框的内容添加到页面的实例讲解
2019/11/11 Javascript
JS数组方法join()用法实例分析
2020/01/18 Javascript
Bootstrap table 服务器端分页功能实现方法示例
2020/06/01 Javascript
Vue检测屏幕变化来改变不同的charts样式实例
2020/10/26 Javascript
详解Python编程中包的概念与管理
2015/10/16 Python
Python脚本暴力破解栅栏密码
2015/10/19 Python
[原创]教女朋友学Python(一)运行环境搭建
2017/11/29 Python
python爬虫正则表达式之处理换行符
2018/06/08 Python
Python队列RabbitMQ 使用方法实例记录
2019/08/05 Python
wxpython自定义下拉列表框过程图解
2020/02/14 Python
Keras自动下载的数据集/模型存放位置介绍
2020/06/19 Python
使用CSS3来匹配横屏竖屏的简单方法
2015/08/04 HTML / CSS
加拿大领先的优质厨具产品在线购物网站:Golda’s Kitchen
2017/11/17 全球购物
瑞典灯具和照明网上商店:Lamp24.se
2018/03/17 全球购物
法院信息化建设方案
2014/05/21 职场文书
工地门卫岗位职责范本
2014/07/01 职场文书
驻村工作简报
2015/07/20 职场文书
小学五年级(说明文3篇)
2019/08/13 职场文书