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

前提：

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

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

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

/*文章*/
CREATE TABLE [dbo].[Pt_Article](
    [ArticleId] [int] IDENTITY(1,1) NOT NULL,
    [ArticleTitle] [nvarchar](300) NOT NULL,
    [ArticleSmallTitle] [nvarchar](300) NULL,
    [ArticleContent] [text] NULL,
    [ArticleCategoryID] [int] NOT NULL,
    [ArticleSource] [nvarchar](300) NULL,
    [ArticleAuthor] [nvarchar](100) NULL,
    [ArticleCreateUserId] [int] NOT NULL,
    [ArticleKeywords] [nvarchar](1000) NULL,
    [ArticleDescription] [nvarchar](1000) NULL,
    [ArticleAbstract] [nvarchar](500) NULL,
    [ArticleTagIds] [nvarchar](100) NULL,
    [ArticleIsImage] [bit] NULL,
    [ArticleImagePath] [nvarchar](200) NULL,
    [ArticleCreateTime] [datetime] NOT NULL,
    [ArticleUpdateTime] [datetime] NULL,
    [ArticleUpdateUserId] [int] NULL,
    [ArticleStatus] [int] NOT NULL,
 CONSTRAINT [PK_Pt_Article] PRIMARY KEY CLUSTERED 
(
    [ArticleId] ASC
)WITH (PAD_INDEX  = OFF, STATISTICS_NORECOMPUTE  = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS  = ON, ALLOW_PAGE_LOCKS  = ON) ON [PRIMARY]
) ON [PRIMARY] TEXTIMAGE_ON [PRIMARY]
/*文章类别*/
CREATE TABLE [dbo].[Pt_ArticleCategory](
    [CategoryId] [int] IDENTITY(1,1) NOT NULL,
    [CategoryName] [nvarchar](200) NOT NULL,
    [CategoryDescption] [nvarchar](500) NULL,
    [CategoryParentID] [int] NOT NULL,
    [CategoryStatus] [int] NOT NULL,
 CONSTRAINT [PK_Pt_ArticleCategory] PRIMARY KEY CLUSTERED 
(
    [CategoryId] ASC
)WITH (PAD_INDEX  = OFF, STATISTICS_NORECOMPUTE  = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS  = ON, ALLOW_PAGE_LOCKS  = ON) ON [PRIMARY]
) ON [PRIMARY]


GO

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

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

    public class MvcCmsContext : DbContext
    {
        static MvcCmsContext()
        { 
            Database.SetInitializer<MvcCmsContext>(null);
        }

        public DbSet<Pt_Article> Pt_Article { get; set; }
        public DbSet<Pt_ArticleCategory> Pt_ArticleCategory { get; set; }
        public DbSet<Pt_User> Pt_User { get; set; }

        protected override void OnModelCreating(DbModelBuilder modelBuilder)
        {
            modelBuilder.Conventions.Remove<IncludeMetadataConvention>();
            modelBuilder.Configurations.Add(new Pt_ArticleMap());
            modelBuilder.Configurations.Add(new Pt_ArticleCategoryMap());
            modelBuilder.Configurations.Add(new Pt_UserMap());
        }
    }

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

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

@model Web.Entities.Pt_Article
@{
    ViewBag.Title = "ArticleAdd";
    Layout = "~/Areas/Admin/Views/Shared/_AdminLayout.cshtml";
}
<h2>
    添加文章</h2>
@*提交到当前页面*@
@using (Html.BeginForm())
{
    <div class="editor-label">@Html.LabelFor(a => a.ArticleId)</div>
    <div class="editor-field">
        @Html.Label("标题：")
        @Html.TextBoxFor(a => a.ArticleTitle, new { id = "txtArticleTitle" })
    </div>
}

我们着重看标红的2行：

生成的HTML代码如下：

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

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

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

Html.DropDownList显示文章分类：

