在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 ...
随机推荐
- OE中的bitbake使用
OpenEmbedded是一些脚本(shell和python脚本)和数据构成的自动构建系统. 脚本实现构建过程,包括下载(fetch).解包(unpack).打补丁(patch).config ...
- retrying模块的学习
retrying模块的学习 我们在写爬虫的过程中,经常遇到爬取失败的情况,这个时候我们一般会通过try块去进行重试,但是每次都写那么一堆try块,真的是太麻烦,所以今天就来说一个比较pythonic的 ...
- centos7环境配置haproxy实现mysql数据库和redis代理服务器
centos7环境配置haproxy实现mysql数据库代理 我们通常会碰到这样的业务场景: b主机和c数据库在同一个内网,a主机不能直接访问c数据库,我们可以通过在b主机上搭建代理让a访问c数据库, ...
- 过滤掉文本中的javascript标签代码
2014年1月21日 11:51:19 php代码: $content = preg_replace('#<\s*[script].*>#', '', $a);//有些攻击可以在scrip ...
- ASP.NET MVC 路由学习
参考 http://www.cnblogs.com/yaozhenfa/p/asp_net_mvc_route_2.html 说明 1."解决与物理路径的冲突"这段教程这里如果不起 ...
- PHP操作Redis常用
一.Redis连接与认证 //连接参数:ip.端口.连接超时时间,连接成功返回true,否则返回false $ret = $redis->connect('127.0.0.1', 6379, 3 ...
- CF601A 【The Two Routes】
看数据范围,然后果断邻接矩阵$Floyd$啊 对于公路和铁路,各建一个图,分别跑最短路,然后取最大值即可 #include<iostream> #include<cstdio> ...
- Win7建立FTP站点
Win7建立FTP站点 1.到控制面板---程序---打开或关闭windows功能,列表内找到 Internet信息服务(展开)---选中FTP的三个项: 2.到控制面板---系统和安全---管理工具 ...
- php 会话控制(了解cookie与session之间的区别与联系)
相同点: 都可以在解决HTTP无状态的问题,使同一个客户端在访问网站的多次请求中,可以保存,设置信息,并且在请求事物之间建立联系. 不同点: 简单的说cookie的信息保存在客户端,session的信 ...
- 001.KVM介绍
KVM介绍可参考: http://liqingbiao.blog.51cto.com/3044896/1740516 http://koumm.blog.51cto.com/703525/128879 ...