ASPDotNet 五、使用 JavaScript 与 Web API 交互

五、使用 JavaScript 与 Web API 交互

一个基于浏览器的 web 应用如果没有客户端代码来补充服务器端代码就不完整。不管在 web 服务器上使用的技术和语言是什么，所有的 web 应用开发人员都应该学习如何在客户端使用 HTML 使用 JavaScript。

在本章中，我们将从构建一个充满 JavaScript 代码的 HTML 页面开始，以开发一个交互式用户界面。我们将涵盖以下议题:

使用 ASP.NET Web API 使用 JavaScript
JavaScript 框架
客户端工具如Bower、Grunt、Gulp

使用 JavaScript 与 Web API 交互

有很多 JavaScript 框架正在争夺世界范围内的 web 开发人员的喜爱，其中一些已经流行起来。在接下来的几节中，我们将学习AngularJS和KnockoutJS。但是首先，让我们关注使用一些基本的 JavaScript 来从 Web API 中读写数据。

本节的示例将使用以下文件:

HTML 文件与客户端 JavaScript 使用 Web API
服务器端控制器类
服务器端模型类

下面的截图显示了前面三个我们需要的文件:

Using JavaScript to interact with Web API

我们将在本章的例子中处理这些文件:

静态 HTML 文件位于 web 应用的wwwroot位置
控制器位于Controllers文件夹中(按惯例)
患者模型在Models文件夹中(按惯例)

为了直观地看到该应用的外观，请看下面的患者记录应用的截图:

Using JavaScript to interact with Web API

准备服务器端代码

在Models文件夹中创建一个新的类文件，并使用以下代码将其命名为Patient.cs:

public class Patient 
{ 
    public int Id { get; set; } 
    public string LastName { get; set; } 
    public string FirstName { get; set; } 
    public string SocialSecurityNumber { get; set; } 
}

前面的代码为我们提供了适当数量的控制器和模型代码，以便开始使用客户端 JavaScript。

下面的 API 控制器至少有两个控制器方法来返回患者列表，或者在给定患者 ID 时只返回一个患者。这个控制器应该有一个 using 语句来引用模型名称空间。

它以类级别的[Route]属性开始，表示如何从 web 浏览器的 GET 请求或通过浏览器中的 JavaScript 代码访问 API 控制器，如下所示:

[Route("api/[controller]")] 
public class PatientController : Controller

在类本身内部，有一个类级实例变量，它包含一个数据结构，用于定义带有几个示例值的患者数组，如下面的代码所示。在现实世界的应用中，这些数据通常来自一个数据库:

    Patient[] patients = new Patient[] 
    { 
        new Patient 
        { 
            Id = 1, 
            FirstName = "John", 
            LastName = "Smith", 
            SocialSecurityNumber = "123550001" 
        }, 
        new Patient 
        { 
            Id = 2, 
            FirstName = "Jane", 
            LastName = "Doe", 
            SocialSecurityNumber = "123550002" 
        }, 
        new Patient 
        { 
            Id = 3, 
            FirstName = "Lisa", 
            LastName = "Smith", 
            SocialSecurityNumber = "123550003" 
        } 
    };

接下来，我们有一个简单的Get()方法来返回一个可枚举的患者对象列表:

    // GET: api/patient 
    [HttpGet] 
    public IEnumerable<Patient> Get() 
    { 
        return patients; 
    }

最后，我们有一个简单的Get(id)方法，当提供一个数字 ID 值来执行查找时，返回一个特定的患者:

    // GET api/patient/5 
    [HttpGet("{id}")] 
    public Patient Get(int id) 
    { 
        var patient = patients.FirstOrDefault((p) => p.Id == id); 
        if (patient == null) 
        { 
            return null; 
        } 
        return patient; 
    } 
}

客户端 JavaScript

以下 HTML/JavaScript 代码可以包含在示例 HTML 文件中，以获取和显示患者记录。它以一个典型的 HTML 开头:

<!DOCTYPE html> 
<html> 
<head> 
    <title>Patient Records App</title> 
</head>

正文包含一个头部和一个<div>来显示数据:

<body> 

<div> 
    <h2>Patient Records</h2> 
    <ul id="patients"></ul> 
