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 02 Javascript
JAVASCRIPT对象及属性
Feb 13 Javascript
JavaScript DOM学习第八章 表单错误提示
Feb 19 Javascript
详细分析使用AngularJS编程中提交表单的方式
Jun 19 Javascript
iframe中使用jquery进行查找的方法【案例分析】
Jun 17 Javascript
AngularJS封装指令方法详解
Dec 12 Javascript
巧用canvas
Jan 21 Javascript
javascript数组拍平方法总结
Jan 20 Javascript
vue项目如何刷新当前页面的方法
May 18 Javascript
JS使用栈判断给定字符串是否是回文算法示例
Mar 04 Javascript
vue 使用vant插件做tabs切换和无限加载功能的实现
Nov 04 Javascript
Vue深入理解插槽slot的使用
Aug 05 Vue.js
基于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连接Nginx服务器并解析Nginx日志的方法
2015/08/16 PHP
PHP开发之归档格式phar文件概念与用法详解【创建,使用,解包还原提取】
2017/11/17 PHP
HR vs ForZe BO3 第二场 2.13
2021/03/10 DOTA
JQUERY获取form表单值的代码
2010/07/17 Javascript
基于jquery的lazy loader插件实现图片的延迟加载[简单使用]
2011/05/07 Javascript
JavaScript中的关键字&quot;VAR&quot;使用详解 分享
2013/07/31 Javascript
express的中间件bodyParser详解
2014/12/04 Javascript
深入分析jQuery的ready函数是如何工作的(工作原理)
2015/12/17 Javascript
js实现仿微博滚动显示信息的效果
2015/12/21 Javascript
JS结合bootstrap实现基本的增删改查功能
2016/07/22 Javascript
输入框点击时边框变色效果的实现方法
2016/12/26 Javascript
用jQuery实现可输入多选下拉组合框实例代码
2017/01/18 Javascript
VUE实现表单元素双向绑定(总结)
2017/08/08 Javascript
jQuery EasyUI 折叠面板accordion的使用实例(分享)
2017/12/25 jQuery
node.js实现带进度条的多文件上传
2020/03/27 Javascript
使用Vue实现调用接口加载页面初始数据
2019/10/28 Javascript
微信小程序实现上拉加载功能
2019/11/20 Javascript
详解Vue的ref特性的使用
2020/01/24 Javascript
如何在vue中使用jointjs过程解析
2020/05/29 Javascript
python中 ? : 三元表达式的使用介绍
2013/10/09 Python
python实现无证书加密解密实例
2014/10/27 Python
Python中字符串的常见操作技巧总结
2016/07/28 Python
详解将Pandas中的DataFrame类型转换成Numpy中array类型的三种方法
2019/07/06 Python
python栈的基本定义与使用方法示例【初始化、赋值、入栈、出栈等】
2019/10/24 Python
python自动化测试之异常及日志操作实例分析
2019/11/09 Python
python GUI库图形界面开发之PyQt5 UI主线程与耗时线程分离详细方法实例
2020/02/26 Python
python else语句在循环中的运用详解
2020/07/06 Python
Pytorch实验常用代码段汇总
2020/11/19 Python
HTML5学习笔记之html5与传统html区别
2016/01/06 HTML / CSS
利用HTML5 Canvas制作键盘及鼠标动画的实例分享
2016/03/15 HTML / CSS
攀岩、滑雪、徒步旅行装备:Black Diamond Equipment
2019/08/16 全球购物
Contém1g官网:巴西彩妆品牌
2020/01/17 全球购物
心理健康课教学反思
2014/02/13 职场文书
答谢酒会主持词
2015/07/02 职场文书
三八红旗手先进事迹材料(2016推荐版)
2016/02/25 职场文书
幼儿园中班教学反思
2016/03/03 职场文书