ASP.NET MVC3 從零開(kāi)始一步步構(gòu)建Web
微軟更新速度一直都是很快,目前MVC4.0Beta已經(jīng)發(fā)布了,而我還在剛剛起步MVC3.0。本文是MVC的基礎(chǔ),構(gòu)建最簡(jiǎn)單的MVC項(xiàng)目。以后會(huì)陸續(xù)發(fā)布更新。
開(kāi)發(fā)工具:VS2010+MSSQL2005,需要使用MVC3.0
環(huán)境配置
第一步:到官方網(wǎng)站下載MVC3,提供了簡(jiǎn)體中文。先安裝 AspNetMVC3ToolsUpdateSetup.exe,然后安裝AspNetMVC3ToolsUpdateVS11Setup.exe http://www.microsoft.com/download/en/details.aspx?displaylang=en&id=1491

第二步:新建數(shù)據(jù)庫(kù),創(chuàng)建測(cè)試表。然后往表里insert些測(cè)試數(shù)據(jù)
- USE [yanComdb]
- GO
- /****** 對(duì)象: Table [dbo].[NewsEntity] 腳本日期: 03/12/2012 22:03:59 ******/
- SET ANSI_NULLS ON
- GO
- SET QUOTED_IDENTIFIER ON
- GO
- CREATE TABLE [dbo].[NewsEntity](
- [NId] [int] IDENTITY(1,1) NOT NULL,
- [Title] [nvarchar](100) COLLATE Chinese_PRC_CI_AS NOT NULL,
- [Information] [text] COLLATE Chinese_PRC_CI_AS NULL,
- [Time] [datetime] NOT NULL CONSTRAINT [DF_NewsEntity_Time] DEFAULT (getdate()),
- CONSTRAINT [PK_NewsEntity] PRIMARY KEY CLUSTERED
- (
- [NId] ASC
- )WITH (PAD_INDEX = OFF, IGNORE_DUP_KEY = OFF) ON [PRIMARY]
- ) ON [PRIMARY] TEXTIMAGE_ON [PRIMARY]
構(gòu)建列表頁(yè)面
第一步:打開(kāi)VS,新建選擇MVC3 web應(yīng)用程序,輸入項(xiàng)目名稱(chēng)以及目錄


第二步:創(chuàng)建NewsEntity類(lèi),本文使用自己手寫(xiě)實(shí)體類(lèi)(沒(méi)有使用LinqtoSql,EF等orm)
- [TableAttribute("NewsEntity")]//這行很重要,因?yàn)閙vc框架默認(rèn)去db中找類(lèi)名復(fù)數(shù)的表名
- public class NewsEntity
- {
- [Key]//設(shè)置主鍵
- public int NId { get; set; }
- [StringLength(100)]//設(shè)置驗(yàn)證信息
- [Required(ErrorMessage="標(biāo)題不能為空")]
- [DisplayName("標(biāo)題")]
- public string Title { get; set; }
- [Required(ErrorMessage = "正文必須填寫(xiě)")]
- [DisplayName("正文")]
- public string Information { get; set; }
- public DateTime Time { get; set; }
- }
第三步:配置數(shù)據(jù)庫(kù)連接字符,注意此處的name對(duì)應(yīng)下一步中創(chuàng)建的類(lèi)名。
- <connectionStrings>
- <add name="ProjectEntity" connectionString="Data Source=ip;Initial Catalog=yanComdb;Persist Security Info=True;User ID=;Password="
- providerName="System.Data.SqlClient" />
- </connectionStrings>
第四步:創(chuàng)建ProjectEntity類(lèi),需要繼承DbContext
- public class ProjectEntity : DbContext
- {
- public DbSet<NewsEntity> NewsEntity { get; set; }
- }
第五步:新建Controller,
- ProjectEntity PE = new ProjectEntity();
- public ActionResult News()
- {
- try
- {
- var list = PE.NewsEntity.ToList();
- return View(list);
- }
- catch (Exception e)
- {
- throw e;
- }
- }
第六步:在News上右鍵,新建視圖。勾選“創(chuàng)建強(qiáng)類(lèi)型視圖”,選擇NewsEntity,支架模塊選擇List