</div> 
<div> 
    <h2>Find Patient By ID</h2> 
    <input type="text" id="patientId" size="5" /> 
    <input type="button" value="Search" onclick="find();" /> 
    <p id="patient" /> 
</div>

请注意以下几点:

定义了一个 ID 为patients的空列表，用于在页面首次加载时显示患者记录列表
搜索文本框的 ID 定义为patientId，允许用户通过 ID 进行搜索
Search按钮有一个onclick事件，该事件调用find()方法
使用 IDpatient定义一个空段落，以显示调用find()方法的结果

接下来是对 jQuery 的引用，它可以是一个特定的(或最新的)版本，根据需要:

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.0.3.min.js"></script>

然后，我们开始主要的<script>来定义函数来处理 API 调用:

<script>

在脚本的开始，让我们定义一个变量来保存 API 调用的 URI 路径:

var uri = 'api/Patient';

接下来，让我们确保在页面加载后立即填充患者列表:

$(document).ready(function () { 
    $.getJSON(uri) 
        .done(function (data) { 
            $.each(data, function (key, patient) { 
                $('<li>', { 
                    text: formatPatientInfo(patient) 
                }).appendTo($('#patients')); 
            }); 
        }); 
});

前面的代码引用了一个名为formatPatientInfo()的函数，用于格式化 API 调用返回的患者信息。该方法定义如下:

function formatPatientInfo(patient) { 
    if (patient && patient.lastName) 
        return patient.lastName + 
            ', ' + patient.firstName + 
            ': ' + patient.socialSecurityNumber; 
    else 
        return 'No patient information found.'; 
}

为了启用搜索功能，定义一个find()方法如下:

function find() { 
    var id = $('#patientId').val(); 
    $.getJSON(uri + '/' + id) 
        .done(function (data) { 
            $('#patient').text(formatPatientInfo(data)); 
        }) 
        .fail(function (jqXHR, textStatus, err) { 
            $('#patient').text('Error: ' + err); 
        }); 
}

这里定义了一个id变量，以从提供给最终用户的搜索框中获取数字 ID 值。然后，这个 ID 被附加到前面定义的 URI 的末尾，形成一个用于调用getJSON()的 URL。

一旦 API 调用被触发，JavaScript 分别用.done和.fail块处理成功和失败的调用。 .done块更新。

此时，我们可以关闭<script>、<body>和<html>标签:

</script> 
</body> 
</html>

要验证您可以在您的 web 应用中显示静态文件，执行以下步骤:

验证Main()包含。 Program.cs中的UseContentRoot(Directory.GetCurrentDirectory())。
添加对Microsoft.AspNetCore.StaticFiles(1.0.0)的引用。
将app.UseStaticFiles()加到Startup.cs中。

以下截图显示了用户搜索 ID 为1的患者时显示的结果:

Client-side JavaScript

JavaScript 框架

当您开始向代码中添加越来越多的 JavaScript 时，您的 web 应用将变得笨拙且难以维护。要利用提供的 JavaScript 框架，您可以从许多 JavaScript 框架中进行选择。

以下是四种流行的框架:

AngularJS:https://angularjs.org
KnockoutJS:http://knockoutjs.com
骨干 ejs:http://backbonejs.org
EmberJS:http://emberjs.com

在本章中，我们将专注于 AngularJS 和 KnockoutJS。

使用 AngularJS 的单页应用

官方的 ASP.NET 文档中提到，AngularJS 是构建 spa 风格的 ASP 的一个选项。网络应用。本章中的例子来自微软的文档:http://docs.asp.net/en/latest/client-side/angular.html。

开始学习 AngularJS

AngularJS 是一个开源的 JavaScript 框架，由谷歌官方维护。在撰写本文时，最新的稳定版本是 1.5 版。到 2016 年 7 月为止，2.0 版本正在经历几个发布候选(RC)阶段。

AngularJS 使用了 jQuery 的一个子集jqLite，它允许它在多个浏览器上操作 HTML 页面的 DOM。如果你想在 AngularJS 应用中使用 jQuery，你必须确保 jQuery 是在angular.js文件之前加载的。

在 Visual Studio 2015 中将 AngularJS 设置到你的 web 应用中最简单的方法是在一个新的 web 应用中更新你的bower.json文件。启动 Visual Studio 2015，点击File|New|Project，然后使用新的ASP 创建一个新的Web 应用.NET 模板(不是空的)。

