精通ASP.NET MVC ——URL和Ajax辅助器方法

最新推荐文章于 2021-08-05 16:10:18 发布

机械键盘侠

最新推荐文章于 2021-08-05 16:10:18 发布

阅读量506

点赞数

分类专栏： ASP.NET MVC 学习

本文链接：https://blog.csdn.net/xuchen_wang/article/details/96855932

版权

Ajax(或者，如果你愿意，也可以称为AJAX)是 Asynchronous JavaScripts and XML(异步JavaScripts与XML)。其XML部分并不如它往常那样意义重大，但是异步部分却使AJax十分有用。这是后台请求服务器数据，而不必重载Web页面的一种模型。MVC框架包含了对渐进式Ajax内建的支持，这意味着你将使用辅助器方法来定义AJax特性，而不必在整个视图中添加代码。

准备示例项目

新建一个空的MVC项目，然后新建一个People控制器，代码如下图所示：

public class PeopleController : Controller
    {
        private Person[] personData = {
            new Person { FristName = "Admin",LastName = "FreeMan",Role = Role.Admin},
            new Person { FristName = "Jacqui",LastName = "Griffyth",Role = Role.User},
            new Person { FristName = "John",LastName = "Smith",Role = Role.User},
            new Person { FristName = "Anne",LastName = "Jones",Role = Role.Guset}
        };
        // GET: People
        public ActionResult Index()
        {
            return View();
        }

        public ActionResult GetPeople()
        {
            return View(personData);
        }

        [HttpPost]
        public ActionResult GetPeople(string selectedRole)
        {
            if (selectedRole == null || selectedRole == "ALL")
            {
                return View(personData);
            }
            else
            {
                Role selected = (Role)Enum.Parse(typeof(Role), selectedRole);
                return View(personData.Where(p => p.Role == selected));
            }
        }
    }

在Views/Shared/_Layout.cshtml中添加CSS样式，如下图所示：

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>_Layout</title>
    <style typeof="text/css">
        label {
            display :inline-block;
            width:100px;
        }
        div.dataELem {
            margin: 5px;

        }
        h2 > label {
            width:inherit;
        }
        .editor-label, .editor_field {
            float:left;
            margin-top:10px;
        }
            .editor_field input {
                height:20px;
            }
        .editor-label {
            clear:left;
        }
        .editor_field {
            margin-left:10px;
        }
        .input[type=submit] {
            float:left;clear:both;margin-top:10px;
        }
        .column {
            float:left;margin:10px;
        }

        table, td, th {
            border:thin solid black;border-collapse:collapse;padding:5px;background-color:lemonchiffon; text-align:left;margin:10px 0;
        }

        div.load {
            color:red;margin:10px;font-weight:bold;
        }

        div.ajaxLink {
            margin-top :10px;margin-right:5px;float:left;
        }
    </style>
</head>
<body>
    <div> 
    </div>
    @RenderBody()
</body>
</html>

创建同步表单，/Views/People/GetPeople.cshtml，代码如下图所示：

@using WebApplication1.Models;
@model IEnumerable<Person>

@{
    ViewBag.Title = "GetPeople";
    Layout = "/Views/Shared/_Layout.cshtml";
}

<h2>
    Get People
</h2>

<table>
    <thead><tr>First</tr><tr>Last</tr><tr>Role</tr></thead>
    <tbody>
        @foreach (Person p in Model)
        {
            <tr>
                <td>@p.FristName</td>
                <td>@p.LastName</td>
                <td>@p.Role</td>
            </tr>
        }
    </tbody>
</table>

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

运行程序，并导航到/People/Getpeople/，如下图所示：

选择下拉框中的角色类型，并点击submit按钮后，可以筛选出人员菜单，如下图所示：

创建基本的链接和URL

视图的最基本任务之一是创建链接或URL，使用户能够随之进入应用程序的其他部分。以下是常见的可用的HTML辅助器：

渲染URLs的HTML辅助器
描述	示例
相对于应用程序的URL	Url.Content(" / Content / Site.css") output: /Content/Site.css
链接到指定动作/控制器	Html.ActionLink("My Link","Index","Home") output: <a href = "/"> My Link </a>
动作URL	Url.Action("GetPeople","Peopole") output: /People/Getpeople
使用路由数据的URL	Url.RouteUrl(new {controller = "People",action = "GetPeople"}) output: /People/Getpeople
使用路由数据的链接	Html.Route("My Link",new { controller = "People",action = "GerPeople"}) output: <a href = "/People/GetPeople">My Link</a>
链接到指定的路由	Html.RouteLink("My Link","FormRoute",new { controller = "People", action = "GetPeople"}) output

最低0.47元/天解锁文章

机械键盘侠

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
精通ASP.NET MVC ——URL和Ajax辅助器方法

Ajax(或者，如果你愿意，也可以称为AJAX)是 Asynchronous JavaScripts and XML(异步JavaScripts与XML)。其XML部分并不如它往常那样意义重大，但是异步部分却使AJax十分有用。这是后台请求服务器数据，而不必重载Web页面的一种模型。MVC框架包含了对渐进式Ajax内建的支持，这意味着你将使用辅助器方法来定义AJax特性，而不必在整个视图中添加代...
复制链接

扫一扫

专栏目录