65.9K
CodeProject 正在变化。 阅读更多。
Home

ASP.NET MVC 框架中的 Ajax 开发人员技巧

Afzaal Ahmad Zeeshan
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.36/5 (6投票s)

2015 年 2 月 14 日

MIT

6分钟阅读

viewsIcon

14828

这篇博客文章为 ASP.NET MVC 框架中的 Ajax 开发人员分享了一个技巧。

这是另一篇为 ASP.NET 开发人员准备的简短博客文章，这些开发人员正在使用 Ajax（或即将在其应用程序中使用 Ajax 进行异步调用以与服务器通信），并且可能对 MVC 模式的 View 部分感到困惑。这篇博客文章将尝试用一种简单的方法来给他们一些关于如何在应用程序中创建 Ajax 功能的技巧，并澄清有关 View 部分的困惑。这篇文章的背景是一个关于如何在 ASP.NET MVC 框架中使用 Ajax 获取数据的问题。虽然这是一个简单的任务，但我知道新手开发人员在编写逻辑时会遇到麻烦，因此我写了这篇博客文章来解释这种行为的核心概念。

我还会提供一个您可以下载并在应用程序中测试的代码示例。这个应用程序将是一个简单的“Hello world，在 ASP.NET MVC 中使用 Ajax”应用程序。之后，您可以根据自己的需求使其变得复杂。

动手编写一些 ASP.NET 代码

第一阶段是为我们的应用程序编写后端代码，即 ASP.NET MVC 应用程序。等等，我想在这里首先阐述的是，Ajax 请求通常不需要您发送整个 HTML 标记进行渲染。通常，Ajax 请求用于下载有关用户的少量详细信息，例如他们的姓名、公司名称或一条简短消息，如用户已启动的进程的成功消息。因此，发送整个 HTML 标记会花费大量时间，并占用大量网络带宽，因为它会以 HTML 标记的形式发送整个 XML 树。

因此，我将在此项目中不创建任何 View。但我将只使用一个 Controller。该 Controller 将用于执行所有操作，并且在 Controller 创建完成后，我将使用路由机制在我们的应用程序中允许自定义 URL；这些 URL 不会映射到应用程序设置中的实际 HTML 文件。别担心，随着应用程序的构建，这一段的这个概念将开始变得有分量，您将理解我是如何做到的，以及您将如何创建自己的 Ajax 运行的 ASP.NET MVC 应用程序。

注意：如果您不熟悉 ASP.NET MVC 框架本身，我强烈建议您阅读我关于 ASP.NET MVC 框架本身的另一篇文章。在这篇博客文章中，我不会解释框架本身的任何概念，而是会简单地调整内容并解释 Ajax 和 ASP.NET MVC 的部分。因此，如果您先阅读 那篇文章，并首先理解 Controller、View 和 Model（构成 ASP.NET MVC 框架的 MVC 部分）的基本概念，那会更好。

首先，让我们创建一个 Controller。要创建 Controller，您可以借助 Visual Studio，单击Controllers文件夹并向其中添加 Controller。随意命名。我将其命名为 AjaxController；以表明它将通过 HTTP 协议控制所有 Ajax 请求。完成此操作后，您可以创建自己的操作方法，这些方法将响应您自己的特定函数。我没有费心创建任何复杂的任务，而是创建了一个名为“CustomAction”的函数。它将用作我们 Ajax 处理网页的 URL。

在此页面中，您将编写以下代码来处理它并为其提供结果。就像简单的 C# 应用程序一样，函数可以具有任何返回数据类型，因此，在 ASP.NET MVC 应用程序中，我们可以返回一个 string（或任何其他数据类型对象）而不是 View，该 string 将作为对客户端 Ajax 请求的响应发送下去。它的结构会更简单，也更短。

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

namespace AjaxRequests_in_ASPNET_MVC.Controllers
{
   public class AjaxController : Controller
   {
      // GET: Ajax
      public string Index()
      {
         return "Not allowed";
      }

      // Our custom action, URL would be /ajax/customaction
      public string CustomAction()
      {
         // We're going to return a string, not a view.
         return "Hello world, using Ajax in ASP.NET MVC application.";
      }
   }
}

上面的代码将返回一个 string，该 string 可以用作响应，并渲染到 HTML 中，或者进行任何您想要的操作。

现在，让我们更改路由，以便应用程序无需使用Views文件夹中Ajax文件夹内的 Web 页面即可运行。打开App_Start文件夹，然后在其中打开RouteConfig文件，并在其中编写这个新的 route.MapPath() 函数。

// Create a new route, set the controller to "Ajax" and the remaining would be the Action
// Note that there are no Views in the Views folder to map to this location.
routes.MapRoute(
   name: "AjaxController",
   url: "Ajax/{action}",
   defaults: new {controller = "Ajax"}
);

现在这段代码将在您的应用程序中创建一个路由方案，并允许您的应用程序在实际上不必在那个位置有一个特定的文件来运行和处理 Ajax 请求的情况下运行。在上面的代码中，我使用的是“/ajax/customajax”类型的 URL，在这个 URL 中，Ajax 是一个常量 string 值，用作路径，然后 customajax 将是 Controller 的操作。当调用此 URL 时，ASP.NET 将执行 Controller 的 CustomAjax 操作，并返回函数内的 string 结果。

执行 Ajax 代码

此项目的 Ajax 代码是一个简单的 jQuery 代码，用于创建到服务器的异步请求，以下载更多数据。但在我分享 Ajax 请求的代码之前，我想让您在项目的 _Layout.cshtml 文件中做一些更改。更改是包含 jQuery 库到项目中，以便您可以在网页中使用 jQuery（因为我们将使用该布局）。将此行代码添加到 HTML 标记的 <head> 元素中。

<script src="~/Scripts/jquery-1.10.2.js"></script>

现在 jQuery 已添加到您的 HTML DOM 中，您可以在将此页面设为布局的其他页面中使用该库，以利用 jQuery 语法和其他对象。我将使用 Ajax。

以下代码描绘了用于示例 Ajax 请求的代码，

$(document).ready(function () {
   $.ajax({
      // The URL
      url: "ajax/customaction",
      // If the request was successful; which will be, if it is not successful check for errors
      success: function (data) {
         // Alert the data; it would be "Hello world, using Ajax in ASP.NET MVC application."
        alert(data);
      }
   });
});

现在一旦这段代码运行，它将尝试调用指定的 URL。在上面一节中，我们讨论了 ASP.NET 将如何使用路由和操作方法处理该请求，然后返回单个 string 值。它最终将使用返回的 string 提醒用户。那将是一个单个 Ajax 运行的应用程序，它将向用户返回简单的纯消息，而无需任何复杂且大型的 View。

关注点

ASP.NET MVC 框架可以支持 Ajax 请求，就像任何简单的网站一样。

您可以使用路由来定义自己的自定义 URL。您可以定义要使用的路径，以及 Controller 或操作模式。您不总是需要向用户返回一个 View。有时（如果您愿意），您也可以发送任何类型的数据（这些数据将被序列化为 string 以进行传输）。

© . All rights reserved.