这将自动为您创建一个bower.json配置文件。您可能必须单击解决方案资源管理器中的Show All Files图标才能查看bower.json文件。只需编辑此 JSON 文件，在"dependencies"下添加"angular"和"angular-route"两个条目。使用智能感知来帮助你决定使用哪个版本号，如下截图所示:

Getting started with AngularJS

鲍尔。 json 文件

angular-route模块允许您的 web 应用使用路由和深度链接服务，以及指令。这些术语(以及更多)将在下一节中解释。

几乎在添加这两个条目之后，必需的 JavaScript 文件将被添加到/Dependencies/Bower/下的Bower文件夹中，如下截图所示。您可以配置 Grunt 或 Gulp 始终将必要的文件复制到wwwrootweb 根目录中的lib子文件夹中。

Getting started with AngularJS

Angular(1.5.8)和 Angular 路由(1.5.8)

下面的截图显示了你的lib文件夹在放入必要的模块后应该是什么样子:

Getting started with AngularJS

在本章的最后一节中，我们将学习更多关于使用 Bower 管理客户端代码的包的知识。

AngularJS 的语法和特性

AngularJS 可以通过几个例子来解释它的语法和特性。 HTML 文件中的 AngularJS 语法可以通过以下方法轻松识别:

出现在 HTML 标记中的指令，例如ng-app和ng-init
双花括号中的表达式，例如{{1+2}}
数据绑定ng-bind，如<span ng-bind="ssn"></span>
枚举数据的重复器，例如<li ng-repeat="patient in patients">
用于处理用户输入的事件处理程序，例如<button ng-click="handleClick()">
上述所有内容都可以包含在被称为模板的 HTML 文件中。

在 JavaScript 代码文件中，你可能会认识到以下一些语法:

用angular.module()定义的 App 模块
用.factory()定义的模型工厂
用.service()定义的服务
用.controller()定义的控制器

这并不是一个详尽的列表，本章也不打算取代 AngularJS 文档或教程。要了解更多关于 AngularJS 的信息，请阅读官方文档https://docs.angularjs.org。

用 AngularJS 构建一个 web 应用

一旦你在你的项目中建立了依赖关系，在你的 HTML 代码中添加一个指向 AngularJS 的脚本引用。可以通过以下方式添加:

在您的_Layout.cshtml文件中/Views/Shared
在静态 HTML 页面中，刚好在关闭</body>标记之前

布局文件对于Development和Staging/Production有不同的部分。虽然您可以使用本地参考进行开发，但您应该使用来自内容交付网络(CDN)的共享 URL 进行登台和生产，如下所示:

<environment names="Development"> 
    <script src="~/lib/jquery/dist/jquery.js"></script> 
    <script src="~/lib/bootstrap/dist/js/bootstrap.js"></script> 
</environment>

对于登台和生产，AngularJS 常用的 CDN 服务器包括谷歌的 CDN 在 ajax.googleapis.com 或微软的 AJAX CDN 在 ajax.aspnetcdn.com。

静态 HTML 文件要简单得多，因为它只引用本地文件。您还可以使用智能感知来键入angular.js文件的路径，因为当您键入时，Visual Studio 将在您的系统上定位该文件。下面的代码做到了这一点:

    <script src="../lib/angular/angular.js"></script> 
</body> 
</html>

以下静态 HTML 文件可以保存到项目的wwwrootweb 文件夹中，而其他 JavaScript 文件也可以保存在此:

Building a web application with AngularJS

下面的代码显示了一个名为ng-hello.html的简单 HTML 文件的内容:

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8" /> 
    <title>Hello, Angular!</title> 
</head> 
<body ng-app> 
    <h1>Hello, Angular!</h1> 

    Calculate (2016 - 1990) = {{2016-1990}} 
    <script src="../lib/angular/angular.js"></script> 
</body> 
</html>

以下截图是ng-hello.html的输出:

Building a web application with AngularJS

注意，表达式{{2016-1990}}实际上是作为算术操作计算的，结果(26)显示在浏览器中。

下面的代码显示了在示例文件ng-binding.html中运行的数据绑定:

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8" /> 
    <title>Data Binding in Angular</title> 
