前提:
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在后台来管理我们的文章信息哦,如下图
接下来,我们开始创建新增文章窗体了,
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>
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