JQuery异步加载PartialView的方法

 更新时间:2016年06月07日 09:21:41   作者:郑文亮  
这篇文章主要介绍了JQuery异步加载PartialView的方法,涉及jQuery与asp.net交互及异步操作相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下

本文实例讲述了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="/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,希望对需要此功能的人起到帮助作用。

更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jquery中Ajax用法总结》、《jQuery表格(table)操作技巧汇总》、《jQuery拖拽特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》、《jquery选择器用法总结》及《jQuery常用插件及用法总结

希望本文所述对大家jQuery程序设计有所帮助。

相关文章

  • jQuery 遍历函数详解

    jQuery 遍历函数详解

    文章介绍了几个在jQuery中非常有用的遍历函数,遍历函数是做么的方便。当在它们一起使用时,它们将更加强大。也就是说,一个函数的输出是另一个函数的输入,它们是链式的。下面我们就来详细探讨下吧。
    2015-07-07
  • jquery 重写 ajax提交并判断权限后 使用load方法报错解决方法

    jquery 重写 ajax提交并判断权限后 使用load方法报错解决方法

    这篇文章主要介绍了jquery 重写 ajax提交并判断权限后 使用load方法报错解决方法 的相关资料,需要的朋友可以参考下
    2016-01-01
  • 浅谈jQuery框架Ajax常用选项

    浅谈jQuery框架Ajax常用选项

    下面小编就为大家带来一篇浅谈jQuery框架Ajax常用选项。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07
  • jquery实现简易验证插件封装

    jquery实现简易验证插件封装

    这篇文章主要为大家详细介绍了jquery实现简易验证插件的封装,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-09-09
  • jQuery源码分析-05异步队列 Deferred 使用介绍

    jQuery源码分析-05异步队列 Deferred 使用介绍

    异步队列是一个链式对象,增强对回调函数的管理和调用,用于处理异步任务
    2011-11-11
  • Jquery+Ajax+xml实现中国地区选择三级联动菜单效果(推荐)

    Jquery+Ajax+xml实现中国地区选择三级联动菜单效果(推荐)

    下面小编就为大家带来一篇Jquery+Ajax+xml实现中国地区选择三级联动菜单效果(推荐)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-06-06
  • jQuery横向擦除焦点图特效代码分享

    jQuery横向擦除焦点图特效代码分享

    这篇文章主要介绍了jQuery横向擦除焦点图特效,一个具有自己特色的焦点图会吸引用户的注意力,让用户产生浏览网站的兴趣至关重要,现在小编推荐给大家一款特别棒的焦点图,感兴趣的小伙伴可以参考下。
    2015-09-09
  • jQuery实现鼠标滚轮动态改变样式或效果

    jQuery实现鼠标滚轮动态改变样式或效果

    这篇文章主要介绍了jQuery实现鼠标滚轮动态改变样式或效果,需要的朋友可以参考下
    2015-01-01
  • jQuery中is()方法用法实例

    jQuery中is()方法用法实例

    这篇文章主要介绍了jQuery中is()方法用法,实例分析了is()方法的功能、定义及检查匹配元素集合时的各种使用技巧,需要的朋友可以参考下
    2015-01-01
  • JQuery 应用 JQuery.groupTable.js

    JQuery 应用 JQuery.groupTable.js

    在以往的项目中,数据浏览用的都table 的形式展现。如下图1, 这是一个很常见的表格。通常对分类的字段先进行排序。为了让分类表现的更直观。
    2010-12-12

最新评论