在ASP.NET MVC中使用Knockout实践01,绑定Json对象
本篇体验在ASP.NET MVC下使用Knockout,将使用EF Code First创建数据库。最后让Knockout绑定一个Json对象。
创建一个领域模型。
namespace MvcApplication3.Models{public class Product{public int Id { get; set; }public string Name { get; set; }public string Category { get; set; }public decimal Price { get; set; }}}
派生于DbContext的上下文。
using System.Data.Entity;namespace MvcApplication3.Models{public class ProductContext : DbContext{public ProductContext() : base("conn"){Database.SetInitializer(new ProductInitializer());}public DbSet<Product> Products { get; set; }}}
设置一些种子数据。
using System.Data.Entity;namespace MvcApplication3.Models{public class ProductInitializer : DropCreateDatabaseIfModelChanges<ProductContext>{protected override void Seed(ProductContext context){context.Products.Add(new Product() {Name = "秋意真浓", Price = 85M, Category = "散文"});context.Products.Add(new Product() {Name = "冬日恋歌", Price = 95M, Category = "小说" });context.Products.Add(new Product() { Name = "春暖花开", Price = 105M, Category = "散文" });}}}
Web.config中connectionStrings节点配置。
<connectionStrings>...<add name="conn" connectionString="Data Source=.;User=用户名;Password=密码;Initial Catalog=ProductStore;Integrated Security=True" providerName="System.Data.SqlClient" /></connectionStrings>
创建一个针对Product领域模型的接口。
using System.Collections.Generic;namespace MvcApplication3.Models{public interface IProductRepository{IEnumerable<Product> GetAll();Product GetById(int id);Product Add(Product item);bool Update(Product item);bool Delete(int id);}}
对IProductRepository接口的实现。
using System.Data;namespace MvcApplication3.Models{public class ProductRepository : IProductRepository{private ProductContext db = new ProductContext();public System.Collections.Generic.IEnumerable<Product> GetAll(){return db.Products;}public Product GetById(int id){return db.Products.Find(id);}public Product Add(Product item){db.Products.Add(item);db.SaveChanges();return item;}public bool Update(Product item){db.Entry(item).State = EntityState.Modified;db.SaveChanges();return true;}public bool Delete(int id){Product product = db.Products.Find(id);db.Products.Remove(product);if (db.SaveChanges() > 0){return true;}else{return false;}}}}
在HomeController中提供一个Action,用来获取数据库中第一条Product记录,并以json格式返回。
using System;using System.Web.Mvc;using MvcApplication3.Models;namespace MvcApplication3.Controllers{public class HomeController : Controller{static readonly IProductRepository repository = new ProductRepository();public ActionResult Index(){return View();}public JsonResult GetFirstProduct(){var product = repository.GetById(1);return Json(product, JsonRequestBehavior.AllowGet);}}}
在Home/Index.cshtml中,让Knockout绑定一个json类型的View Model,然后向控制器发出一个异步请求,返回的数据更新json对象的name属性。
@{ViewBag.Title = "Index";Layout = "~/Views/Shared/_Layout.cshtml";}<div data-bind="text:name"></div> <hr/><input type="text" data-bind="value:name"/>@section scripts{<script src="~/Scripts/knockout-2.2.0.js"></script><script type="text/javascript">$(function() {ko.applyBindings(productViewModel);$.getJSON('@Url.Action("GetFirstProduct","Home")', function (data) {productViewModel.name(data.Name);});});var productViewModel = {id: ko.observable(""),name: ko.observable("初始值"),price: ko.observable(""),category: ko.observable("")};</script>}
以上,
○ View Model的类型是一个json对象
○ 使用ko.observable(""),让View Model的成员与界面保持同步
○ 界面视图使用data-bind属性实现与View Model的同步
在ASP.NET MVC中使用Knockout实践01,绑定Json对象的更多相关文章
- 在ASP.NET MVC中使用Knockout实践09,自定义绑定
Knockout真正强大之处在于绑定机制,通过data-bind属性值体现绑定,不仅可以绑定值,还可以绑定事件,甚至可以自定义绑定. 从一个例子看Knockou的绑定机制 假设想给一个button元素 ...
- 在ASP.NET MVC中使用Knockout实践06,自定义验证、异步验证
在上一篇中体验了Knockout.Validation的基本验证,本篇体验自定义验证和异步验证. 自定义验证规则 ko.validation有一个rules属性,专门用来存放验证规则,它是一个键值对集 ...
- 在ASP.NET MVC中使用Knockout实践02,组合View Model成员、Select绑定、通过构造器创建View Model,扩展View Model方法
本篇体验使用ko.computed(fn)计算.组合View Model成员.Select元素的绑定.使用构造器创建View Model.通过View Model的原型(Prototype)为View ...
- 在ASP.NET MVC中使用Knockout实践07,自定义验证信息的位置与内容
在前两篇中,体验了Knockout的基本验证和自定义验证.本篇自定义验证信息的显示位置与内容. 自定义验证信息的显示位置 通常,Knockout的验证信息紧跟在input后面,通过validation ...
- 在ASP.NET MVC中使用Knockout实践08,使用foreach绑定集合
本篇体验使用 foreach 绑定一个Product集合. 首先使用构造创建一个View Model. var Product = function(data) { this.name = ko.ob ...
- 在ASP.NET MVC中使用Knockout实践05,基本验证
本篇体验View Model验证.Knockout的subscribe方法能为View Model成员注册验证规则. @{ ViewBag.Title = "Index"; Lay ...
- 在ASP.NET MVC中使用Knockout实践04,控制View Model的json格式内容
通常,需要把View Model转换成json格式传给服务端.但在很多情况下,View Model既会包含字段,还会包含方法,我们只希望把字段相关的键值对传给服务端. 先把上一篇的Product转换成 ...
- 在ASP.NET MVC中使用Knockout实践03,巧用data参数
使用Knockout,当通过构造函数创建View Model的时候,构造函数的参数个数很可能是不确定的,于是就有了这样的一个解决方案:向构造函数传递一个object类型的参数data. <inp ...
- Asp.net MVC中文件上传的参数转对象的方法
参照博友的.NET WebApi上传文件接口(带其他参数)实现文件上传并带参数,当需要多个参数时,不想每次都通过HttpContext.Request.Params去取值,就针对HttpRequest ...
随机推荐
- BAT脚本加防火墙455端口
@echo off mode con: cols=85 lines=30 :NSFOCUSXA title WannaCry勒索病毒安全加固工具 color 0A cls echo. echo. ec ...
- USB-HID鼠标、键盘通讯格式【转】
转自:https://blog.csdn.net/techhome803/article/details/9928873 转自:http://www.amobbs.com/forum.php?mod= ...
- python基础-pthon
1)python 由Guido开发 2)编译(compile)型:通过编译器把代码直接生成一个可执行文件. 比如把英语书一次性翻译成中文书.语言有:c,C++等 解释型:边编译边执行.语言如:java ...
- UE没法远程修改文件
UE没法远程修改文件修改ftp和sftp修改方式都没有作用,考虑可能是防火墙的作用,关闭防火墙可以.于是在控制面板->防火墙->修改策略中将UE的公用网络打开.
- mysql的完整卸载
一.卸载MySQL数据库 1.检查mysql服务并关闭服务进程 (1)登录Linux后执行service mysqld status 或者service mysql status命令查看MySQL服务 ...
- plaidctf-2016 Pwn试题小结
回顾了一下今年plaidctf Pwn部分的题目,感觉还是蛮有意思的,值得研究一下. 1.unix_time_formatter-76 最简单的一道题,考点是UAF.说是UAF但是其实根本就不算是真正 ...
- C/C++有效对齐值的确定
先来看看什么是对齐.现代计算机中内存空间都是按照字节(byte)划分的,从理论上讲似乎对任何类型的变量的访问可以从任何地址开始,但实际情况是在访问特定变量的时候经常在特定的内存地址访问,这就需要各类型 ...
- 《NodeJS开发指南》第五章微博实例开发总结
所有文章搬运自我的个人主页:sheilasun.me <NodeJS开发指南>这本书用来NodeJS入门真是太好了,而且书的附录部分还讲到了闭包.this等JavaScript常用特性.第 ...
- Angular 5项目
Angular 5项目 如果您正在使用angular, 但是没有好好利用angular cli的话, 那么可以看看本文. Angular CLI 官网: https://github.com/angu ...
- Matlab保存uint16格式文件的相关注意事项
在matlab中,我们常使用imshow()函数来显示图像,而此时的图像矩阵可能经过了某种运算.在matlab中,为了保证精度,经过了运算的图像矩阵I其数据类型会从unit8型变成double型.如果 ...