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

使用 Bootstrap 和 Web API 创建 ASP.NET Web Forms 应用程序

Sreekanth Mothukuru
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.66/5 (60投票s)

2014 年 9 月 9 日

CPOL

6分钟阅读

viewsIcon

614126

downloadIcon

22701

在本文中，我们将使用 Bootstrap、Bundle Resources 和 Web API 创建一个 ASP.NET Web Forms 应用程序。

想法

本文的目的是帮助您升级现有的 ASP.NET 项目，以满足当前 HTML5 响应式设计的需求，并通过消除所有服务器往返来使其闪电般快速。基本上，我们试图从页面中消除 ViewState，使其在客户端轻量化，并且所有与后端交互都仅通过服务（Web API）进行。

摘要

本文已扩展为两部分。

第一部分：在本文中，我们将使用 Bootstrap 创建一个 ASP.NET Web Forms 移动优先应用程序来设计布局，使用 Web API 作为服务层，并使用 JSON 格式以便浏览器更好地理解。这样，我们可以消除大部分代码隐藏逻辑，并获得巨大的性能提升。

在此文章的第二部分中，我将演示如何使用 FooTable 插件 创建响应式 HTML 表格，并使用 HandlebarsJs JavaScript 库应用客户端绑定。

第一部分流程

  1. 使用 bootstrap 模板创建一个简单的 ASP.NET forms 应用程序。
  2. 创建 bundle 以优化 Web 资源。
  3. 为现有应用程序添加一个服务层（Web API），使用 JSON 格式。

A) 使用 bootstrap 模板创建一个简单的 ASP.NET forms 应用程序

首先，在 ASP.NET 中创建一个新的 Visual C# 项目，并在“新建项目”对话框中选择“空 Web 应用程序”。单击“确定”创建新项目。（我使用的是 VS 2012）。

现在您的解决方案看起来像这样

继续，为项目创建一个 _Global.asax_ 文件。（稍后我们将更新它。）

右键单击项目并选择“管理 NuGet 程序包…”，然后安装 jQuery 和 Bootstrap。这将为项目创建三个新文件夹：“Content”用于 CSS，“fonts”和“Scripts”。

注意：我倾向于删除新创建文件夹中所有 _min.*_ 和 _map_ 文件，并使用 bundle 技术优化 Web 资源（稍后将讨论 bundle）。此外，项目中会创建一个名为 _packages.config_ 的新文件，我们可以在其中找到所有已安装的 NuGet 程序包及其版本。

警告：如果已安装的程序包版本与 _packages.config_ 文件中指定的版本不匹配，NuGet 将会混淆，并且无法按预期工作。

现在，我们将创建一个主页（_Main.Master_），其中包含标题中的“StyleSection”三个部分，“ContentSection”在正文中，以及“ScriptSection”在正文结束标签之前。对于此示例，我们将使用 Bootstrap 模板中的“Navbar”模板。从浏览器“查看页面源代码”获取源 HTML，并将其放在我们的主页底部。用下载的源替换所需的 HTML，并保持 HTML 以保留其主页行为。

注意：这里我们注释掉了 _form_ 标签；如果需要，我们可以在内容页面中创建 _form_ 部分。现在，我们的主页看起来像这样

创建一个新的内容页面“ContentPage.aspx”。将 Bootstrap 模板中的 HTML 代码（类为“jumbotron”的 _div_）添加到“ContentSection”中。我们的代码应如下所示

将“ContentPage.aspx”设置为起始页；构建并运行应用程序。

笔记本/平板电脑视图

移动视图

注意：如果查看页面源代码，会发现每个 _css_ 和 _js_ 文件都有单独的引用。当页面中添加了大量文件时，这将影响我们的页面加载时间。要解决此问题，我们需要为样式和脚本类型创建 bundle。

B) 创建 Bundle 以优化 Web 资源

首先，我们需要在项目根目录下创建一个名为 _App_Start_ 的新文件夹。

向该文件夹添加一个名为 _BundleConfig.cs_ 的新类，其中包含一个 _static RegisterBundles_ 方法。每个脚本或样式 bundle 都位于虚拟路径（~/bundles/）下。

注意：添加到 bundle 的文件顺序很重要；检查任何依赖项。

要修复 _BundleCollection_ 丢失的引用；从 NuGet 安装“Microsoft.AspNet.Web.Optimization”程序包。

注意：在 _BundleConfig.cs_ 文件中添加“System.Web.Optimization;”命名空间。用指向虚拟路径的 bundle 脚本替换现有的样式和脚本标签。现在，您的主页应显示为

接下来，我们需要在 _Global.asax_ 文件的 _Application_Start_ 中注册我们的 bundle。

