• 王帆   2014/7/11 12:50:00
  • ASP.NET MVC中使用JQuery实现异步加载PartialView
  • 关键字: MVC jquery 异步加载 部分视图
  • 需求:页面上有dropdown之类的控件,当选择里面不同值的时候,下面关联的内容跟着改变。

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

    实现:

    Model 类:

    代码

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    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类:


    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    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里加上如下代码:

    1
    2
    3
    4
    5
    6
    7
    <script language="javascript" type="text/javascript">
            mySite = {
            actions : { 
                   userDetails: '<%=Url.Action("UserDetails","User")%>'
            }
        };
        </script>

    我们对应的JS代码:


    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    $(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,显示对应的详细信息了。