//数据库查询出所有分类
        /// <summary>
        /// 获取分类列表
        /// Created by isaac on 2013-01-28
        /// </summary>
        private void GetCategoryList()
        {
            IList<Pt_ArticleCategory> list = new List<Pt_ArticleCategory>();
            using (var db = new MvcCmsContext())
            {
                list = db.Pt_ArticleCategory.ToList();
            }
            IList<SelectListItem> categoryList = new List<SelectListItem>();
            if (list != null)
            {
                categoryList.Add(new SelectListItem { Text = "-----请选择文章类别-----", Value = "0" });
                foreach (var item in list)
                {
                    categoryList.Add(new SelectListItem { Text = item.CategoryName, Value = item.CategoryId.ToString() });
                }
            }
            ViewBag.CategoryList = categoryList;
        }
//在页面加载的时候获取
        /// <summary>
        /// 新增文章
        /// </summary>
        /// <returns>Created by isaac on 2013-01-24</returns>
        public ActionResult ArticleAdd()
        {
            GetCategoryList();
            return View();
        }
//View视图显示
    <div class="editor-field">
        @Html.Label("分类：")
        @Html.DropDownList("ddlArticleCategory", (List<SelectListItem>)ViewBag.CategoryList, new { id = "ddlArticleCategory" })
    </div>

HTML代码为

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

页面显示：

Html.RadioButton 显示文章状态：

<div class="editor-field">
        @Html.Label("文章状态")
        @Html.RadioButton("sex", "1", true)正常
        @Html.RadioButton("sex", "0", false)禁止
    </div>

@model Web.Entities.Pt_Article
@{
    ViewBag.Title = "ArticleAdd";
    Layout = "~/Areas/Admin/Views/Shared/_AdminLayout.cshtml";
}
<h2>
    添加文章</h2>
@*提交到当前页面*@
@using (Html.BeginForm())
{
    @Html.AntiForgeryToken("isaac")//阻止CSRF攻击,设置salt
    <div class="editor-label">@Html.LabelFor(a => a.ArticleId)</div>
    <div class="editor-field">
        @Html.Label("标题：")
        @Html.TextBoxFor(a => a.ArticleTitle, new { id = "txtArticleTitle" })
    </div>
    <div class="editor-field">
        @Html.Label("分类：")
        @Html.DropDownListFor(a => a.ArticleCategoryID, (List<SelectListItem>)ViewBag.CategoryList)
    </div>
    <div class="editor-field">
        @Html.Label("文章状态：")
        @Html.RadioButtonFor(a => a.ArticleStatus, true)正常
        @Html.RadioButtonFor(a => a.ArticleStatus, false)禁止
    </div>
    <div class="editor-field">
        @Html.Label("文章关键词：")
        @Html.CheckBox("keywords", true, new { id = "cbKeywods1" })关键词
        @Html.CheckBox("keywords", true, new { id = "cbKeywods2" })关键词2
    </div>
    <div class="editor-field">
        @Html.Label("文章描述：")
        @Html.TextAreaFor(a => a.ArticleDescription, new { id = "txtArticleDescription" })
    </div>
    <div class="editor-field">
        <input id="btnSubmit" type="submit" value="Submit" />
    </div>
}
<div>
    @Html.ActionLink("返回列表", "Article/ArticleList", new { area = "admin" })
</div>

        /// <summary>
        /// 文章插入
        /// Created by isaac on 2013-01-28
        /// </summary>
        /// <param name="model"></param>
        /// <returns></returns>
        /// CSRF只支持POST提交
        /// 阻止CSRF攻击,设置salt,View里面的salt令牌必须一致
        [ValidateAntiForgeryToken(Salt = "isaac")]
        [HttpPost]
        public ActionResult ArticleAdd(Pt_Article model)
        {
            using (var db = new MvcCmsContext())
            {
                model.ArticleCreateUserId = 1;
                model.ArticleCreateTime = DateTime.Now;
                db.Pt_Article.Add(model);
                db.SaveChanges();
            }
            return View();
        }

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

txtArticleDescription