</head> 
<body ng-app> 
    <h1>Data Binding in Angular</h1> 
    <h2>Patient Details</h2> 

    <ul ng-init="lastName='Smith'; firstName='John';socialSecurityNumber='123550001'"> 
        <li>Name: {{lastName}}, {{firstName}}</li> 
        <li>SSN: <span ng-bind="socialSecurityNumber"></span></li> 
    </ul> 

    <script src="../lib/angular/angular.js"></script> 
</body> 
</html>

以下截图是ng-binding.html的输出:

Building a web application with AngularJS

请注意以下几点:

<body>标签中的ng-app指令指明了 Angular 应用的根元素
<ul>标记中的ng-init指令以<ul>块的范围初始化表达式
第一个<li>元素中的双花括号计算在<ul>中初始化的变量。
第二个<li>元素中的ng-bind指令是另一种绑定变量的方式
两种数据绑定方式都是有效的

下面的代码显示了示例文件ng-repeater.html中的中继器:

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8" /> 
    <title>Angular Repeaters</title> 
</head> 
<body ng-app> 
    <h1>Angular Repeaters</h1> 

    <h2>Patient Records</h2> 
    <div ng-init="patients=['Smith, John','Doe, Jane', 'Smith, Lisa']"> 
        <ul> 
            <li ng-repeat="patient in patients"> 
                {{patient}} 
            </li> 
        </ul> 
    </div> 

    <script src="../lib/angular/angular.js"></script> 
</body> 
</html>

以下截图是ng-repeater.html的输出:

Building a web application with AngularJS

在此，请注意以下几点:

ng-init指令初始化一个简单的患者名称数组，每个名称存储在一个字符串中
ng-repeat指令枚举数组中的每个患者
双花括号出现在<li>元素中，并在 DOM 中生成的最终 HTML 中重复

下面的代码展示了一个使用我们在前一章中创建的 Web API 控制器的基本示例，在示例文件ng-rest.html中:

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8" /> 
    <title>RESTful Endpoints from Angular</title> 
</head> 
<body ng-app="patientRecordsApp"> 
    <h1>RESTful Endpoints from Angular</h1> 

    <div ng-controller="patientController"> 
        <ul> 
            <li ng-repeat="patient in patients"> 
                {{patient.lastName}}, {{patient.firstName}} 
            </li> 
        </ul> 
    </div> 

    <script src="../lib/angular/angular.js"></script> 
    <script src="../js/ng-rest.js"></script> 
</body> 
</html>

它在客户端使用模型视图控制器模式，让控制器更新模型数据，然后在 HTML 中显示这些数据。在下面的代码中，你会注意到一个名为ng-rest.js的 JavaScript 文件的引用:

(function () { 
    'use strict'; 
    var prApp = angular.module('patientRecordsApp', []); 
})(); 

(function () { 
    'use strict'; 

    var pService = 'patientFactory'; 

    angular.module('patientRecordsApp').factory(pService, 
        ['$http', patientFactory]); 

    function patientFactory($http) { 

        function getPatientsFromApi() 
        { 
            // NOTE: the port number should be changed as necessary  
            return $http.get('http://localhost:50915/api/Patient'); 
        } 

        var patientService = { 
            getPatientsFromApi: getPatientsFromApi 
        }; 
        return patientService; 
    } 
})(); 

(function () { 
    'use strict'; 

    var pController = 'patientController'; 

    angular.module('patientRecordsApp').controller(pController, 
        ['$scope', 'patientFactory', patientController]); 

    function patientController($scope, patientFactory) { 
        $scope.patients = []; 

        patientFactory.getPatientsFromApi().success(function (patientData) { 
            $scope.patients = patientData; 
            console.log("Data obtained successfully."); 
        }).error(function (error) { 
            console.log("An error has occured."); 
        }); 
    } 
})();

在前面的代码中，getPatientsFromApi()方法负责调用服务器端代码中的 API 方法，在 web 浏览器中显示如下结果:

Building a web application with AngularJS

要让之前的 Angular 样例正常工作，首先运行之前的 Web API 项目，并在执行 API 调用之前引用 API URL 的特定端口号。如果你愿意，你也可以在你的 Angular 项目中添加一个新的服务器端 API 控制器。

模型-视图- viewmodel (MVVM)与 KnockoutJS

