Fork me on GitHub

VS2010+EF Code First 4.1学习MVC3（三）

前提：

htmlHelper 和UrlHelper 类，这是我们在View层进行页面显示组件的常用类或者是唯一类，但是我们又对它了解哪些呢？我们了解为什么可以使用htmlHelper类？因为使用了扩展方法，我们自己是否可以正确的定义一些helper类来满足我们自己的业务需求，对于扩展方法我们又理解多少？htmlHelper类中的那几个方法我们是否完全的掌握？

今天，我要重点学习的地方是htmlHelper类，有需要的童靴可以一起来哦。

首先，我要创建两张表，文章表和文章分类

 1 /*文章*/
 2 CREATE TABLE [dbo].[Pt_Article](
 3     [ArticleId] [int] IDENTITY(1,1) NOT NULL,
 4     [ArticleTitle] [nvarchar](300) NOT NULL,
 5     [ArticleSmallTitle] [nvarchar](300) NULL,
 6     [ArticleContent] [text] NULL,
 7     [ArticleCategoryID] [int] NOT NULL,
 8     [ArticleSource] [nvarchar](300) NULL,
 9     [ArticleAuthor] [nvarchar](100) NULL,
10     [ArticleCreateUserId] [int] NOT NULL,
11     [ArticleKeywords] [nvarchar](1000) NULL,
12     [ArticleDescription] [nvarchar](1000) NULL,
13     [ArticleAbstract] [nvarchar](500) NULL,
14     [ArticleTagIds] [nvarchar](100) NULL,
15     [ArticleIsImage] [bit] NULL,
16     [ArticleImagePath] [nvarchar](200) NULL,
17     [ArticleCreateTime] [datetime] NOT NULL,
18     [ArticleUpdateTime] [datetime] NULL,
19     [ArticleUpdateUserId] [int] NULL,
20     [ArticleStatus] [int] NOT NULL,
21  CONSTRAINT [PK_Pt_Article] PRIMARY KEY CLUSTERED 
22 (
23     [ArticleId] ASC
24 )WITH (PAD_INDEX  = OFF, STATISTICS_NORECOMPUTE  = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS  = ON, ALLOW_PAGE_LOCKS  = ON) ON [PRIMARY]
25 ) ON [PRIMARY] TEXTIMAGE_ON [PRIMARY]
26 /*文章类别*/
27 CREATE TABLE [dbo].[Pt_ArticleCategory](
28     [CategoryId] [int] IDENTITY(1,1) NOT NULL,
29     [CategoryName] [nvarchar](200) NOT NULL,
30     [CategoryDescption] [nvarchar](500) NULL,
31     [CategoryParentID] [int] NOT NULL,
32     [CategoryStatus] [int] NOT NULL,
33  CONSTRAINT [PK_Pt_ArticleCategory] PRIMARY KEY CLUSTERED 
34 (
35     [CategoryId] ASC
36 )WITH (PAD_INDEX  = OFF, STATISTICS_NORECOMPUTE  = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS  = ON, ALLOW_PAGE_LOCKS  = ON) ON [PRIMARY]
37 ) ON [PRIMARY]
38 
39 
40 GO

为什么呢，因为文章里面可以用到好多好多的htmlHelper的组件哦~~

好了，表创建好了，下一步重新生成EF，我们可以从下面看到操作类中有我们新建的对象了

 1     public class MvcCmsContext : DbContext
 2     {
 3         static MvcCmsContext()
 4         { 
 5             Database.SetInitializer<MvcCmsContext>(null);
 6         }
 7 
 8         public DbSet<Pt_Article> Pt_Article { get; set; }
 9         public DbSet<Pt_ArticleCategory> Pt_ArticleCategory { get; set; }
10         public DbSet<Pt_User> Pt_User { get; set; }
11 
12         protected override void OnModelCreating(DbModelBuilder modelBuilder)
13         {
14             modelBuilder.Conventions.Remove<IncludeMetadataConvention>();
15             modelBuilder.Configurations.Add(new Pt_ArticleMap());
16             modelBuilder.Configurations.Add(new Pt_ArticleCategoryMap());
17             modelBuilder.Configurations.Add(new Pt_UserMap());
18         }
19     }

我们通过创建Area在后台来管理我们的文章信息哦，如下图

 接下来，我们开始创建新增文章窗体了，

View Code 
 1 @model Web.Entities.Pt_Article
 2 @{
 3     ViewBag.Title = "ArticleAdd";
 4     Layout = "~/Areas/Admin/Views/Shared/_AdminLayout.cshtml";
 5 }
 6 <h2>
 7     添加文章</h2>
 8 @*提交到当前页面*@
 9 @using (Html.BeginForm())
10 {
11     <div class="editor-label">@Html.LabelFor(a => a.ArticleId)</div>
12     <div class="editor-field">
13         @Html.Label("标题：")
14         @Html.TextBoxFor(a => a.ArticleTitle, new { id = "txtArticleTitle" })
15     </div>
16 }

我们着重看标红的2行：

生成的HTML代码如下：

<label for="">标题：</label>
 <input id="txtArticleTitle" name="ArticleTitle" type="text" value="" />

通过代码比较我们可以看出，我们在文本框自定义的id被添加到了HTML中的ID，所以，我们完全可以想象。

