前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >VS2010+EF Code First 4.1学习MVC3(三)

VS2010+EF Code First 4.1学习MVC3(三)

作者头像
Isaac Zhang
发布2019-09-10 18:46:51
4460
发布2019-09-10 18:46:51
举报
文章被收录于专栏:奔跑的人生

前提:

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

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

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

代码语言:javascript
复制
 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,我们可以从下面看到操作类中有我们新建的对象了

代码语言:javascript
复制
 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在后台来管理我们的文章信息哦,如下图

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

代码语言:javascript
复制
 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代码如下:

代码语言:javascript
复制
<label for="">标题:</label>
 <input id="txtArticleTitle" name="ArticleTitle" type="text" value="" />

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

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

Html.DropDownList显示文章分类

代码语言:javascript
复制
 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代码为

代码语言:javascript
复制
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 显示文章状态

代码语言:javascript
复制
1 <div class="editor-field">
2         @Html.Label("文章状态")
3         @Html.RadioButton("sex", "1", true)正常
4         @Html.RadioButton("sex", "0", false)禁止
5     </div>
代码语言:javascript
复制
 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>
代码语言:javascript
复制
 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

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2013-01-28 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档