本文地址:http://www.cnblogs.com/outtamyhead/archive/2013/04/02/2995492.html ,轉載需保留本地址
說在前面:
1、由於是頭次翻譯整本書籍,所以錯誤難免,希望大家都提出來,翻譯的不好還望大家少拍磚多鼓勵。
2、該系列沒有按照原文直譯,而是加入了我的一些言語在里面(在沒有改變原意的情況下),所以大家在看的時候希望有所對照。
3、該系列每周出一或二篇博客,因為我最近很忙,一直在加班,很累的說。
4、該系列不提供原版文字,希望看原版的可以自行下載Pdf。
5、該系列省去了前面的廢話,單刀直入,講主體內容。
第二章完結
第二章:第一個ASP.NET MVC4程序(下三)
高亮無效字段
生成文本框、下拉列表、以及其它元素的HTML輔助方法有一個十分靈活的特性,那就是可以用來與模型綁定相關聯。與保留用戶在表單中輸入的數據同樣的機制也可以用來高亮驗證檢查失敗的字段。
當模型類中的屬性驗證失敗時,HTML輔助方法會生成一個稍微不同的HTML內容。例如,以下是Html.TextBoxFor(x =>x.Name)在沒有驗證錯誤時生成的HTML:
<input data-val="true" data-val-required="Please enter your name" id="Name" name="Name" type="text" value="" />
下面是當用戶沒有給Name屬性賦值時生成的HTML(因為我們在GuestResponse模型類的Name屬性上加上了Required特性):
<input class="input-validation-error" data-val="true" data-val-required="Please enter your name" id="Name" name="Name" type="text" value="" />
我們把不同的地方高亮顯示了。這個輔助方法添加了一個叫做inputvalidation-error類。我們可以為這個CSS類創建一個包含CSS樣式的樣式表來利用這個功能,同樣其他HTML輔助方法也同樣適用。
在MVC的約定中,像CSS樣式表這樣的靜態內容要放在【Content】文件夾中。我們可以通過在解決方案瀏覽器中在PartyInvites項目上右鍵選擇【Add】--【New Folder】。我們通過在【Content】文件夾上右鍵選擇【Add】--【New Item】,然后在【Add New Item】對話框中選擇【Style Sheet】項來創建樣式表。我們把我們的樣式表叫做Site.css,當你在Visual Studio中使用不是Empty模板的其他MVC模板來創建項目時都會看到這個名字(言外之意就是說Site.css樣式表是除了Empty模板之外,其他模板自帶的樣式表)。你可以在清單2-19中看到Site.css中的內容。
清單2-19
.field-validation-error {color: #f00;} .field-validation-valid { display: none;} .input-validation-error { border: 1px solid #f00; background-color: #fee; } .validation-summary-errors { font-weight: bold; color: #f00;} .validation-summary-valid { display: none;}
為了使用這個樣式表,我們在RsvpForm視圖的head中添加一個新引用,如清單2-20所示。
清單2-20
@model PartyInvites.Models.GuestResponse @{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <link rel="stylesheet" type="text/css" href="~/Content/Site.css" /> <title>RsvpForm</title> </head> <body> @using (Html.BeginForm()) { @Html.ValidationSummary() <p>Your name: @Html.TextBoxFor(x => x.Name) </p> <p>Your email: @Html.TextBoxFor(x => x.Email)</p> <p>Your phone: @Html.TextBoxFor(x => x.Phone)</p> <p> Will you attend? @Html.DropDownListFor(x => x.WillAttend, new[] { new SelectListItem() {Text = "Yes, I'll be there", Value = bool.TrueString}, new SelectListItem() {Text = "No, I can't come", Value = bool.FalseString} }, "Choose an option") </p> <input type="submit" value="Submit RSVP" /> } </body> </html>
提示:如果你用過MVC3,你也許會期待我們以href特性像@Href("~/Content/Site.css")或者@Url.Content("~/Content/Site.css")的方式在視圖中添加CSS文件。在MVC4中,Razor自動檢查哪些以~/開始的特性並且自動插入@Href或者@URL。
現在一個視覺上更加明顯的錯誤驗證會被顯示出來當我們提交的數據觸發一個驗證錯誤,如圖2-20
完善這個示例
我們這個簡單應用程序的最后一個要求是給我們的朋友發送電子郵件來結束RSVP。我們可以通過利用在.NET Framework中的e-mail類來添加一個動作方法來創建和發送一封電子郵件。這里,我們打算使用WebMail輔助方法。它不是MVC框架的一部分,但是它可以讓我們完成這個例子,而不必為了設立發送郵件的方式而苦惱。
注解:我們使用WebMail方法是因為它可以很方便的發送電子郵件。然而,我們會很典型的把這個功能放在一個動作方法里。我們會在第三章闡釋MVC架構模式時解釋為什么。
我們打算在我們渲染Thanks視圖時發送電子郵件信息。清單2-21列出了我們需要添加的修改。
清單2-21
@model PartyInvites.Models.GuestResponse @{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>Thanks</title> </head> <body> @{ try { WebMail.SmtpServer = "smtp.example.com"; WebMail.SmtpPort = 587; WebMail.EnableSsl = true; WebMail.UserName = "mySmtpUsername"; WebMail.Password = "mySmtpPassword"; WebMail.From = "rsvps@example.com"; WebMail.Send("party-host@example.com", "RSVP Notification", Model.Name + " is " + ((Model.WillAttend ?? false) ? "" : "not") + "attending"); } catch (Exception) { @:<b>Sorry - we couldn't send the email to confirm your RSVP.</b> } } <div> <h1>Thank you, @Model.Name!</h1> @if (Model.WillAttend == true) { @:It's great that you're coming. The drinks are already in the fridge! } else { @:Sorry to hear that you can't make it, but thanks for letting us know. } </div> </body> </html>
我們使用WebMail輔助方法來配置我們電子郵件服務器的信息,包括服務器名稱,服務器是否需要SSL連接和賬號信息,並把這些配置信息放在了Razor表達式中。一旦我們配置好了所有內容,我們就可以通過WebMail.Send方法發送郵件了。
我們把與電子郵件相關的代碼都放在了try...catch塊里,因此如果郵件沒有發送出去,我們可以彈出信息告訴用戶。我們通過添加一個文本塊在Thanks視圖的輸出來實現這個功能。當郵件信息發送失敗,一個展現信息的更好的途徑是添加一個錯誤頁視圖,但是我們還是希望在我們第一個MVC應用程序中使事情保持簡單。
總結
在這一章里,我們創建了一個新的MVC項目並用它構造了一個簡單MVC數據錄入的應用程序,讓你大概了解了MVC框架的結構和方法。我們跳過了一些關鍵功能(包括Razor語法,路由和自動化測試),但是我們會在后面的章節中深入的了解它們。
在下一章中,我們將探察MVC結構,設計模式和本書中要用到的技術。
--------------------------------------我是分割線----------------------------------------------------
終於沒有食言,保持着每周一到二次的更新。同樣還是前面那些話,在翻譯的不好的地方希望大家都幫我提出來,大家一起學習。另外,如果你喜歡這個系列,就點一下右下角的【推薦】吧~~
關於本書的目錄正在整理中...
--------------------------------------我是分割線----------------------------------------------------