官方的 ASP.NET 文档提到 KnockoutJS 是构建模型-视图- viewmodel(MVVM)web 应用的一个选项; 见http://docs.asp.net/en/latest/client-side/knockout.html。

了解 KnockoutJS

KnockoutJS 是一个流行的 JavaScript 框架，您可以单独使用它，也可以与 jQuery 和其他 JavaScript 库一起使用。它在客户端使用 MVVM 模式，促进 HTML 元素和 JavaScript 变量之间的数据绑定。

与 AngularJS 类似，在 Visual Studio 2015 中将 KnockoutJS 设置到你的 web 应用中最简单的方法就是在一个新的 web 应用中更新你的bower.json文件。再次启动 Visual Studio 2015 中,点击文件|新|项目,,然后创建一个新的 Web 应用使用新的【显示】ASP.NET 模板(不是空的)。

与前面一样，这将自动创建一个可以编辑的bower.json配置文件。在"dependencies"下面为knockout"添加一个条目。你可以使用智能感知来帮助你决定使用哪个版本号。再次，您可能必须单击解决方案资源管理器中的显示所有文件以查看bower文件。 bower文件如下截图所示:

Getting started with KnockoutJS

鲍尔。 json 文件"Knockout": "3.4.0"

几乎在你添加条目之后，必要的 JavaScript 依赖会被添加到你的Bower文件夹下的/Dependencies/Bower/，如下截图所示:

Getting started with KnockoutJS

击倒(3.4.0)

下面的截图显示了 Knockout 模块放入你的lib文件夹后的样子:

Getting started with KnockoutJS

KnockoutJS 语法和特性

KnockoutJS 语法可以通过以下方式理解:

在 HTML 标记中使用data-bind属性设置数据绑定
使用.applyBindings()将绑定与数据模型关联起来
对对象使用observable()自动更新
对集合使用observableArray()自动更新
为一个或多个可观察对象使用computed()的自定义绑定

要了解 KnockoutJS 的更多信息，请阅读官方文档http://knockoutjs.com/documentation/introduction.html。

用 KnockoutJS 构建一个 web 应用

一旦在项目中设置了依赖项，就可以在 HTML 代码中添加对 KnockoutJS 的脚本引用。

下面的代码展示了将<span>元素绑定到示例文件ko-hello.html中的简单数据值的基本示例:

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8" /> 
    <title>Hello, Knockout!</title> 
    <script type="text/javascript" src="../lib/knockout/dist/knockout.js"></script> 
</head> 
<body> 
    <h1>Hello, Knockout!</h1> 

    <h2>Patient Details</h2> 

    Name: <span data-bind="text: patientName"></span> 

    <script type="text/javascript"> 
        var patientViewModel = { 
            patientName: 'John Smith' 
        }; 
        ko.applyBindings(patientViewModel); 
    </script> 

</body> 
</html>

以下截图显示了ko-hello.html的输出:

Building a web application with KnockoutJS

你会注意到以下几点:

一个<script>标签标识了 KnockoutJS 的位置
<span>标记使用data-bind属性作为文本值来显示patientName
视图模型定义为一个属性patientName
通过传递数据模型来调用ko.applyBindings()来建立连接

为了直接进入一个 Web API 示例，下面的代码调用一个 Web API 方法来获取示例文件ko-rest.html中的患者记录列表:

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8" /> 
    <title>Web API from KnockoutJS</title> 
    <script type="text/javascript" src="../lib/jquery/dist/jquery.js"></script> 
    <script type="text/javascript" src="../lib/knockout/dist/knockout.js"></script> 
</head> 
<body> 
    <h1>Web API from KnockoutJS</h1> 

    <h2>Patient Details</h2> 

    <ul data-bind="foreach: Patients"> 
        <li> 
            <span data-bind="text: lastName"></span>,  
            <span data-bind="text: firstName"></span> 
        </li> 
    </ul> 

    <script type="text/javascript"> 
    var patientViewModel = function () { 
        var self = this; 
        self.Patients = ko.observableArray(); 
        LoadPatientData(); 

        // NOTE: the port number below should be changed as necessary  
        function LoadPatientData() { 
            $.ajax({ 
                type: "GET", 
                url: "http://localhost:50915/api/Patient", 
                contentType: "application/json; charset=utf-8", 
                dataType: "json", 
                success: function (data) { 
                    self.Patients(data);  
                }, 
                error: function (error) { 
                    console.log("An error has occurred."); 
                } 
            }); 
        } 
    }; 
    ko.applyBindings(new patientViewModel()); 
    </script> 

