带 Web API Odatacontroller和MVC5演示的knockout Js

分享于 

12分钟阅读

Web开发

  繁體 雙語

介绍

Knockout JS: -

Knockout JS是一个数据绑定 JavaScript library.it,它是一个众所周知的库,它被用来制作丰富。响应灵敏的UI和底层数据模型。 这个库的好处在于每当数据模型改变时,相应的UI部分都会得到更新。 在使用knockout时,无需编写任何附加代码来跟踪数据模型或者UI更改。

Web API OData控制器:

OData是一个开放的标准协议,它提供了构造和使用可以查询的rest式API的能力。 换句话说,我们可以创建uri以获取特定细节,并根据我们的需求使用这里结果。

例如获取最高 10产品列表,我们可以形成一个网址:

http://www.workShop.com/Sampleodata/Product?$top=10&$orderby=Catogoryname

好的是形成查询将直接在数据库上执行,因此不会直接影响应用程序,甚至我们可以创建任何复杂类型查询。

现在,大多数应用程序都在使用客户端数据模型和 Web API 进一步通信或者服务层。 意味着客户端数据模型直接与服务层通信。

在我头脑中,我尝试使用for作为前端。Web API。上面 控制器的服务yaer和MVC5来实现应用程序的全流。

背景

当我学习 MVC5.0, knockout ( 客户端数据绑定) 时,Web API odata控制器。 在搜索一个简单的演示,可以通过使用所有这些技术来解释从前端到数据访问的整个流程,但是幸运或者不幸的是我没有得到任何simplefied示例。 所以我花了点时间来做这个简单的演示。

本演示的主要目的:-

  • 使用 Web API OData控制器从数据访问层获取数据到服务层。
  • config.cs 文件中的WebAPI配置。
  • 从客户端数据模型访问 Web API 方法。
  • 使用knockout将客户端数据模型绑定到 html。
  • html控件交互到客户端数据模型。

使用代码

让我们用一个非常简单的例子:

步骤 1.创建两个类库项目;首先用于实体,第二个用于数据访问。

在实体项目中,我将产品作为具有一些属性的实体引入。

publicclass Product
 {
 publicint Id { get; set; }
 publicstring Title { get; set; }
 publicstring Description { get; set; }
 publicstring ImageUrl { get; set; }
 publicdouble Price { get; set; }
 publicstring Category { get; set; }
 }

在数据访问层,我引入了一个名为Repository的文件夹,其中这些文件夹分别创建了一个接口和类 IProductRepository。

publicinterface IProductRepository
 {
 List<Product> GetProducts();
 Product GetProductById(int id);
 }

这里我不打算使用任何特定的数据访问概念,所以对于这个演示,我将创建硬编码值。

Public class ProductRepository
 {
 public List<Product> GetProducts()
 {
 List<Product> produts = new List<Product>();
 produts.Add(new Product { Id = 1, Title = "Product1", Description = "Test Product", ImageUrl = "", Price = 1.01, Category = "P1" });
 produts.Add(new Product { Id = 2, Title = "Product2", Description = "Test Product", ImageUrl = "", Price = 2.01, Category = "P2" });
 produts.Add(new Product { Id = 3, Title = "Product3", Description = "Test Product", ImageUrl = "", Price = 3.01, Category = "P3" });
 produts.Add(new Product { Id = 4, Title = "Product4", Description = "Test Product", ImageUrl = "", Price = 4.01, Category = "P4" });
 produts.Add(new Product { Id = 5, Title = "Product5", Description = "Test Product", ImageUrl = "", Price = 5.01, Category = "P1" });
 return produts;
 }
 public Product GetProductById(int id)
 {
 var listProducts = GetProducts();
 return listProducts.Where(i => i.Id == id).Select(p =>new Product { Id = p.Id, Title = p.Title, Description = p.Description, Category = p.Category }).FirstOrDefault();
 }
 }

从现在开始,我的解决方案如下所示:

https://www.codeproject.com/KB/scripting/1064319/solu1.png

现在我们要创建一个项目。

添加新项目并选择 ASP.NET Web应用程序模板。

https://www.codeproject.com/KB/scripting/1064319/solu2.png

单击确定并选择WebAPI模板

https://www.codeproject.com/KB/Articles/1064319/demo3.png

删除了所需的文件。

向webApi项目添加 ASP.NET Odata参考。

https://www.codeproject.com/KB/scripting/1064319/demo4.png

在控制器文件夹中添加了 ProductController.cs 文件 inside。 现在我的解决方案看起来与下面一样:

https://www.codeproject.com/KB/Articles/1064319/demo5.png

我在ProductController调用中继承了ODataController类,并从方法 NAME 启用了查询属性,因为我们不会使用这里功能。

publicclass ProductController : ODataController
 {
 ProductRepository _productRepository;
 public ProductController()
 {
 _productRepository = new ProductRepository();
 }
 //[HttpGet]//[EnableQuery] [ODataRoute("GetProducts1()")]
 publicString GetProducts()
 {
 return JsonConvert.SerializeObject(_productRepository.GetProducts());
 }
 publicString GetProductsById(int id)
 {
 return JsonConvert.SerializeObject(_productRepository.GetProductById(id));
 }
 }

