求知 文章 文库 Lib 视频 Code iProcess 课程 角色 咨询 工具 火云堂 讲座吧   成长之路  
会员   
要资料
 
追随技术信仰

随时听讲座
每天看新闻
 
 

MVC框架教程
MVC框架架构
MVC框架ASP.NET表单
MVC框架-第一个程序
MVC框架-文件夹
MVC框架-模型
MVC框架-控制器
MVC框架-视图
MVC框架-布局
MVC框架-路由引擎
MVC框架-动作过滤器
MVC框架-高级示例
MVC框架-AJAX支持
MVC框架-捆绑
MVC框架-异常处理
 
 

MVC框架 - AJAX支持
99 次浏览
15 次
 捐助

Ajax是异步JavaScript和XML的一个简写形式。MVC框架包含了不显眼的Ajax内置支持,通过它可以使用辅助方法,在所有的视图添加代码来定义Ajax特性。 在MVC中此特征是基于jQuery的功能。

为不使注意AJAX支持,在MVC应用程序,打开Web.config文件,并使用下面的代码设置appSettings部分内的UnobtrusiveJavaScriptEnabled属性。如果键已经存在于应用程序,可以忽略这一步。

<add key="UnobtrusiveJavaScriptEnabled" value="true" />

在这之后,打开位于下Views/Shared文件夹中,见到布局文件_Layout.cshtml文件。 我们将引用添加jQuery库到这里了,使用下面的代码:

<script src="~/Scripts/jquery-ui-1.8.24.min.js" type="text/javascript">
</script>  
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js" type="text/javascript">
</script>

创建一个Ajax应用程序

在以下的例子中,我们将创建这将显示系统中的用户的列表的形式。 我们将会把有三个选项的下拉列表:管理员,普通和来宾。当将选择其中的一个值,它会显示属于使用AJAX获取这一类的用户列表。

步骤1:

创建一个模型文件Model.cs并复制下面的代码:

using System;

namespace MVCAjaxSupportExample.Models
{
    public class User
    {
        public int UserId { get; set; }
        public string FirstName { get; set; }
        public string LastName { get; set; }
        public DateTime BirthDate { get; set; }
        public Role Role { get; set; }
    }

    public enum Role
    {
        Admin,
        Normal,
        Guest
    }
} 

步骤2:

创建一个控制器文件名为UserController.cs并创建里面有两个动作方法如下所示:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web.Mvc;
using MVCAjaxSupportExample.Models;

namespace MVCAjaxSupportExample.Controllers
{
    public class UserController : Controller
    {
        private readonly User[] userData =
        {
            new User {FirstName = "Edy", LastName = "Clooney", Role = Role.Admin},
            new User {FirstName = "David", LastName = "Sanderson", Role = Role.Admin},
            new User {FirstName = "Pandy", LastName = "Griffyth", Role = Role.Normal},
            new User {FirstName = "Joe", LastName = "Gubbins", Role = Role.Normal},
            new User {FirstName = "Mike", LastName = "Smith", Role = Role.Guest}
        };

        public ActionResult Index()
        {
            return View(userData);
        }

        public PartialViewResult GetUserData(string selectedRole = "All")
        {
            IEnumerable data = userData;
            if (selectedRole != "All")
            {
                var selected = (Role) Enum.Parse(typeof (Role), selectedRole);
                data = userData.Where(p => p.Role == selected);
            }
            return PartialView(data);
        }

        public ActionResult GetUser(string selectedRole = "All")
        {
            return View((object) selectedRole);
        }
    }
}

步骤3:

现在,用下面的代码创建一个名为GetUserData的局部视图。该视图将用于显示基于从下拉列表中选择的角色的用户的列表。

@model IEnumerable<MVCAjaxSupportExample.Models.User>

<table>
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.FirstName)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.LastName)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.BirthDate)
        </th>
        <th></th>
    </tr>

@foreach (var item in Model) {
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.FirstName)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.LastName)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.BirthDate)
        </td>
        <td>
        
        </td>
    </tr>
}

</table>

步骤4:

现在创建一个getUser视图使用下面的代码。这个视图将异步从先前创建的控制器的GetUserData动作得到数据。

@using MVCAjaxSupportExample.Models
@model string
@{
ViewBag.Title = "GetUser";
AjaxOptions ajaxOpts = new AjaxOptions {
UpdateTargetId = "tableBody"
};
}
<h2>Get User</h2>
<table>
    <thead><tr><th>First</th><th>Last</th><th>Role</th></tr></thead>
        <tbody id="tableBody">
            @Html.Action("GetUserData", new {selectedRole = Model })
        </tbody>
</table>

@using (Ajax.BeginForm("GetUser", ajaxOpts)) {
    <div>
        @Html.DropDownList("selectedRole", new SelectList(
        new [] {"All"}.Concat(Enum.GetNames(typeof(Role)))))
        <button type="submit">Submit</button>
    </div>
}

步骤5:

最后只是改变Route.config项,启动用户控制器。

defaults: new { controller = "User", action = "GetUser", id = UrlParameter.Optional }

步骤6:

最后,运行这将看起来像下面的截图中的应用:

如果从下拉菜单中选择管理员(Admin),它会去获取所有具有管理员类型的用户。这是通过AJAX发生,不需要重新加载整个页面。

 


您可以捐助,支持我们的公益事业。

1元 10元 50元





认证码: 验证码,看不清楚?请点击刷新验证码 必填



99 次浏览
15 次
 捐助
 


每天2个文档/视频
扫描微信二维码订阅
订阅技术月刊
获得每月300个技术资源
 
 

关于我们 | 联系我们 | 京ICP备10020922号 京公海网安备110108001071号