</body> 
</html>

以下截图显示了ko-rest.html的输出:

Building a web application with KnockoutJS

在前面的例子中，你会注意到以下几点:

一个<script>标记标识 jQuery 的位置
第二个<script>标签标识了 KnockoutJS 的位置
<ul>标签使用data-bind属性来枚举患者列表
每个<li>包含<span>标签与lastName和firstName绑定
一个基本的ViewModel被定义为容纳一个observableArray()患者
一个名为LoadPatientData的函数调用 Web API
最后，使用ViewModel调用ko.ApplyBindings()进行绑定

同样，如果是在不同的项目中，您必须确保 Web API 已经启动并运行。

使用 Bower、Grunt 和 Gulp 的任务运行器、捆绑和缩小

通过 Visual Studio 2015，微软引入了与客户端包管理器和任务运行器更紧密的集成。为了充分利用这些工具，最好了解它们做什么以及何时使用它们。

为什么我们需要任务自动化?

你可以在没有智能感知的基本文本编辑器中逐行编写代码，但你很快就会渴望 Visual Studio 或富 IDE 来完成更多的工作。这类似于手动执行某些任务，当您可以使用自动化工具使您的生活更轻松时。

使用 Bower 作为包管理器

要处理客户端依赖关系，您需要使用与开发环境配合良好的包管理器。 Bower 就是这样一个工具。

您将不再使用NuGet来安装诸如 jQuery 这样的客户端包，而是使用 Bower 来获取 JavaScript 库和 CSS 框架。不必等待 NuGet 上出现最新版本的软件包，您可以使用 Bower 获得这些软件包，世界各地的开发人员已经在使用它。

如果您使用 starter 模板创建一个新的 web 项目，那么您将已经设置了一个 Bower 配置文件。要从头开始设置它，创建一个新的空 web 项目，并为其创建一个新的配置文件，并遵循以下步骤:

在 Visual Studio 2015 中，点击File|New|Project。
选择ASP.NET Core Web Application，并输入项目名称和位置。
为 ASP 选择空模板。净的核心。
右键单击 web 项目，然后点击添加|新项目。
在客户端类别下，添加新的 Bower 配置文件，通常命名为bower.json。

**在bower.json中，添加一个新的 bootstrap 依赖，如下所示:

{ 
  "name": "asp.net", 
  "private": true, 
  "dependencies": { 
    "bootstrap": "3.3.7" 
  } 
}

使用智能感知来决定你想使用哪个版本的引导。几乎立刻，wwwroot内的lib子文件夹就会被填充上引导(你添加的依赖项)和jquery(bootstrap 所依赖的)所需的文件，如下截图所示:

Using Bower as your package manager

该位置是基于.bowerrc文件中的条目配置的，该文件位于bower.json旁边，但通常隐藏在解决方案资源管理器中。以下代码来自.bowerrc:

{ 
    "directory": "wwwroot/lib" 
}

有关使用 Bower 作为 ASP 的客户端包管理器的更多信息.NET Core 项目，查看官方文档http://docs.asp.net/en/latest/client-side/bower.html。

使用 Gulp 和 Grunt 作为任务运行器

要在你的项目中设置 Gulp 和 Grunt，在项目级别添加一个新项目，类型为NPM 配置文件，名称为package.json。然后，更新devDependencies部分，包括以下对 Gulp 和 Grunt 的引用:

{ 
  "version": "1.0.0", 
  "name": "asp.net", 
  "private": true, 
  "devDependencies": { 
    "gulp": "3.9.1", 
    "gulp-less": "3.1.0", 
    "grunt": "1.0.1", 
    "grunt-contrib-clean": "1.0.0" 
  } 
}

在解决方案资源管理器中，验证这些依赖项现在在依赖项内的NPM文件夹中可见。然后，添加一个名为styles.less的LESS文件到项目根目录的less子文件夹中，使用下面的 LESS 代码:

@light-gray: #C0C0C0; 
@darker-gray: @light-gray - #222; 

#banner { 
  color: @darker-gray; 
}

