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="14919143",
                       Title="Knokout.js",
                        Synopsis="..."

                },
                new Book()
                {
                      Author=author,
                       Description="...",
                       ImageUrl="http://ecx.images-amazon.com",
                       Isbn="14919142",
                       Title="bootstrap.css",
                        Synopsis="..."
                }
                ,
                new Book()
                {
                      Author=author,
                       Description="...",
                       ImageUrl="http://ecx.images-amazon.com",
                       Isbn="14919146",
                       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 = "14919146",
                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);

 

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

 

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)