学习MVC项目在7天-奖金的第一天

• 下载Day7Bonus.zip

介绍 本文是“7天学习MVC项目”系列的延续。 在前6篇文章中，我们从头创建了一个完整的MVC项目。在第7天，我们已经创建了同一项目的单一页面版本。这一天对读者来说将是一个额外的日子。在这里，我们将了解Web API和angular的重要性，并看到一个关于它们的小演示。 注意:在本系列中，我不会使用Web API和angular创建一个完整的项目。我将为此开始一个新的系列。这里我们将只讨论以下三件事。 什么是Web API，为什么是Web API?什么是Angular?角上演示。用Web api在Angular上的演示从MVC 5开始 我请求你根据自己的兴趣直接跳到相关的部分。 完整的系列 第1天第2天第3天第4天第5天第6天7天奖金第1天奖金第2天 我们很高兴地宣布，这篇文章现在可以从www.amazon.com和www.flipkart.com获得同样的纸质书 什么是Web API，为什么是Web API? Web API是一个Asp。Net技术，用于创建基于HTTP的服务。就像Web Forms和Asp。Web API是asp.net MVC的一种风格。因此它自动获得了Asp的许多功能。类似于asp.net的表单认证、异常处理等。 让我们回答几个关于Web API的问题。如果您对Web API理论不感兴趣，我建议您直接跳到实验室。 Web API是Asp.Net的第三种风格。这是否意味着，使用Web API我们可以创建Web应用程序? 我们非常清楚Asp.Net的目的。它是用来创建web应用程序的。 Web应用程序是可以通过Web访问的应用程序。它从来没有被宣判“Web应用程序必须有UI”。它们可以只是一些通过web公开数据的业务应用程序。 Asp。Net Web表单和Asp。Net MVC是Asp.net的特色，它提供了UI部分。它将用于创建基于Web的UI应用程序。 Web API与Web服务和WCF服务有什么不同? Web服务和WCF服务做同样的事情。它向外部世界公开数据。 那么Web API与它们有什么不同呢? 简单的回答是“Web服务和WCF服务是基于SOAP的服务。”这里HTTP仅仅用作传输协议。Web API是纯粹基于HTTP的服务。这里不涉及任何SOAP”。 让我们来详细了解一下。 为什么WCF和Web服务需要SOAP? 为了理解这一点，让我们讨论一个场景。 我们想把一些数据从技术1发送到技术2，其中技术2是一个WCF/Web服务，通信必须通过互联网/Web进行。 网络意味着HTTP。HTTP将允许我们向特定的URL发出请求，通过该请求，我们还可以传递一些数据。 现在根据我们在第7天讨论的数据传输，Technology1将把它的数据转换成XML字符串(主要是JSON字符串)，然后发送给Technology2。 注意:当。net Web服务或WCF服务是通信点时，数据将始终格式化为XML字符串。 点值得讨论 当开发人员设计一个服务时，他/她实际上在服务内部创建了一个或多个方法。每种方法都有一些特殊的功能。我们称之为web方法。当涉及到通信时，Technology1将从服务实际调用这些方法。在HTTP中，我们没有指定方法名的规定。惟一的选择是，当客户机通过HTTP发送请求时，方法名将以某种方式连接到数据，并作为数据本身发送。 在服务端，服务框架将数据(从客户端接收)拆分为实际数据和方法名。然后，它调用服务中的对应方法，将实际数据作为参数传递。当Technology1将数据发送到服务时，服务如何确保数据是从有效的客户端发送的呢?有可能是不允许访问该服务的人试图发送数据。为了解决这个问题，就像方法名称solution Technology1一样，它将验证凭证连接到数据并将它们作为一个凭证发送。在服务端，服务框架将数据(从客户端接收)拆分为凭证、方法名和实际数据。它在进行web方法调用之前验证凭证并确保该请求是经过身份验证的请求。 服务如何从传入数据中提取不同的部分? 现在，根据我们最后的讨论，当Technology1向service发送数据时，数据实际上包含三样东西——实际数据、验证凭证和方法名。 在服务端，服务框架很难独立地理解每一部分，因为服务是一个通用的东西，它应该为每个人工作。其次，客户端可以发送任何格式的数据。例如，客户端可以发送“data |Credential|MethodName”格式的完整数据，或者发送“Credential| data |MethodName”格式的完整数据。没有固定的格式。 溶液-标准信封 来解决这个问题电子工业提出了一个标准的信封概念，称为SOAP信封。 SOAP只是一种专门的XML，它将以标准格式封装需要发送的所有内容。HTTP将SOAP信封从客户端发送到服务端，反之亦然。 下面是示例SOAP xml，以供参考。 隐藏,复制Code< ?xml version = " 1.0 " ?比; & lt; soap:信封 xmlns: soap = " http://www.w3.org/2001/12/soap-envelope " soap: encodingStyle = " http://www.w3.org/2001/12/soap-encoding "比; & lt; soap:身体xmlns: m = " http://www.example.org/stock "比; & lt; m: MyMethodName> MyData> Json或XML格式:MyData> & lt; / m: MyMethodName祝辞 & lt; / soap: Body> & lt; / soap: Envelope> 注意: 如前所述，当服务是Web服务或WCF时，服务数据将表示为XML字符串。当服务返回某些内容时，将遵循相同的步骤。服务将创建SOAP XML stringand客户机将从中提取响应数据。 SOAP有什么问题? 归根结底，SOAP是XMLat，因此它会导致两个问题。 它增加了数据的总体大小，因此会影响性能。我们在第7天谈到了XML的复杂性。我们已经了解到轻量级框架(如JavaScript、移动框架等)创建和解析XML字符串有多么困难。 解决方案是什么? 解决方案将是纯基于HTTP的服务。不存在任何SOAP信封的服务。HTTP将直接将数据从一个位置传输到另一个位置。这就是REST原则的由来。 REST说以更有效的方式使用web的现有特性并创建服务。它说用它们表示的格式传输数据，而不是把它们放在SOAP信封中。 基于HTTP的服务完全基于REST原则，因此它们也被称为基于REST的服务。 web现有的特性是什么? 在web中，我们有一个URL的概念，它将唯一地标识资源。在web中，不同的动作将通过不同的HTTP动词来识别。示例—HTTP谓词GET表示检索数据，PUT表示更新数据，POST表示创建数据，DELETE表示删除数据。 行业如何实现解决方案? 方法名称的解决方案 现在，对于基于SOAP的服务(Web和WCF服务)，每个服务都由一个URL标识。以同样的方式，REST服务将在URL的帮助下被识别。 不同之处在于对于REST服务，我们定义方法的方式将会不同。 它将被定义为标准方法。标准方法意味着方法名称将被固定。它将获取或发布，或放置或删除。或者它会用任何名称定义方法在这种情况下，每个自定义方法都有一个URL。 在任何一种情况下，都不需要从客户端将方法名作为参数发送。 在选择1的情况下，客户端将通过HTTP请求REST服务。请求的类型将是GET或POST或PUT或DELETE。现在在服务端，服务框架将检查请求的类型，并相应地调用服务中的方法。方法名称问题得到解决。在选择2的情况下，客户端将通过HTTP直接请求重置服务方法。这是可能的，因为每个方法都有一个唯一的URL。 安全解决方案 当我们说到HTTP时，我们有一个HTTP头和HTTP正文的概念，它们都有能力携带一些信息。我们总是可以将凭证作为头的一部分传递，将数据作为体的一部分传递。为了确保在传输过程中没有人能够看到消息头和消息体中的数据，我们可以实现SSL。它明确了一件事，安全不会成为问题。 传递的数据呢? 在这种情况下，数据将通过HTTP以JSON或XML格式直接传递。大部分都是JSON。 WCF REST与Web API有何不同? WCF Rest是微软早期用于创建基于Rest的服务的实现。 WCF从来就不是休息的。它的唯一目的是支持SOA。使用WCF创建REST服务涉及太多步骤，而在未来添加新特性对微软来说将是一个大问题。 非WCF开发人员将不能创建WCF REST服务。 Asp。Net Web api将变得简单得多，甚至一个非WCF开发人员也可以使用它创建基于HTTP的服务。 Web API演示 步骤1 -创建一个Web API项目 步骤1.1打开Visual studio并单击File>>New> Project。选择“Asp。从对话框中，输入一些名称并单击确定。 步骤1.2在下一个对话框中选择Empty option,Web API复选框，然后单击Ok。 现在，在我们继续之前，我想更多地谈谈这个对话框。在我们开始MVC项目的第一天，我故意跳过了这个对话框的讨论。 将来不会有单独的Asp。Net MVC, Web API或Web表单项目。我们有Asp。我们将创建asp.net。网络项目。 在单个Asp中。Net项目的同时有时我们可能会有Web Forms和MVC两种类型的选项。 对话框中有两个部分—模板和引用。 解释1 假设我们一开始选择了空模板。 现在，如果您想要创建一个MVC选项，您必须在项目中添加一对引用。所以手动右键单击项目，选择add reference，选择System.Web。MVC并单击Ok。现在为更多的引用做同样的操作。 而不是简单地在对话框中勾选MVC复选框。 以上两个选项将创建一个空项目，其中包含Asp需要的所有引用。净MVC项目。 如果您认为您的项目还将包含Web表单或Web apisso，那么也只需选中相应的复选框。 解释2 现在您可能想知道对话框中的其他模板是什么? 这很简单。微软相信每个项目都会有一些共同点。像每个项目都将有登录屏幕，主页或布局页，错误页等。微软说，让visual studio在每个项目中自动创建，而不是让开发者手动创建。如果采用Web Forms模板，那么所有这些常见文件都将以Web Forms样式创建。如果采用MVC模板，那么所有这些常见文件都将以MVC风格创建。 步骤2 -创建API 右键单击控制器文件夹并选择Add>> controller。这次选择“Web API 2控制器-空”选项并单击添加。 将控制器的名称设置为EmployeeController并单击Add。 您将注意到，从ApiController继承创建了一个新类。它将是我们的Web API。 步骤3 -创建模型 在模型文件夹中创建一个名为Employee的新类，如下所示。 隐藏,复制Code

