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实现原生ajax的几种方法介绍
Sep 21 Javascript
jQuery操作cookie方法实例教程
Nov 25 Javascript
分享javascript实现的冒泡排序代码并优化
Jun 05 Javascript
JavaScript实战之带收放动画效果的导航菜单
Aug 16 Javascript
JS中如何实现复选框全选功能
Dec 19 Javascript
Map.vue基于百度地图组件重构笔记分享
Apr 17 Javascript
elementui的默认样式修改方法
Feb 23 Javascript
Vue使用NPM方式搭建项目
Oct 25 Javascript
node上的redis调用优化示例详解
Oct 30 Javascript
jquery轻量级数字动画插件countUp.js使用详解
Oct 17 jQuery
微信小游戏中three.js离屏画布的示例代码
Oct 12 Javascript
Vue包大小优化的实现(从1.72M到94K)
Feb 18 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&amp;mysql 日期操作小记
2012/02/27 PHP
解析PHP 使用curl提交json格式数据
2013/06/29 PHP
php计算title标题相似比的方法
2015/07/29 PHP
php使用pear_smtp发送邮件
2016/04/15 PHP
Laravel框架模型的创建及模型对数据操作示例
2019/05/07 PHP
PHP call_user_func和call_user_func_array函数的简单理解与应用分析
2019/11/25 PHP
翻译整理的jQuery使用查询手册
2007/03/07 Javascript
jQuery弹出层插件简化版代码下载
2008/10/16 Javascript
jQuery调用WebService的实现代码
2011/06/19 Javascript
jquery实现动态菜单的实例代码
2013/11/28 Javascript
基于JavaScript实现移动端TAB触屏切换效果
2015/10/20 Javascript
JavaScript简单实现鼠标移动切换图片的方法
2016/02/23 Javascript
相册展示PhotoSwipe.js插件实现
2016/08/25 Javascript
AngularJS 在同一个界面启动多个ng-app应用模块详解
2016/12/20 Javascript
bootstrap按钮插件(Button)使用方法解析
2017/01/13 Javascript
微信小程序 页面跳转和数据传递实例详解
2017/01/19 Javascript
利用百度地图API获取当前位置信息的实例
2017/11/06 Javascript
vue-cli3+typescript初体验小结
2019/02/28 Javascript
你或许不知道的一些npm实用技巧
2019/07/04 Javascript
解决layer.prompt无效的问题
2019/09/24 Javascript
详解python并发获取snmp信息及性能测试
2017/03/27 Python
python将.ppm格式图片转换成.jpg格式文件的方法
2018/10/27 Python
详解如何在cmd命令窗口中搭建简单的python开发环境
2019/08/29 Python
Python综合应用名片管理系统案例详解
2020/01/03 Python
python爬虫开发之PyQuery模块详细使用方法与实例全解
2020/03/09 Python
解决import tensorflow as tf 出错的原因
2020/04/16 Python
Python在centos7.6上安装python3.9的详细教程(默认python版本为2.7.5)
2020/10/15 Python
python3实现名片管理系统(控制台版)
2020/11/29 Python
自荐书模板
2013/12/19 职场文书
幼儿园家长会欢迎词
2014/01/09 职场文书
预备党员入党自我评价范文
2014/03/10 职场文书
企业道德讲堂实施方案
2014/03/19 职场文书
活动总结范文
2014/08/30 职场文书
病危通知单
2015/04/17 职场文书
描写九月优美句子(39条)
2019/09/11 职场文书
go语言map与string的相互转换的实现
2021/04/07 Golang