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 相关文章推荐
jQuery 获取URL参数的插件
Mar 04 Javascript
解决JQeury显示内容没有边距内容紧挨着浏览器边线
Dec 20 Javascript
JavaScript中对循环语句的优化技巧深入探讨
Jun 06 Javascript
新手快速学习JavaScript免费教程资源汇总
Jun 25 Javascript
jQuery实现hover合成事件的方法
Aug 06 Javascript
jQuery实现带动画效果的多级下拉菜单代码
Sep 08 Javascript
Javascript 判断两个IP是否在同一网段实例代码
Nov 28 Javascript
微信公众号获取用户地理位置并列出附近的门店的示例代码
Jul 25 Javascript
jQuery实现判断滚动条滚动到document底部的方法分析
Aug 27 jQuery
layer弹出层取消遮罩的方法
Sep 25 Javascript
jquery向后台提交数组的代码分析
Feb 20 jQuery
Vue+Element UI 树形控件整合下拉功能菜单(tree + dropdown +input)
Aug 28 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 加密与解密的斗争
2009/04/17 PHP
PHP之短标签开启设置
2013/06/17 PHP
destoon实现调用当前栏目分类及子分类和三级分类的方法
2014/08/21 PHP
thinkPHP框架通过Redis实现增删改查操作的方法详解
2019/05/13 PHP
javascript 操作文件 实现方法小结
2009/07/02 Javascript
js 获取input点选按钮的值的方法
2014/04/14 Javascript
Javascript中的关键字和保留字整理
2014/10/16 Javascript
javascript实现playfair和hill密码算法
2014/12/07 Javascript
使用jquery菜单插件HoverTree仿京东无限级菜单
2014/12/18 Javascript
跟我学习javascript的隐式强制转换
2015/11/16 Javascript
jQuery旋转木马式幻灯片轮播特效
2015/12/04 Javascript
轻松实现jquery手风琴效果
2016/01/14 Javascript
微信小程序前端源码逻辑和工作流
2016/09/25 Javascript
jQuery ajax MD5实现用户注册即时验证功能
2016/10/11 Javascript
无阻塞加载js,防止因js加载不了影响页面显示的问题
2016/12/18 Javascript
jQuery实现拼图小游戏(实例讲解)
2017/07/24 jQuery
React-Native做一个文本输入框组件的实现代码
2017/08/10 Javascript
使用vue实现一个电子签名组件的示例代码
2020/01/06 Javascript
微信小程序纯文本实现@功能
2020/04/08 Javascript
rhythmbox中文名乱码问题解决方法
2008/09/06 Python
Python探索之pLSA实现代码
2017/10/25 Python
TensorFlow 实战之实现卷积神经网络的实例讲解
2018/02/26 Python
python 阶乘累加和的实例
2019/02/01 Python
python 实现目录复制的三种小结
2019/12/04 Python
pytorch 实现在预训练模型的 input上增减通道
2020/01/06 Python
python3代码中实现加法重载的实例
2020/12/03 Python
selenium如何定位span元素的实现
2021/01/13 Python
HTML5 层的叠加的实现
2020/07/07 HTML / CSS
Waterford美国官网:爱尔兰水晶制品品牌
2017/04/26 全球购物
保加利亚手表、香水、化妆品和珠宝购物网站:Brasty.bg
2020/04/22 全球购物
C#实现启动一个进程
2016/10/01 面试题
什么是Remote Module
2016/06/10 面试题
翻译专业应届生求职信
2013/11/23 职场文书
食品流通安全承诺书
2014/05/22 职场文书
沙滩主题婚礼活动策划方案
2014/09/15 职场文书
幼儿园安全工作总结2015
2015/04/20 职场文书