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面象对象成员、共享成员变量实验
Nov 19 Javascript
jQuery学习笔记之jQuery.fn.init()的参数分析
Jun 09 Javascript
浅谈jQuery.easyui的datebox格式化时间
Jun 25 Javascript
很棒的js Tab选项卡切换效果
Aug 30 Javascript
100行代码理解和分析vue2.0响应式架构
Mar 09 Javascript
基于Bootstrap框架实现图片切换
Mar 10 Javascript
详解Angular4 路由设置相关
Aug 26 Javascript
浅谈Angular文字折叠展开组件的原理分析
Nov 24 Javascript
vue 系列——vue2-webpack2框架搭建踩坑之路
Dec 22 Javascript
Intellij IDEA搭建vue-cli项目的方法步骤
Oct 20 Javascript
Vue运用transition实现过渡动画
May 06 Javascript
vue 需求 data中的数据之间的调用操作
Aug 05 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
PHP5.0对象模型探索之抽象方法和抽象类
2006/09/05 PHP
php压缩HTML函数轻松实现压缩html/js/Css及注意事项
2013/01/27 PHP
探讨如何在php168_cms中提取验证码
2013/06/08 PHP
php获取四位字母和数字的随机数的实现方法
2015/01/09 PHP
UTF-8正则表达式如何匹配汉字
2015/08/03 PHP
php析构函数的简单使用说明
2015/08/24 PHP
PHP实现的蚂蚁爬杆路径算法代码
2015/12/03 PHP
laravel框架添加数据,显示数据,返回成功值的方法
2019/10/11 PHP
学习YUI.Ext 第三天
2007/03/10 Javascript
JavaScript在IE和Firefox(火狐)的不兼容问题解决方法小结
2010/04/13 Javascript
checkbox选中与未选中判断示例
2014/08/04 Javascript
jQuery的Cookie封装,与PHP交互的简单实现
2016/10/05 Javascript
javascript 中设置window.location.href跳转无效问题解决办法
2017/02/09 Javascript
vue-hook-form使用详解
2017/04/07 Javascript
vue-auto-focus: 控制自动聚焦行为的 vue 指令方法
2018/08/25 Javascript
解决vue 引入子组件报错的问题
2018/09/06 Javascript
Vue.js 十五分钟入门图文教程
2018/09/12 Javascript
vue项目中使用scss的方法步骤
2019/05/16 Javascript
如何在 Vue 中使用 JSX
2021/02/14 Vue.js
基于python爬虫数据处理(详解)
2017/06/10 Python
Django开发中复选框用法示例
2018/03/20 Python
python 实现的发送邮件模板【普通邮件、带附件、带图片邮件】
2019/07/06 Python
在PyCharm中控制台输出日志分层级分颜色显示的方法
2019/07/11 Python
用Python从0开始实现一个中文拼音输入法的思路详解
2019/07/20 Python
用Python在Excel里画出蒙娜丽莎的方法示例
2020/04/28 Python
matplotlib基础绘图命令之imshow的使用
2020/08/13 Python
世界顶级户外运动品牌折扣网站:LeftLane Sports
2019/06/12 全球购物
英国名牌服装购物网站:OD’s Designer
2019/09/02 全球购物
预订旅游活动、景点和旅游:GetYourGuide
2019/09/29 全球购物
大学生标准推荐信范文
2013/11/25 职场文书
毕业班联欢会主持词
2014/03/27 职场文书
室内设计专业毕业生求职信
2014/05/02 职场文书
拒绝黄毒毒宣传标语
2014/06/26 职场文书
家庭教育培训学习心得体会
2016/01/14 职场文书
比较node.js和Deno
2021/04/27 Javascript
PHP实现两种排课方式
2021/06/26 PHP