JQuery异步加载PartialView的方法

本文实例讲述了JQuery异步加载PartialView的方法分享给大家供大家参考,具体如下:

需求:

页面上有dropdown之类的控件,当选择里面不同值的时候,下面关联的内容跟着改变。

思路:

把与 dropdown关联的会改变的内容放到PartialView(ascx)里,用JQuery绑定dropdown的change事件,当选择值改变时,用JQuery ajax请求与PartialView相关的Action,得到数据后讲取到的内容覆盖原来的内容

实现:

Model 类:

rush:csharp;"> public class User { public string UserName { get; set; } public int Age { get; set; } public int UserID { get; set; } public static List GetUsers() { List userList = new List(); 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:

rush:csharp;"> <%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl" %>
<%if (Model != null) {%> 用户名:<%=Model.UserName%>
年龄:<%=Model.Age%> <%} %>

页面

rush:csharp;"> <%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %> Index <%=Html.DropDownList("users",ViewData["users"] as List)%>

Controller类:

userIdList = new List(); 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里加上如下代码:

' } };

我们对应的JS代码:

这样就实现了选择相应的user,显示对应的详细信息了。

只是一个简单的Demo,希望对需要此功能的人起到帮助作用。

更多关于jQuery相关内容感兴趣的读者可查看本站专题:《》、《》、《》、《》、《》、《》、《》及《插件用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

相关文章

页面搜索关键词突出 // 页面搜索关键词突出 $(function () {...
jQuery实时显示日期、时间 html: &lt;span id=&quot...
jQuery 添加水印 &lt;script src=&quot;../../../.....
中文:Sys.WebForms.PageRequestManagerParserErrorExceptio...
1. 用Response.Write方法 代码如下: Response.Write(&q...
Jquery实现按钮点击遮罩加载,处理完后恢复 思路: 1.点击按...