JQuery异步加载PartialView的方法

前端之家收集整理的这篇文章主要介绍了JQuery异步加载PartialView的方法前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

需求:

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

思路:

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

实现:

Model 类:

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:

<%if (Model != null) {%> 用户名:<%=Model.UserName%>
年龄:<%=Model.Age%> <%} %>

页面

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程序设计有所帮助。

原文链接:https://www.f2er.com/jquery/48103.html

猜你在找的jQuery相关文章