【翻译】使用Knockout, Web API 和 ASP.Net Web Forms 进行简单数据绑定

原文地址：http://www.dotnetjalps.com/2013/05/Simple-data-binding-with-Knockout-Web-API-and-ASP-Net-Web-Forms.html

In this post We are going to see How Knockout, ASP.Net Web API and ASP.Net works together smoothly. There are lots many examples of ASP.Net MVC,Web API and Knockout.js available on web working together  nicely. So I thought it will be a good idea to write a blog post about how ASP.Net Web API, ASP.Net Web Forms,Knockout.js works together and how we can create simple data binding with Knockout.js.

这篇文章咱们将见到如何使用 Knockout, ASP.Net Web API and ASP.Net 一块儿顺利工做。不少例子都是用 ASP.Net MVC, Web API 和 Knockout.js 一块儿很好地工做。因此我认为这是写关于 ASP.Net Web API, ASP.NET Web Forms, Knockout.js 一块儿工做而且咱们可使用Knockout.js建立简单数据绑定的博客的好主题

ASP.Net Web Forms:

ASP.Net Web 表单:

As we all know ASP.Net Web Forms is one of premier development technology widely use in creating web sites and web applications. ASP.Net Web Forms allow to create dynamic websites using event driven model. It is one of the easiest way to create web applications and web sites.

咱们都知道家ASP.Net Web Forms 是一个创建网站及应用程序的重要开发技术。ASP.Net 容许使用事件驱动模型建立动态网站。它是一个用最简单的方法来建立应用程序和网站。

ASP.Net Web API:

ASP.Net Web API:

ASP.Net Web API is a framework that allows to build HTTP Service that reach a broad range of clients including browsers and mobile devices.It provides very easy way to write restful http services. Its can be access by any type of client over HTTP protocol. Client can make a GET, PUT,POST and DELETE request based on its requirement and get the response appropriately.

ASP.Net Web API 是一个容许创建HTTP服务普遍用于包括浏览器和移动设备的客户端的框架。它提供简单的方法编写RESTful HTTP服务。它能够被全部类型的HTTP 协议的客户端访问。客户端能够跟据需求制定一个GET,PUT,POST 和DELETE 请求而且获得适当的响应。

Knockout JS:

Knockout JS:

As per knockoutjs.com, Knockout is a JavaScript library that helps you to create rich, responsive display and editor user interfaces with a clean underlying data model. It provides a way to declarative bindings using an ‘Observable’ view model on browser. It supports two way bindings.
按照 knockoutjs.com说明，Knockout 是一个JavaScript类库，帮助你使用清晰的数据模型建立一个丰富的响应式显示和编辑用户界面。他提供一种声明’Observable’方法把视图模型绑定在浏览器上。

Getting Started with ASP.Net Web Forms and ASP.Net Web API:

开始使用ASP.Net Web Forms and ASP.Net API:

So let’s get started  first we have to create an empty web forms application in Visual Studio 2012 via File->New Project Menu.

咱们开始吧 首先咱们在Visual Studio2012建立一个空的Web应用程序。步骤为文件->新建项目。



Now once application created we need to add reference to System.Web.Routing as we need to required routing for the ASP.Net Web API.

如今一旦建立应用程序，Web API路由功能要求咱们须要添加 System.Web.Routing 引用。



Now It’s time to create a model class that we are going to use for Web API. Following a code for that class. It’s very basic as we are just creating sample demo. So I have created class with 3 properties.

如今是时候建立一个模型类型用于WebAPI.如下是这个类的代码。做为刚刚建立的示例这是很基本的。因此为这个类建立了3个属性。

namespace WebApplication1.App_Code 
{ 
    public class Employee 
    { 
        public int  EmployeeId { get; set; } 
        public string FirstName { get; set; } 
        public string LastName { get; set; } 
    } 
}

Now let’s add Web Api Controller Class to create a basic Web API.

如今，让咱们为建立的Web API添加Api 控制器类。



Now it’s time to write a code for the our ASP.Net Web API Employee Controller and following code I have written for that. here I have created a list of employee and written that in GetEmployeee method.

如今是时候在ASP.Net Web API 员工控制器中写代码，如下是我写好的代码。

这里有我建立的员工清单和写好的GetEmployee方法。

using System; 
using System.Collections.Generic; 
using System.Web.Http; 

namespace WebApplication1.App_Code 
{ 
    public class EmployeeController : ApiController 
    { 
        public List<Employee> Employees = new List<Employee> {  
            new Employee   {EmployeeId=1,FirstName="Jalpesh",LastName="Vadgama"}, 
            new Employee   {EmployeeId=2,FirstName="Vishal",LastName="Vadgama"}, 
            new Employee   {EmployeeId=3,FirstName="Tushar",LastName="Maru"}, 
            new Employee   {EmployeeId=4,FirstName="Himanshu",LastName="Patel"}, 
        };   