我们自定义的一些属性就可以通过new{}来定义实现。

Html.DropDownList显示文章分类：

 1 //数据库查询出所有分类
 2         /// <summary>
 3         /// 获取分类列表
 4         /// Created by isaac on 2013-01-28
 5         /// </summary>
 6         private void GetCategoryList()
 7         {
 8             IList<Pt_ArticleCategory> list = new List<Pt_ArticleCategory>();
 9             using (var db = new MvcCmsContext())
10             {
11                 list = db.Pt_ArticleCategory.ToList();
12             }
13             IList<SelectListItem> categoryList = new List<SelectListItem>();
14             if (list != null)
15             {
16                 categoryList.Add(new SelectListItem { Text = "-----请选择文章类别-----", Value = "0" });
17                 foreach (var item in list)
18                 {
19                     categoryList.Add(new SelectListItem { Text = item.CategoryName, Value = item.CategoryId.ToString() });
20                 }
21             }
22             ViewBag.CategoryList = categoryList;
23         }
24 //在页面加载的时候获取
25         /// <summary>
26         /// 新增文章
27         /// </summary>
28         /// <returns>Created by isaac on 2013-01-24</returns>
29         public ActionResult ArticleAdd()
30         {
31             GetCategoryList();
32             return View();
33         }
34 //View视图显示
35     <div class="editor-field">
36         @Html.Label("分类：")
37         @Html.DropDownList("ddlArticleCategory", (List<SelectListItem>)ViewBag.CategoryList, new { id = "ddlArticleCategory" })
38     </div>

HTML代码为

1     <div class="editor-field">
2         <label for="">分类：</label>
3         <select id="ddlArticleCategory" name="ddlArticleCategory"><option value="0">-----请选择文章类别-----</option>
4 <option value="1">Xiaan News</option>
5 </select>
6     </div>

页面显示：

Html.RadioButton 显示文章状态：

1 <div class="editor-field">
2         @Html.Label("文章状态")
3         @Html.RadioButton("sex", "1", true)正常
4         @Html.RadioButton("sex", "0", false)禁止
5     </div>
View 页面 
 1 @model Web.Entities.Pt_Article
 2 @{
 3     ViewBag.Title = "ArticleAdd";
 4     Layout = "~/Areas/Admin/Views/Shared/_AdminLayout.cshtml";
 5 }
 6 <h2>
 7     添加文章</h2>
 8 @*提交到当前页面*@
 9 @using (Html.BeginForm())
10 {
11     @Html.AntiForgeryToken("isaac")//阻止CSRF攻击,设置salt
12     <div class="editor-label">@Html.LabelFor(a => a.ArticleId)</div>
13     <div class="editor-field">
14         @Html.Label("标题：")
15         @Html.TextBoxFor(a => a.ArticleTitle, new { id = "txtArticleTitle" })
16     </div>
17     <div class="editor-field">
18         @Html.Label("分类：")
19         @Html.DropDownListFor(a => a.ArticleCategoryID, (List<SelectListItem>)ViewBag.CategoryList)
20     </div>
21     <div class="editor-field">
22         @Html.Label("文章状态：")
23         @Html.RadioButtonFor(a => a.ArticleStatus, true)正常
24         @Html.RadioButtonFor(a => a.ArticleStatus, false)禁止
25     </div>
26     <div class="editor-field">
27         @Html.Label("文章关键词：")
28         @Html.CheckBox("keywords", true, new { id = "cbKeywods1" })关键词
29         @Html.CheckBox("keywords", true, new { id = "cbKeywods2" })关键词2
30     </div>
31     <div class="editor-field">
32         @Html.Label("文章描述：")
33         @Html.TextAreaFor(a => a.ArticleDescription, new { id = "txtArticleDescription" })
34     </div>
35     <div class="editor-field">
36         <input id="btnSubmit" type="submit" value="Submit" />
37     </div>
38 }
39 <div>
40     @Html.ActionLink("返回列表", "Article/ArticleList", new { area = "admin" })
41 </div>
 1         /// <summary>
 2         /// 文章插入
 3         /// Created by isaac on 2013-01-28
 4         /// </summary>
 5         /// <param name="model"></param>
 6         /// <returns></returns>
 7         /// CSRF只支持POST提交
 8         /// 阻止CSRF攻击,设置salt,View里面的salt令牌必须一致
 9         [ValidateAntiForgeryToken(Salt = "isaac")]
10         [HttpPost]
11         public ActionResult ArticleAdd(Pt_Article model)
12         {
13             using (var db = new MvcCmsContext())
14             {
15                 model.ArticleCreateUserId = 1;
16                 model.ArticleCreateTime = DateTime.Now;
17                 db.Pt_Article.Add(model);
18                 db.SaveChanges();
19             }
20             return View();
21         }

下面我们就能看到列表页面多了一条数据了哦~~，这里我们只是用到了HTMLHelper里面，我们最常用的一些表单元素，下一节我们再深入的了解HTMLHelper，现在你就已经可以做一个网站内容添加页面了~~

 

 

txtArticleDescription

posted @ 2013-01-28 14:05  IsaacZhang  阅读(809)  评论(3)  编辑  收藏  举报