KnocoutJs+Mvc+BootStrap 学习笔记

Mvc

  1.Html 增加扩展方法

 1 using System.Web.Mvc;
 2
 3 namespace KnockoutBootstrapMvc.Entensions
 4 {
 5     public static class HtmlHelperExtensions
 6     {
 7         public static HtmlString HtmlConvertToJson(this HtmlHelper htmlHelper, object model)
 8         {
 9             var setting = new JsonSerializerSettings
10             {
11                 ReferenceLoopHandling = ReferenceLoopHandling.Ignore,
12                 Formatting = Formatting.Indented
13             };
14             return new HtmlString(JsonConvert.SerializeObject(model, setting));
15         }
16     }
17 }

 2.Code First

创建Entity实体,当有外键关联时,可以在类内部创建virtual ObjClass  如果是数组为ICollection<ObjectClass>

 1  public class Author
 2     {
 3         public int Id { get; set; }
 4         public string FirstName { get; set; }
 5         public string LastName { get; set; }
 6         public string Biography { get; set; }
 7         public virtual ICollection<Book> Books { get; set; }
 8     }
 9
10    public class Book
11     {
12         public int Id { get; set; }
13         public string Title { get; set; }
14         public string Isbn { get; set; }
15         public string Synopsis { get; set; }
16         public string Description { get; set; }
17         public string ImageUrl { get; set; }
18         public virtual Author Author { get; set; }
19
20     }

3.Db类库\重写OnModelCreating方法

创建Db类继承DbContext,

 创建无参构造函数,设置父类连接字符串的名称

 创建实体对象  Public DbSet<EntityName> PropertyName {get;set;}

 重写OnModelCreating方法,此方法内在实体类创建时触发,可以设置实体的创建格式  如:开启、关闭默认的Id列为主键,是否自增标识列等。

 1  public class BookContext:DbContext
 2     {
 3         public BookContext()
 4             :base("BookContext")
 5         {
 6
 7         }
 8
 9         public DbSet<Book> Books { get; set; }
10         public DbSet<Author> Authors { get; set; }
11
12         protected override void OnModelCreating(DbModelBuilder modelBuilder)
13         {
14             modelBuilder.Conventions.Remove<PluralizingTableNameConvention>();
15             base.OnModelCreating(modelBuilder);
16         }
17
18     }

4.创建数据库启动程序类库,集成DropCreateDataBaseIfModelChanges<T> 、重写Seed方法用来初始化表格信息、向数据库表格中插入数据。

  未直接save的表,在save关联表时,数据也会插入进去

 1 public class BookInitializer : DropCreateDatabaseIfModelChanges<BookContext>
 2     {
 3         protected override void Seed(BookContext context)
 4         {
 5             var author = new Author()
 6             {
 7                 Biography = "..",
 8                 FirstName = "zang",
 9                 LastName = "san"
10             };
11             var books = new List<Book>()
12             {
13                 new Book()
14                 {
15                        Author=author,
16                        Description="...",
17                        ImageUrl="http://ecx.images-amazon.com",
18                        Isbn="14919143",
19                        Title="Knokout.js",
20                         Synopsis="..."
21
22                 },
23                 new Book()
24                 {
25                       Author=author,
26                        Description="...",
27                        ImageUrl="http://ecx.images-amazon.com",
28                        Isbn="14919142",
29                        Title="bootstrap.css",
30                         Synopsis="..."
31                 }
32                 ,
33                 new Book()
34                 {
35                       Author=author,
36                        Description="...",
37                        ImageUrl="http://ecx.images-amazon.com",
38                        Isbn="14919146",
39                        Title="asp.net mvc",
40                         Synopsis="..."
41                 }
42         };
43
44             author = new Author()
45             {
46                 Biography = "..",
47                 FirstName = "li",
48                 LastName = "si"
49             };
50             books.Add(new Book()
51             {
52                 Author = author,
53                 Description = "...",
54                 ImageUrl = "http://ecx.images-amazon.com",
55                 Isbn = "14919146",
56                 Title = "lisi asp.net mvc",
57                 Synopsis = "..."
58             });
59
60             books.ForEach(b => context.Books.Add(b));
61             context.SaveChanges();
62             //base.Seed(context);
63
64             //new BookInitializer();
65         }
66
67     }

    在应用启动方法中设置数据库对象,

  1.Global.asax中创建Db对象

  2.DataBase.SetInitialzer(new Objclass);

  3.Db对象.DataBase.Initialize(true);

 1  1 namespace KnockoutBootstrapMvc
 2  2 {
 3  3     public class MvcApplication : System.Web.HttpApplication
 4  4     {
 5  5         protected void Application_Start()
 6  6         {
 7  7             AreaRegistration.RegisterAllAreas();
 8  8             FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);
 9  9             RouteConfig.RegisterRoutes(RouteTable.Routes);
10 10             BundleConfig.RegisterBundles(BundleTable.Bundles);
11 11
12 12             var bookContext = new BookContext();
13 13             Database.SetInitializer(new BookInitializer());
14 14             bookContext.Database.Initialize(true);
15 15
16 16         }
17 17     }
18 18 }