        public IEnumerable<Employee>   GetEmployees() 
        {   
            return Employees; 
        }   
    } 
}

As now our Web API ready and we need to add a route for our API to handle a request. So let’s first add Global Application Class.

如今咱们的Web API准备好了，而且咱们须要添加API路由来处理请求。让咱们首先添加全局应用程序类。



Now in application_start I have written following code to create a route for web api.

如今在application_Start里，我建立了Web API路由，代码以下。

protected void Application_Start(object sender, EventArgs e) 
{ 
    RouteTable.Routes.MapHttpRoute(   
             name:   "DefaultApi", 
            routeTemplate:   "api/{controller}/{id}", 
             defaults:   new { id =   System.Web.Http.RouteParameter.Optional } 
             );   
}

Here I have just define route as api/controller so our URL will like this. http://localhost/api/employee
这里有刚才定义的 api/controller 路由。因此咱们的URL将会象这样。http://localhost/api/employee

So now our API is almost ready. So It’s time to add scripts that we are going to use via NuGet package. We need to two script files jQuery for initial handling and making ajax calls and knockoutjs for bindings.

因此如今咱们的API差很少装备好了。是时候经过NuGet包添加脚本了。咱们须要两个JQuery脚本进得初始处理而且绑定AJAX调用和KnockoutJS。



same way for knockout.

Knockout也是一样的方法。



So we are ready to write a code calling API from JavaScript and perform binding for the knockout. So let’s first create a empty web form page and then we write some code in that.
因此咱们准务写JavaScript 的API调用代码，而且执行Knockout绑定。让咱们首先建立一个空白的Web表单和写一些代码。


Now first I have included both scripts in default.aspx head tag like following.

如今首先要包含两个脚本在Default.aspx中的Head标签中，像下面这样。

<head runat="server"> 
    <script src="Scripts/jquery-2.0.0.min.js"></script>   
    <script src="Scripts/knockout-2.2.1.js"></script>   
</head>

Then I have written following code for HTML

我编写好的HTML代码以下

<div> 
    <h1>Knockout   demo with asp.net web forms and asp.net webapi</h1> 
</div> 

<table > 
    <thead> 
        <tr>   
            <td>Employee   Id</td> 
            <td>First   Name</td> 
            <td>Last   Name</td> 
        </tr>   
    </thead> 

    <tbody data-bind="foreach:   employees"> 
        <tr > 
            <td data-bind="text: EmployeeId"></td>   
            <td data-bind="text:   FirstName"></td> 
            <td data-bind="text:   LastName"></td> 
        </tr>   
    </tbody> 
</table>

Here you can see that I have create a simple HTML table where I have written data-bind attribute to some of the html tags. That is a way of knockout to tell this particular tag id find with text property of td and employee id property.
这里你会看到我建立的简单的HTML表格，在哪里有我写的一些数据绑定属性HTML标签
Then I have written following code for the java script.

而后我写入下面的 JavaScript代码。

var viewModel = 
{ 
    employees: ko.observableArray([]), 
} 
$(document).ready(function () { 
    $.ajax({ 
        url: "/api/Employee", 
        contentType: "text/json", 
        type: "GET", 
        success: function (data) { 
            $.each(data, function (index) { 
                viewModel.employees.push(ToKnockOutObservable(data[index])); 
            }); 
            ko.applyBindings(viewModel); 
        }, 
        error: function (data) { 
            alert("error occured"); 
        } 
    }); 
    function ToKnockOutObservable(employee) { 
        return { 
            EmployeeId: ko.observable(employee.EmployeeId), 
            FirstName: ko.observable(employee.FirstName), 
            LastName: ko.observable(employee.LastName), 
        }; 
    } 
});

 

Here you can see that I have created a view model for employee in JavaScript which is necessary to bind html tags with view model with knockout.js. Here I have created employee as Observable arrays this is one of the ways of detecting changes in collection. You can find more information about at following link.

http://knockoutjs.com/documentation/observableArrays.html
这里你能够看到我建立的员工视图模型的JavaScript脚本，这里必须在Knockout.js使用视图模型进行HTML标签绑定。这里有我建立的用于观察的员工数组，这是在集合中检测变化的一种方法。你能够在下面连接中找到更多的信息。

http://knockoutjs.com/documentation/observableArrays.html

Then document.ready function I have made ajax call to web api and get a data for that and then create a collection of employee model with ToKnockOutObservable function. At the end I have used ko.Applybinding method to apply binding in HTML Tag.
[而后 document.ready 函数有我制造的AJAX调用Web API ，而且在ToKnockOutObservable函数中建立一个员工集合获得数据。]最后，我用ko.Applybinding 方法应用绑定HTML标签。
So we are done with coding let’s run this demo in browser like following. It’s works smoothly..

因此咱们完成代码编写，让示例运行在浏览器中以下。它工做顺利..



That’s it. Hope you like it. Stay tuned for more..

到此为止。但愿你喜欢。更多内容敬请期待..