KnocoutJs+Mvc+BootStrap 学习笔记（Mvc）

Mvc

  1.Html 增加扩展方法

 using System.Web.Mvc;

 namespace KnockoutBootstrapMvc.Entensions
 {
     public static class HtmlHelperExtensions
     {
         public static HtmlString HtmlConvertToJson(this HtmlHelper htmlHelper, object model)
         {
             var setting = new JsonSerializerSettings
             {
                 ReferenceLoopHandling = ReferenceLoopHandling.Ignore,
                 Formatting = Formatting.Indented
             };
             return new HtmlString(JsonConvert.SerializeObject(model, setting));
         }
     }
 }

 2.Code First

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

  public class Author
     {
         public int Id { get; set; }
         public string FirstName { get; set; }
         public string LastName { get; set; }
         public string Biography { get; set; }
         public virtual ICollection<Book> Books { get; set; }
     }

    public class Book
     {
         public int Id { get; set; }
         public string Title { get; set; }
         public string Isbn { get; set; }
         public string Synopsis { get; set; }
         public string Description { get; set; }
         public string ImageUrl { get; set; }
         public virtual Author Author { get; set; }

     }

3.Db类库\重写OnModelCreating方法

创建Db类继承DbContext,

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

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

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

  public class BookContext:DbContext
     {
         public BookContext()
             :base("BookContext")
         {

         }

         public DbSet<Book> Books { get; set; }
         public DbSet<Author> Authors { get; set; }

         protected override void OnModelCreating(DbModelBuilder modelBuilder)
         {
             modelBuilder.Conventions.Remove<PluralizingTableNameConvention>();
             base.OnModelCreating(modelBuilder);
         }

     }

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

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

 public class BookInitializer : DropCreateDatabaseIfModelChanges<BookContext>
     {
         protected override void Seed(BookContext context)
         {
             var author = new Author()
             {
                 Biography = "..",
                 FirstName = "zang",
                 LastName = "san"
             };
             var books = new List<Book>()
             {
                 new Book()
                 {
                        Author=author,
                        Description="...",
                        ImageUrl="http://ecx.images-amazon.com",
                        Isbn="",
                        Title="Knokout.js",
                         Synopsis="..."

                 },
                 new Book()
                 {
                       Author=author,
                        Description="...",
                        ImageUrl="http://ecx.images-amazon.com",
                        Isbn="",
                        Title="bootstrap.css",
                         Synopsis="..."
                 }
                 ,
                 new Book()
                 {
                       Author=author,
                        Description="...",
                        ImageUrl="http://ecx.images-amazon.com",
                        Isbn="",
                        Title="asp.net mvc",
                         Synopsis="..."
                 }
         };

             author = new Author()
             {
                 Biography = "..",
                 FirstName = "li",
                 LastName = "si"
             };
             books.Add(new Book()
             {
                 Author = author,
                 Description = "...",
                 ImageUrl = "http://ecx.images-amazon.com",
                 Isbn = "",
                 Title = "lisi asp.net mvc",
                 Synopsis = "..."
             });

             books.ForEach(b => context.Books.Add(b));
             context.SaveChanges();
             //base.Seed(context);

             //new BookInitializer();
         }

     }

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

　　1.Global.asax中创建Db对象

　　2.DataBase.SetInitialzer(new Objclass);

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

   namespace KnockoutBootstrapMvc
   {
       public class MvcApplication : System.Web.HttpApplication
       {
           protected void Application_Start()
           {
               AreaRegistration.RegisterAllAreas();
               FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);
               RouteConfig.RegisterRoutes(RouteTable.Routes);
              BundleConfig.RegisterBundles(BundleTable.Bundles);

              var bookContext = new BookContext();
              Database.SetInitializer(new BookInitializer());
              bookContext.Database.Initialize(true);

          }
      }
  }

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

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

             return View(author);
         }

 6.@sections 定义标签，在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)