用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，希望对需要此功能的人起到帮助作用。