用JQuery异步加载PartialView

最新推荐文章于 2018-01-09 21:52:08 发布

Csdbfans

最新推荐文章于 2018-01-09 21:52:08 发布

阅读量1.5k

点赞数

分类专栏： Jquery学习 C#-MVC2 文章标签： jquery user dropdown function server null

C#-MVC2 同时被 2 个专栏收录

28 篇文章

订阅专栏

Jquery学习

9 篇文章

订阅专栏

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

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

实现：

Model 类：

代码：

我们的PartialView：

代码：

主页面：

代码：

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里加上如下代码：

(Csdbfans注：我想这篇文章应该是MVC1.0的，因为在MVC2.0里面完全可以不用上面的脚本代码，只需要把下面的url: mySite.actions.userDetails改成你自己的"Controller/action"就可以)

我们对应的JS代码：

代码：

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

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

转自：http://www.cnblogs.com/wenwuxianren/archive/2010/06/30/1768412.html