添加后,cshtml代碼如下:
- @model IEnumerable<TaiQiu.Models.NewsEntity>
- @{
- ViewBag.Title = "后臺(tái)新聞管理列表";
- Layout = "~/Views/Shared/_MLayout.cshtml";
- }
- <h2>
- 新聞列表</h2>
- <p>
- @Html.ActionLink("添加", "Create")
- </p>
- <table>
- <tr>
- <th width="50px">
- ID
- </th>
- <th width="300px">
- 標(biāo)題
- </th>
- <th width="150px">
- 時(shí)間
- </th>
- <th>
- </th>
- </tr>
- @foreach (var item in Model)
- {
- <tr>
- <td>
- @Html.DisplayFor(modelItem => item.NId)
- </td>
- <td>
- @Html.DisplayFor(modelItem => item.Title)
- </td>
- <td>
- @Html.DisplayFor(modelItem => item.Time)
- </td>
- <td>
- @Html.ActionLink("編輯", "EditNews", new { id = item.NId }) |
- @Html.ActionLink("刪除", "DeleteNews", new { id=item.NId })
- </td>
- </tr>
- }
- </table>
運(yùn)行后效果圖如下:

到此,第一個(gè)列表頁(yè)面就完成了(未涉及分頁(yè),后續(xù)會(huì)更新)。關(guān)于添加,修改,刪除也就很容易了。
添加Controller代碼:
- [HttpPost]
- [ValidateInput(false)]
- public ActionResult Create(NewsEntity news)
- {
- if (ModelState.IsValid)
- {
- news.Time = DateTime.Now;
- PE.NewsEntity.Add(news);
- try
- {
- PE.SaveChanges();
- return RedirectToAction("News");
- }
- catch (Exception e)
- {
- throw e;
- }
- }
- return View();
- }
添加頁(yè)面:
- @model TaiQiu.Models.NewsEntity
- @{
- ViewBag.Title = "添加新聞";
- Layout = "~/Views/Shared/_MLayout.cshtml";
- }
- <h2>
- 添加新聞</h2>
- <script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
- <script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
- <script src="@Url.Content("~/Scripts/kindeditor/kindeditor.js")" type="text/javascript"></script>
- <script src="@Url.Content("~/Scripts/kindeditor/lang/zh_CN.js")" type="text/javascript"></script>
- <script type="text/javascript">
- var editor;
- KindEditor.ready(function (K) {
- editor = K.create('textarea[name="Information"]', {
- allowFileManager: true
- });
- });
- </script>
- @using (Html.BeginForm())
- {
- @Html.ValidationSummary(true)
- <fieldset>
- <legend>News</legend>
- <div class="editor-label">
- @Html.LabelFor(model => model.Title)
- </div>
- <div class="editor-field">
- @Html.TextBoxFor(model => model.Title, new { style = "width:500px" })
- @Html.ValidationMessageFor(model => model.Title)
- </div>
- <div class="editor-label">
- @Html.LabelFor(model => model.Information)
- </div>
- <div class="editor-field">
- @Html.TextAreaFor(model => model.Information, new { style="width:800px;height:400px"})
- @Html.ValidationMessageFor(model => model.Information)
- </div>
- <p>
- <input type="submit" value="Create" />
- </p>
- </fieldset>
- }
- <div>
- @Html.ActionLink("返回列表", "Index")
- </div>
修改頁(yè)面一樣,Controller稍微有點(diǎn)修改:
- [HttpPost]
- [ValidateInput(false)]
- public ActionResult EditNews(NewsEntity news)
- {
- if (ModelState.IsValid)
- {
- news.Time = DateTime.Now;
- PE.Entry(news).State = EntityState.Modified;//修改
- PE.SaveChanges();
- return RedirectToAction("News");
- }
- return View(news);
- }
刪除Controller代碼:
- public ActionResult DeleteNews(int id)
- {
- var model = PE.NewsEntity.Find(id);
- PE.NewsEntity.Remove(model);
- PE.SaveChanges();
- return RedirectToAction("News");
- }
小弟剛接觸MVC3,本文也只是本人學(xué)習(xí)中的一點(diǎn)點(diǎn)積累。有很多不好的地方,希望大家多提意思。
原文:http://www.cnblogs.com/zhxhdean/archive/2012/03/12/2392575.html
【編輯推薦】