namespace WebAPISample.Models
{
    public class Employee
    {
        public string FirstName { get; set; }
        public string LastName { get; set; }
        public int Salary { get; set; }
    }
}

步骤4 -创造行动 Open EmployeeController put using语句如下。 隐藏,复制Code

using WebAPISample.Models;

现在创建GET action，如下所示。 隐藏,复制Code

public Employee GET()
{
    Employee e = new Employee();
    e.FirstName = "Sukesh";
    e.LastName = "Marla";
    e.Salary = 25000;
    return e;
}

步骤5 -执行和测试 按F5并执行应用程序。从浏览器向“/api/雇员”发出请求。 注意:以上输出仅适用于chrome浏览器。我们将在下一节详细讨论。 在Web API实验室讨论 为什么在URL中指定Api关键字? 开放的全球。asax文件。Application_Start的定义如下。 隐藏,复制Code

protected void Application_Start()
{
    GlobalConfiguration.Configure(WebApiConfig.Register);
}

在项目的App_Start文件夹中，你会发现一个名为WebApiConfig.cs的文件。打开它。 它包含以下代码。 隐藏,复制Code

namespace WebAPISample
{
    public static class WebApiConfig
    {
        public static void Register(HttpConfiguration config)
        {
            // Web API configuration and services

            // Web API routes
            config.MapHttpAttributeRoutes();

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

可以看到，其中定义了特定于Web API的路由。 这就是为什么需要“api”关键字的原因。 GET方法是如何被调用的? 在这种情况下，我们的HTTP服务“Employee”被认为是一个资源，它将由一个URL“http://localhost:someport /api/Employee”标识。当HTTP请求发送到这个URL时，Web API引擎检查请求的类型。在我们的例子中，请求类型是“Get”，因此Web API引擎使Get方法被调用。 请求类型是如何变成Get的? 在这个例子中，我们使用浏览器的地址栏来发出请求。由浏览器地址栏发出的请求将始终引导到get请求。 其他的请求呢? 在Web API中，只需创建四个方法，分别名为GET、POST、PUT和DELETE。 每个方法将描述一个请求类型。 现在从测试的角度来看，GET方法可以通过浏览器的地址栏轻松测试，但是POST, PUT, DELETE不能通过浏览器直接请求。我们需要使用一些工具或UI它会通过一些编码来帮我们完成这些。 不久我们就会有一个实践实验室。 如果我们想定义自定义方法呢? 在实时场景中，我们总是希望创建多种Get/post/put/delete函数。示例—GetCustomers, GetCustomerById, GetCustomerByDepartment。 在这种情况下，我们必须定义多个路由，或者必须更改默认路由。 请看下面的示例。 隐藏,复制Code

config.Routes.MapHttpRoute(
                name: "SecondRoute",
                routeTemplate: "api/GetCustomerById/{id} ",
                defaults: new {controller= "Customer", action= "GetCustomerById" }
            );
            config.Routes.MapHttpRoute(
                name: "ThridRoute",
                routeTemplate: "api/{controller}/{action}"
            );//generic route like Asp.Net MVC

它是如何确认其REST服务的? 看看反应。不涉及SOAP标记。我们得到了直接数据。 类似地，在发出请求时，我们没有发送任何SOAP XML。只需使用HTTP发出请求就可以了。 为什么返回XML作为响应? 当我们向服务发出请求时，它以XML的形式返回数据。 在我回答这个问题之前，让我先澄清一件事。是的,数据是XML格式的,但SOAP信封☻ 现在根据XML格式，数据不能在不同的技术之间直接发送。它必须转换为XML或JSON字符串，然后传输。对于Web API，我们返回了纯员工数据，这些数据将被Web API引擎转换为XML字符串并返回。 你认为这是个问题吗?☻实际上是一个功能 Web API有一个非常好的特性，称为内容协商。客户端可以协商输出内容。如果客户端请求XML, Web API将返回XML，如果客户端请求JSON, Web API将返回JSON。 上次考试我用了d chrome浏览器。在Internet explorer中检查相同的示例。您将得到JSON作为响应。 这是否意味着我的web应用程序将有兼容性问题? 不。基本上终端用户永远不会通过浏览器的地址栏直接访问Web api。他们会使用一些UI。UI将在一些编程语言如c#、JavaScript等的帮助下与Web API对话。它意味着访问Web API的后台代码总是相同的。当我们使用c#或JavaScript访问Web API时，默认情况下我们会得到JSON，但我们也可以指定响应内容类型并得到XML。 角是什么? 我们使用JavaScript使静态HTML动态。使用JavaScript，我们可以动态地改变现有HTML的外观、值或结构。 Angular是目前业界对JavaScript框架要求最高的框架之一。所以我相信你至少应该了解它的基本知识。 Angular是谷歌引入的一个JavaScript框架，主要针对单个页面的应用。 注意:在这个系列中，我只是想让你们都熟悉角绳。它不会包含详细的angular主题。 AngularJS是图书馆吗? 不，这是一个框架。 库和框架的区别是什么? 库提供了一组可重用的api，而框架在提供可重用api的同时进行一些特殊的自动化。 的例子, JQuery是一个可重用的库，它提供了一组函数，使dom操作和dom遍历更加容易。 . net是一个框架，它提供了可重用的功能，但它也处理编译，执行，它使垃圾收集运行在后台，并确保未使用的内存得到清除。 框架可以自己做很多事情。 为什么需要angular ? 为了理解这一点，我们必须了解传统JavaScript编程的问题。 (在完成本文中的所有实验之后，请再次阅读以下解释) 我想你看了下面的例子就能很好地回答这个问题了。 隐藏,复制Code

<!DOCTYPEhtml>
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script>
        var SomeValue;
        function SetValue() {
            SomeValue= "Initial Value";
            document.getElementById('MyTextbox').value = SomeValue;
        }
        function UpdateValue() {
            SomeValue = "New Value";
        }
</script>
</head>
<body>
<inputtype="text"id="MyTextbox"value=""disabled/>
<inputtype="button"id="BtnClick"value="Click Me"/>
</body>
</html>

我们试图在上面的演示实现什么? 有一个叫做SomeValue的变量，我们在页面加载时在文本框中加载该变量的值。当单击按钮时，变量的值被更新为某个新值。 现在让我们来理解上面的示例代码或简单的传统JavaScript编程的问题。 让我们在将来的某个时候，我们被要求改变UI外观。假设客户端需要一个标签或span而不是文本框。这看起来是一个非常简单的更改，但是您不认为它也会影响您的JavaScript吗?问题是每次我们改变UI设计JavaScript很有可能受到影响点击按钮会更新变量的值但它会更新文本框中的值吗?不。问题是每次更新JavaScript值时，UI中都需要显式更新。我们写的JavaScript代码非常混乱。您将无法找到不同部分之间的固定分离。对于一个实例，我们的JavaScript将包含这两个， 逻辑部分 与服务器通信以获得新值，在使用它之前，验证输入的FirstName和LastName。 陈述部分 在TxtSalary文本框中显示工资如果工资大于20000，文本框应该是红色的，否则用绿色 解决方案——角 有了Angular，我们可以独立于HTML编写HTML和JavaScript。在运行时，angular会动态地将JavaScript连接到HTML Angular在运行时创建了UI和JavaScript之间的双向绑定。因此，UI值的任何变化都会自动反映JavaScript变量，而任何JavaScript变化都会自动反映在UI中。 绑定是完全运行时的，因此我们可以清楚地区分表示(HTML)和逻辑(JavaScript)。Angular将MVW架构引入了JavaScript编程的世界。 角是如何工作的 对于处理angular，我们需要两样东西:javascriptand HTML 下面是对angular工作原理的一步一步的解释。如果你不能完全理解它，不要担心，完成演示，再读一遍。 在angular中，关键概念是模块。模块的作用类似于应用程序不同部分的容器。模块主要封装以下两件事。 模型——在UI中显示的数据。模型还可以决定UI应该如何显示。控制器——它将模型连接到UI 在angular中有一个概念叫做指令。它们是附加到HTML元素上的特殊属性，它们会改变这些元素的默认行为。HTML -视图将被设计使用HTML。在“table”、“div”等HTML容器元素的帮助下，一个单一的HTML可以被分解成多个独立的部分。 在Angular指令“ng-App”的帮助下，每个部分都将被视为独立的应用程序。“ng-App”属性将被分配给mo在步骤1中创建的dule。 在某些情况下，整个HTML页面被视为一个应用程序。在这种情况下，“ng-App”指令将应用于主体或HTML标签。JavaScript—正如我在step1中所说的，每个模块将创建一个或多个控制器。HTML——每个应用程序可能包含一个或多个子节，在HTML容器元素的帮助下定义，如“table”，“div”等。这些子节将相互依赖。根据逻辑操作，它们将被分割。每个子节将从不同的控制器获得它的数据。哪个部分将从哪个控制器获取数据将取决于特殊指令“ng-controller”HTML的帮助——在每个子部分中，一些HTML将被编写，每个HTML可能以模型的形式从控制器获取数据。执行 当应用被执行时，angular解析器会在HTML中解析所有的应用。为了识别应用程序，它将搜索ng-App指令。一旦找到了可解析元素，angular就会在可解析元素中找到ng-controller指令，并相应地创建controller的对象。将创建新的子范围，并将其作为控制器的构造函数的可注入参数$scope可用。)这一点不用担心。之后，angular会使用controller公开的数据(模型)来解析HTML。 演示在角 简单的Angular演示 步骤1 -下载一个Angular 我们将使用在上一个实验室中创建的相同的Web API项目来演示。 右击项目并选择“管理Nuget包”。在网上搜索angular，安装“AngularJs core”。 步骤2 -创建HTML 在项目中创建一个名为HTML的新文件夹，并创建一个名为simpleangle . HTML的新HTML文件，如下所示。 隐藏,复制Code

<!DOCTYPEhtml>
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>

</body>
</html>

步骤3 -包括Angular 在Simple.html文件中包括Angular.js文件，如下所示 隐藏,复制Code

<scriptsrc="../Scripts/angular.js"></script>

步骤4 -创建Angular模块 隐藏,复制Code

<script>
    var MyModule = angular.module("MyAngularModule", []);
</script>

你可以看到angular。模块函数有两个参数。第一个参数是模块的名称，第二个参数将用于指定其他依赖的模块。 在本系列中，我们将不讨论第二个参数。 注意:“MyAngularModule”是angular模块的名称，而“MyModule”只是一个JavaScript引用对象， 步骤5创建HTML应用程序 将ng-App指令附加到body标签，如下所示。 隐藏,复制Code

</script>
</head>
<bodyng-app="MyAngularModule">

</body>

正如您可以看到的，此时整个主体被视为一个应用程序。 一步6-Create控制器 在模块内部创建一个控制器，如下所示。 隐藏,复制Code

var MyModule = angular.module("MyAngularModule", []);
    MyModule.controller("MyController", function ($scope) {

    });
</script>

现在只需将$scope作为一个变量，它将封装视图所需的所有模型。我们稍后会详细讨论。 第7步-附加控制器到视图 在“Div”标签的帮助下在主体内部定义一个子节，并将控制器附加到它上面。 隐藏,Code<复印件;身体ng-app =“MyAngularModule”比; & lt; div ng-controller =“MyController”比; & lt; / div> & lt; / body> 步骤8 -定义模型数据 在控制器函数中定义模型数据如下。 隐藏,复制Code

<script>
    var MyModule = angular.module("MyAngularModule", []);
    MyModule.controller("MyController", function ($scope) {
        $scope.CustomerName = "Sukesh Marla";
        $scope.Designation = "Corporate Trainer";
    });
</script>

步骤9 -在视图中显示模型数据 在视图中使用以下HTML来显示模型数据 隐藏,Code<复印件;身体ng-app =“MyAngularModule”比; & lt; div ng-controller =“MyController”比; & lt; span> {{CustomerName}} & lt; / span> & lt; span>- & lt; / span> & lt; i>{{名称}}& lt; / i> & lt; / div> & lt; / body> 步骤10 -执行和测试 按F5并执行应用程序。放置html文件的物理URL并检查输出。 有关实验一的讲座 美元是什么范围 这是一个子范围。当angular解析器找到ng-Controller时，它会创建两个东西。 控制器新子范围的新实例 这个新的子范围可以作为controller构造函数的可注入参数$scope使用。 我们将UI(视图)所需的所有内容定义为$scope的成员。 {{}}是什么意思? 在angular中叫做表达式。Angular解析器将从当前子范围中获取指定在{{和}}之间的变量值并显示它。 MVW是什么? 我们将在angular的lab3的最后讨论这个 实验2-改变用户界面设计 在这个实验室我们有一个小的变更要求。我们的要求是“在禁用的文本框中显示CustomerName”。 步骤1 -改变UI设计如下。 隐藏,Code<复印件;身体ng-app =“MyAngularModule”比; & lt; div ng-controller =“MyController”比; <input type="text" value="{{CustomerName}}" disabled /> & lt; span>- & lt; / span> & lt; i>{{名称}}& lt; / i> & lt; / div> & lt; / body> 步骤2 -执行和测试 按F5并执行应用程序。放置html文件的物理URL并检查输出。 如您所见，UI中的更改不再影响JavaScript代码。 实验3 -了解双向绑定 在这个我们将把上面的实验室带入下一层。 要求 指定将不再在UI中显示customername文本框将启用customername也将在span中显示在文本框旁边更新按钮将被添加到UI上更新点击文本框值将被更新为“新的更新值” 步骤1 -更改UI部分 将正文内容更改为以下内容。 隐藏,复制Code< div ng-controller =“MyController”比; <input type="text" ng-model="CustomerName" /> & lt; span> {{CustomerName}} & lt; / span> & lt; br /比; & lt;输入类型=“按钮”价值=“更新” ng-click = " UpdateValue();“/比; & lt; / div> 如您所见，引入了两个新的指令。 ng-model 如前所述，指令将改变HTML UI元素的默认行为。ng-model将改变输入控件的默认行为。通常，当输入控件的值被更新时，它不会做任何事情，但是当ng-bind被附加时，它会在模型和控件之间创建一个两个绑定。因此，一旦模型值发生变化，UI值就会被刷新，每次UI值更新时，模型就会自动更新。ng-click 就像onclick，它会将点击事件处理程序附加到控件但这次事件处理程序将是当前子范围的一部分。因此，在事件处理程序内部，我们可以访问当前的所有子范围元素，包括model。 步骤2 -重新定义控制器 将控制器代码重定义为如下 隐藏,复制Code

<script>
    var MyModule = angular.module("MyAngularModule", []);
    MyModule.controller("MyController", function ($scope) {
        $scope.CustomerName = "Sukesh Marla";
        $scope.Designation = "Corporate Trainer";
        $scope.UpdateValue = function () {
            $scope.CustomerName = "New Updated Value";
        }
    });
</script>

步骤3 -执行和测试 按F5并执行应用程序。放置html文件的物理URL并检查输出。 关于实验三的演讲 MVW是什么? 在angular中，视图意味着用户将与之交互的UI，模型意味着视图需要的数据。 现在我们来谈谈Controller。 控制器将控制视图和数据(模型)之间的通信。因此，我们可以在MVC体系结构中将其称为控制器。控制器不仅将视图所需的所有数据封装在$scope内，而且还封装了视图中的事件。因此，我们可以调用控制器作为视图模型在MVVM体系结构。•它还封装了表示逻辑。例如，我们想要显示一些值，然后根据一些条件格式化。例如，如果工资大于2000就用红色显示，或者用蓝色显示。在Asp。我们在ViewModel的帮助下处理了这种情况，但当我们谈到MVP架构时，它是Presenter的特性。因此我们可以称它为展示者。 这就是为什么我们称它为Model-View-Whatever。任何可以连接视图和模型的东西。 用Web API在Angular上演示 这个实验室将会是之前实验室的升级版，在这个实验室里， 这里将有两个文本框，一个用于CustomerName，一个用于desingation，我们将从Web API获得文本框的初始值按下按钮，当前文本框的值将被传递给Web API。Web API会升级这个值并将新值返回给angular。 步骤1 -创建Web API模型 在模型文件夹中创建一个名为Customer的新类，如下所示。 隐藏,复制Code

namespace WebAPISample.Models
{
    public class Customer
    {
        public string CustomerName { get; set; }
        public string Designation { get; set; }
    }
}

步骤2 -创建Web API控制器 在控制器文件夹中创建一个名为Customer的新Web API。 步骤3 -创造行动 打开CustomerController.cs文件，并像下面这样放置使用语句。 隐藏,复制Code

using WebAPISample.Models;

现在创建一个名为GET inCustomerController的新操作方法。整体图是这样的。 隐藏,复制Code

namespace WebAPISample.Controllers
{
    public class CustomerController : ApiController
    {
        public Customer GET()
        {
            Customer c = new Customer();
            c.CustomerName = "Sukesh Marla";
            c.Designation = "Corporate Trainer";
            return c;
        }
    }
}

步骤4 -在AngularJs侧更改控制器代码 隐藏,复制Code

MyModule.controller("MyController", function ($scope,$http) {
    $http.get("/api/Customer").then
    (
        function (r) {
            $scope.Customer = r.data;
        }
    );
    $scope.UpdateValue = function () {

    }
});

http美元是什么? 为了简化工作，angular提供了一些有用的服务。服务只是一些可重用功能的包装。 示例$http服务将让我们调用服务器api。 什么时候创建$http的实例? 当Angular找到ng-controller指令时，它会创建一个controller的实例和一个新的子范围。尽管服务像$scope一样被注入到控制器中，但是服务在开始时不会被实例化。它将在第一次被使用时被实例化。 注意:服务的实例将只创建一次。之后，相同的对象将在所有引用中被重用。它严格遵循单例模式。 http.get美元是什么? 美元http。get将向服务器api发出get请求。它将是一个异步调用。在$http之后的下一行简单的词。get甚至会在服务器执行完成之前执行。 $http.get使用“then”函数的目的是什么? 正如我之前所说的$http。get异步地进行服务调用。它不会返回实际的值，而是返回一个特殊的对象Promise对象。 Promise对象公开一个名为“then”的函数，该函数需要一个函数类型的参数。 传递给“then”函数的函数将在Web API执行完成时自动执行。 步骤5 -改变UI 将正文部分中的内容更改为以下标记。 隐藏,Code<复印件;div ng-controll呃=“MyController”比; & lt;输入类型=“文本”ng-model = "客户。CustomerName”/比; & lt;输入类型=“文本”ng-model = "客户。指定“/比; & lt;输入类型=“按钮”价值=“更新” ng-click = " UpdateValue();“/比; & lt; / div> 步骤6 -执行和测试 按F5并执行应用程序。放置html文件的物理URL并检查输出。 注意:你可能会得到一个小的延迟到文本框得到填充值 步骤7 -创建后行动 在CustomerController中创建一个名为POST的新操作方法，如下所示。 隐藏,复制Code

public Customer POST(Customer c)
{
    c.CustomerName += " New";
    c.Designation += " New";
    return c;
}

步骤8 -更改UpdateValue函数 更改angular端的UpdateValue函数，如下所示。 隐藏,复制Code

<script>
    var MyModule = angular.module("MyAngularModule", []);
    MyModule.controller("MyController", function ($scope,$http) {
        $http.get("/api/Customer").then
        (
            function (r) {
                $scope.Customer = r.data;
            }
        );
        $scope.UpdateValue = function () {
            $http.post("/api/Customer", $scope.Customer).then
                (
                    function (r) {
                        $scope.Customer = r.data;
                    }
                );
        }
    });
</script>

就像GET一样，POST会返回promise对象，其他都一样 美元http。post将向Web API发送post请求，服务器端Web API引擎将执行post操作。 步骤8 -执行和测试 按F5并执行应用程序。放置html文件的物理URL并检查输出。 完全魔术的两种方式绑定。 从MVC 5开始 如果你想开始与MVC 5开始与下面的视频学习MVC 5在2天。 结论 这里将完成我们的奖励日文章——Web API和angular介绍。 你的评论、邮件总是激励我们做更多的事情。把你的想法和评论写在下面，或者发送邮件到SukeshMarla@Gmail.com 在Facebook, LinkedIn或twitter上联系我们，以保持最新的版本。 如需在孟买进行线下技术培训，请访问StepByStepSchools.Net 在线培训请访问JustCompile.com或www.Sukesh-Marla.com 本文转载于：http://www.diyabc.com/frontweb/news1773.html