5.Controller 方法属性前可以使用HttpPost等定义访问请求格式及是否启用验证

 1   // POST: Authors/Create
 2         // 为了防止“过多发布”攻击,请启用要绑定到的特定属性,有关
 3         // 详细信息,请参阅 http://go.microsoft.com/fwlink/?LinkId=317598。
 4         [HttpPost]
 5         [ValidateAntiForgeryToken]
 6         public ActionResult Create([Bind(Include = "Id,FirstName,LastName,Biography")] Author author)
 7         {
 8             if (ModelState.IsValid)
 9             {
10                 db.Authors.Add(author);
11                 db.SaveChanges();
12                 return RedirectToAction("Index");
13             }
14
15             return View(author);
16         }

 [email protected] 定义标签,在Layout页面里可以使用 @RenderSection(name:required:) 来加载对应的标签

 

PageA.cshtml
@section scripts
    {
      <script type="text/javascript">

          function ViewModel(authors)
          {
              var self = this;
              self.authors = authors;
          }

          var viewModel = new ViewModel(@Html.HtmlConvertToJson(Model));
          ko.applyBindings(viewModel);
      </script>

    }

Layout.cshtml
 @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    <script type="text/javascript" src="~/Scripts/knockout-3.4.0.js"></script>
    @RenderSection( name:"scripts", required: false)
    
时间: 2024-10-06 00:50:37

KnocoutJs+Mvc+BootStrap 学习笔记的相关文章

HTML5+Bootstrap 学习笔记 4

HTML5 <map> <area> 标签 <map> 标签定义客户端的图像映射.图像映射是带有可点击区域的图像. <area> 标签定义图像映射内部的区域(图像映射指的是带有可点击区域的图像). area 元素始终嵌套在 <map> 标签内部. 1 <img src ="planets.gif" alt="Planets" usemap ="#planetmap" /> 2

Bootstrap学习笔记(二) 表单

在Bootstrap学习笔记(一) 排版的基础上继续学习Bootstrap的表单,编辑器及head内代码不变. 3-1 基础表单 单中常见的元素主要包括:文本输入框.下拉选择框.单选按钮.复选按钮.文本域和按钮等. 在Bootstrap框架中,通过定制了一个类名`form-control`,也就是说,如果这几个元素使用了类名"form-control",将会实现一些设计上的定制效果. 1.宽度变成了100% 2.设置了一个浅灰色(#ccc)的边框 3.具有4px的圆角 4.设置阴影效果

bootstrap学习笔记一: bootstrap初认识,hello bootstrap(下)

这一篇主要是补上源码,开始之前请先回顾:bootstrap学习笔记一: bootstrap初认识,hello bootstrap(上) 首先,我们的页面要求, lang,charset等就不用说了,老html属性, viewport是h5的属性,目的是 width=device-width 铺满设备宽度, initial-scale=1正常比较 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta c

BootStrap 学习笔记一

BootStrap学习笔记一: 学习工具:BootStrap中文文档:http://v3.bootcss.com/css/#type-lists 1.HTML5文档类型 <!DOCTYPE html> <html lang="zh-CN"> ... </html> 2.为了确保适当的绘制和触屏缩放,需要在 <head> 之中添加 viewport 元数据标签. <meta name="viewport" cont

BootStrap 学习笔记二

BootStrap学习笔记一: 学习工具:BootStrap中文文档:http://v3.bootcss.com/css/#type-lists <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"><!-- 为了让 IE 浏

BootStrap 学习笔记三

BootStrap学习笔记一: 学习工具:BootStrap中文文档:http://v3.bootcss.com/css/#type-lists 表格 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"><!-- 为了让 I

bootstrap学习笔记一 登录水平表单

先上效果图: 样式定义: <form class="form-horizontal"> <div class="control-group"> <label class="control-label" for="UserName">用户名</label> <div class="controls"> <input type="tex

bootstrap 学习笔记(1)---介绍bootstrap和栅格系统

学习前端许久,对于布置框架和响应浏览器用html 和javascript 写的有点繁琐,无意间看到这个框架,觉得挺好用的就开始学习了,但是这个框架上面有很多知识,不是所有的都要学的,故将学习笔记和觉得重点的东西写下来,以便以后学习. Bootstrap  是一个相应式的布局的一个前端框架.bootstrap 学习有以下步骤:    1.bootstrap 安装,    2.bootstrap 全局css 样式    3.bootstrap css组件    4.bootstrap javascr

Bootstrap 学习笔记 之表单(4 day)

Bootstrap学习到这里,理解了为什么它是一个框架,所谓的框架,目前看来就是它本身提供了一套完整的HTML结构和样式. 我们在使用的时候,只要按照这套规则来搭建HTML结构和加上相应的样式名后就可以了. 今天学习的是表单, Bootstrap 提供了下列类型的表单布局: 垂直表单(默认) 内联表单 水平表单 需要一提的就是表单的状态: 表单控件状态 除了 :focus 状态(即,用户点击 input 或使用 tab 键聚焦到 input 上),Bootstrap 还为禁用的输入框定义了样式,