在ODataRoute上,我编写 GetProducts1 ;为了区别ODataRoute和方法 NAME,我将进一步解释。

现在是一个导入部分,webApi配置。

在这个文件中,我们用来定义函数及其配置,比如它们的输入参数。返回类型。

将实体映射到模型和模型中最重要的事情之一。

在这个例子中,我将路由 NAME 和前缀修复,以便一个统一的请求来自前端。

publicstaticvoid Register(HttpConfiguration config)
 {
 ODataConventionModelBuilder modelBuilder = new ODataConventionModelBuilder();
 modelBuilder.EntitySet<Product>("Products");
 // Function parameter maps with ODataRoute parameter name in controllervar getProductConfig = modelBuilder.Function("GetProducts1");
 getProductConfig.Returns<String>();
 var getProductByIdConfig = modelBuilder.Function("GetProductById");
 getProductByIdConfig.Parameter<int>("Id");
 getProductByIdConfig.Returns<String>();
 config.MapODataServiceRoute(routeName: "ODataRoute", routePrefix: "ProductOData", model: modelBuilder.GetEdmModel());
 }

在这里你可以看到模型生成器映射到oDataRoute而不是 function name (GetProducts1 not GetProducts),因此的功能配置依赖于数据路由,而不是函数的函数。

,现在是添加前端网站的时候了。

我已经为这个演示选择了MVC模板。

https://www.codeproject.com/KB/scripting/1064319/demo6.png

删除了所需的文件。

我已经添加了一个mvc控制器 NAME 产品控制器

https://www.codeproject.com/KB/scripting/1064319/demo7.png

添加了一个视图:- 索引视图,

部分视图:_productList

现在我的解决方案显示为

https://www.codeproject.com/KB/Articles/1064319/demo8.png

对于客户端模型,创建 menu.js 和 productlist.js inside 脚本文件夹,该文件夹将与菜单和_productlist视图绑定在一起。

从核核打包器 manager.https://www.codeproject.com/KB/Articles/1064319/demo9.png 中导出knockoutJS组件

将knockout引用添加到 BundleConfig.cs 文件。

在路由器配置中设置与产品控制器的路由。

对于本演示,将项目url设置为 Web API 和web应用程序,以便运行应用程序并行服务。

用于网络应用程序

https://www.codeproject.com/KB/scripting/1064319/demo10.png

用于 API

https://www.codeproject.com/KB/scripting/1064319/demo11.png

在 product.js 上我们将调用这个 Web API 方法,并将它的pust为可见的array。 现在这个可以观察的array 将绑定到html页面。

var productListViewModel = function () {
 var self = this;
 self._listProduct = [];
 self.Products = ko.observableArray([]);
 self.getProducts = function () {
 var productDataUrl = "Api/ProductOData/GetProducts1";
 $.ajax({
 url: productDataUrl,
 type: "GET",
 success: function (result) {
 self._listProduct = $.parseJSON(result.value);
 self.Products(self._listProduct);
 },
 error: function (data) {
 alert(data);
 }
 })
 }
};var vm = new productListViewModel();
vm.getProducts();
ko.applyBindings(vm, $("#divList")[0]); 

首先,我们将遍历每个循环的array,然后将每个元素绑定到相应的控件。

<tableclass="table table-striped table-bordered table-condensed"><tr><th>Title</th><th>Description</th><th>Image</th><th>Price</th><th>Category</th></tr><tbodydata-bind="foreach:Products"><tr><tddata-bind="text:Title"></td><tddata-bind="text:Description"></td><tddata-bind="text:ImageUrl"></td><tddata-bind="text:Price"></td><tddata-bind="text:Category"></td><td><buttonclass="btn btn-mini btn-danger"data-bind="click: $parent.removeProfile">Remove</button></td><td><buttonclass="btn btn-mini btn-danger"data-bind="click: $parent.editProfile">Edit</button></td></tr></tbody></table>

使用"var"按钮来包装 <代码> 标签中的变量或者类名,如 this

Points of Interest

在本文中,我们讨论了应用程序的整个流程,例如

数据访问层到前端的数据流。

数据访问层到服务层的数据流。

Web API OData控制器。

带函数路由的Web API 配置。

从服务层到客户端数据模型的数据流。

使用服务器端数据模型和客户端数据模型将绑定绑定到html控件。

这篇文章是我在头脑中保持初学者的。 在下一篇文章中,我将介绍更多关于OData控制器概念的文章。

希望本文对你有帮助。

源代码 <o:p>

我上传这个 本文的mple项目。 那是 ASP.NET 4.5版本和 Visual Studio 2015版本的MVC项目。 你可以下载这个示例代码,让你更好地理解这些概念和实现。


WEB  API  DEMO  Web Api  Odata  odatacontroller  
相关文章