用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="http://www.cnblogs.com/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，希望对需要此功能的人起到帮助作用