html5 ajax mvc,MVC框架 - AJAX支持

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

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

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

创建一个Ajax应用程序

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

步骤1:

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

usingSystem;namespaceMVCAjaxSupportExample.Models{publicclassUser{publicintUserId{get;set;}publicstringFirstName{get;set;}publicstringLastName{get;set;}publicDateTimeBirthDate{get;set;}publicRoleRole{get;set;}}publicenumRole{Admin,Normal,Guest}}

步骤2:

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

usingSystem;usingSystem.Collections.Generic;usingSystem.Linq;usingSystem.Web.Mvc;usingMVCAjaxSupportExample.Models;namespaceMVCAjaxSupportExample.Controllers{publicclassUserController:Controller{privatereadonlyUser[]userData={newUser{FirstName="Edy",LastName="Clooney",Role=Role.Admin},newUser{FirstName="David",LastName="Sanderson",Role=Role.Admin},newUser{FirstName="Pandy",LastName="Griffyth",Role=Role.Normal},newUser{FirstName="Joe",LastName="Gubbins",Role=Role.Normal},newUser{FirstName="Mike",LastName="Smith",Role=Role.Guest}};publicActionResultIndex(){returnView(userData);}publicPartialViewResultGetUserData(stringselectedRole="All"){IEnumerabledata=userData;if(selectedRole!="All"){varselected=(Role)Enum.Parse(typeof(Role),selectedRole);data=userData.Where(p=>p.Role==selected);}returnPartialView(data);}publicActionResultGetUser(stringselectedRole="All"){returnView((object)selectedRole);}}}

步骤3:

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

@modelIEnumerable

@Html.DisplayNameFor(model=>model.FirstName)	@Html.DisplayNameFor(model=>model.LastName)	@Html.DisplayNameFor(model=>model.BirthDate)
@Html.DisplayFor(modelItem=>item.FirstName)	@Html.DisplayFor(modelItem=>item.LastName)	@Html.DisplayFor(modelItem=>item.BirthDate)

步骤4:

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

@usingMVCAjaxSupportExample.Models@modelstring@{ViewBag.Title="GetUser";AjaxOptionsajaxOpts=newAjaxOptions{UpdateTargetId="tableBody"};}

GetUser

@using(Ajax.BeginForm("GetUser",ajaxOpts)){

@Html.DropDownList("selectedRole",newSelectList(new[]{"All"}.Concat(Enum.GetNames(typeof(Role)))))Submit

}

步骤5:

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

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

步骤6:

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

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

¥ 我要打赏

纠错/补充

收藏

加QQ群啦，易百教程官方技术学习群

注意：建议每个人选自己的技术方向加群，同一个QQ最多限加 3 个群。