protected void Application_Start(object sender, EventArgs e)
{
   BundleConfig.RegisterBundles(BundleTable.Bundles);
}

运行应用程序以检查一切是否正常。现在，如果我们查看页面源代码，即使创建了 bundle，它仍然显示每个资源的单独链接，如下所示

<script src="<a href="view-source:https://:2469/Scripts/jquery-2.1.1.js"
>/Scripts/jquery-2.1.1.js</a>"></script>
<script src="<a href="view-source:https://:2469/Scripts/jquery-2.1.1.intellisense.js"
>/Scripts/jquery-2.1.1.intellisense.js</a>"></script>
<script src="<a href="view-source:https://:2469/Scripts/bootstrap.js">
/Scripts/bootstrap.js</a>"></script>

要查看 bundle 的效果，我们需要使用以下语句显式启用 bundle 优化

// Enable bundle optimization.
BundleTable.EnableOptimizations = true;

启用 bundle 优化后，运行应用程序查看页面源代码。所有三个脚本文件都合并成一个最小化的文件。

<script src="<a href="
view-source:https://:2469/bundles/jQuery?v=7cwTEn6KyyUMXFP2b6gmRFCP5GslErEu2IVcRGkvL-s1">
/bundles/jQuery?v=7cwTEn6KyyUMXFP2b6gmRFCP5GslErEu2IVcRGkvL-s1</a>"></script>

C) 添加一个服务层（Web API）并使用 JSON 格式添加到现有应用程序

首先，我们需要在项目根目录下创建一个名为 _Controller_ 的新文件夹。默认情况下，Web Forms 没有 Web API 功能。我们需要依赖 NuGet 程序包管理器搜索“Microsoft ASP.NET Web API 2.2”并安装该程序包。

注意：这还将安装“Newtonsoft.Json”库来序列化和反序列化对象。如果没有，您始终可以在 NuGet 上找到该程序包。

右键单击 _Controller_ 文件夹并添加新项。从模板中，选择 Web API _Controller_ 类，并创建“ProductController”。

注意：您将看到基本的 _Get_、_Post_、_Put_ 和 _Delete_ 操作方法。注释掉所有代码或对其进行扩展。我倾向于删除所有操作，然后通过添加一个名为“GetHelloWorld”的新操作方法来开始，以测试 API。

public class ProductController : ApiController
{
   [HttpGet]
   [ActionName("GetHelloWorld")]
   public string GetHelloWorld()
   {
      ArrayList al = new ArrayList { "Hello", "World", 
      "From", "Sample", "Application" };
      return JsonConvert.SerializeObject(al);
   }
}

我们需要设置正确的路由机制才能访问 API 方法。所以，让我们开始吧。
向 _App_Start_ 文件夹添加一个名为 _WebApiConfig.cs_ 的新类，其中包含以下代码

public static void Register(HttpConfiguration config)
{
   config.EnableCors();

   config.Routes.MapHttpRoute(
      name: "DefaultApi",
      routeTemplate: "api/{controller}/{Action}/{id}",
      defaults: new { Controller = "Product", 
      Action = "GetHelloWorld", id = RouteParameter.Optional }
   );
}

注意：为此命名空间“System.Web.Http”添加引用。如果您的代码在“config.EnableCors()”处抛出错误，请转到 NuGet 并安装 Cors（跨域资源共享）程序包（_Microsoft.AspNet.WebAPI.Cors_）以从其他域访问 Web API。（在我们的示例项目中不需要此项。）

现在，使用以下代码在 _Global.asax_ 文件的 _Application_Start_ 方法中注册我们的 API 路由

WebApiConfig.Register(GlobalConfiguration.Configuration);

现在，尝试使用以下链接访问 API

https://:7656/api/

注意：我们在上面的链接中没有指定控制器和操作名称。这些值在 _WebAPIConfig_ 文件中默认设置为（“ProductController”和“GetHelloWorld”）。结果以 XML 格式显示，这是 Web API 的默认行为。要以 JSON（JavaScript Object Notation）格式获取结果；我们需要在 _WebAPIConfig Register_ 方法中设置媒体类型标头以接受“text/html”，如下所示。

// To return json return
config.Formatters.JsonFormatter.SupportedMediaTypes.Add(new MediaTypeHeaderValue("text/html"));

现在，再次运行 API 链接，这次您将看到 JSON 格式的结果

要更好地理解 JSON，请查看这些 示例。 单击此处继续阅读第二部分。

如果您想开始实现流行的 AngularJS（使用 Asp.Net MVC），请查看本文

查看本文以了解有关 ASP.NET 5 和 C# 6 中的新功能的更多信息

希望您在学习新知识的过程中度过了愉快的时光。如果您有任何建议，请告诉我。随时为本文评分并留下评论以获得更好的澄清。

© . All rights reserved.