这段 LESS 代码将自动为 ID 值为banner的 HTML 元素生成较深的灰色阴影，例如<div id="banner">。

向项目中添加两个新项目，类型为Gulp 配置文件和Grunt 配置文件，通常分别命名为gulpfile.js和gruntfile.js。

将以下代码添加到gulpfile.js中，以监视 LESS 文件并在发生更改时编译 CSS 输出。第一行中的指令还指示 Visual Studio 基于特定条件运行每个任务，比如在构建之后或在项目打开时:

/// <binding AfterBuild='stylemaker' ProjectOpened='lesswatcher' /> 
var gulp = require('gulp'); 
var gulpless = require('gulp-less') 

gulp.task('stylemaker', function () { 
    gulp.src("./less/styles.less") 
        .pipe(gulpless({ compress: true })) 
        .pipe(gulp.dest("./wwwroot/css")); 
}); 

gulp.task('lesswatcher', function () { 
    gulp.watch("./less/*.less", ["stylemaker"]); 
});

接下来，将以下代码添加到gruntfile.js中，以确保 CSS 输出文件夹被清理:

module.exports = function (grunt) { 
    grunt.initConfig({ 
        clean: ["wwwroot/css/*"], 
    }); 
    grunt.loadNpmTasks("grunt-contrib-clean"); 
};

可以通过任务运行器窗口运行上述任务，也可以通过配置绑定使任务根据特定条件运行。如果任务运行程序管理器窗口不可见，在 Visual Studio 顶部菜单中单击View|Other Windows|任务运行程序管理器。 任务运行器管理器窗口如下截图:

Using Gulp and Grunt as task runners

有关使用 Grunt 和 Gulp 作为 ASP 的任务运行器的更多信息.NET Core 项目，查看以下网址的官方文档:

总结

在本章中，你学习了如何在 JavaScript 中使用 Web API，之后你学习了 AngularJS 和 KnockoutJS 的基础知识。您还学习了客户端工具，这些工具在构建 ASP 时帮助自动化一些常见任务.NET web 应用在 Visual Studio 2015。

在下一章中，您将学习如何构建数据库驱动的 web 应用，而不需要编写 SQL 代码。相反，您将使用Entity Framework，这是一个对象-关系映射器，允许您编写代码来表示数据库实体。**

版权属于：月萌API www.moonapi.com，转载请注明出处

本文链接：https://moonapi.com/news/30289.html

ASPDotNet 查看更多书籍

《ASP.NET Core 基础知识》

分类

最近更新

ASPDotNet 五、使用 JavaScript 与 Web API 交互

五、使用 JavaScript 与 Web API 交互

使用 JavaScript 与 Web API 交互

准备服务器端代码

客户端 JavaScript

JavaScript 框架

使用 AngularJS 的单页应用

开始学习 AngularJS

AngularJS 的语法和特性

用 AngularJS 构建一个 web 应用

模型-视图- viewmodel (MVVM)与 KnockoutJS

了解 KnockoutJS

KnockoutJS 语法和特性

用 KnockoutJS 构建一个 web 应用

使用 Bower、Grunt 和 Gulp 的任务运行器、捆绑和缩小

为什么我们需要任务自动化?

使用 Bower 作为包管理器

使用 Gulp 和 Grunt 作为任务运行器

总结

留言

联系客服

数据知识

系统公告

开发文档

ASPDotNet查看更多书籍

《ASP.NET Core 基础知识》

ASPDotNet 五、使用 JavaScript 与 Web API 交互

五、使用 JavaScript 与 Web API 交互

使用 JavaScript 与 Web API 交互

准备服务器端代码

客户端 JavaScript

JavaScript 框架

使用 AngularJS 的单页应用

开始学习 AngularJS

AngularJS 的语法和特性

用 AngularJS 构建一个 web 应用

模型-视图- viewmodel (MVVM)与 KnockoutJS

了解 KnockoutJS

KnockoutJS 语法和特性

用 KnockoutJS 构建一个 web 应用

使用 Bower、Grunt 和 Gulp 的任务运行器、捆绑和缩小

为什么我们需要任务自动化?

使用 Bower 作为包管理器

使用 Gulp 和 Grunt 作为任务运行器

总结

留言

联系客服

ASPDotNet 查看更多书籍