zoukankan      html  css  js  c++  java
  • 【译】《Pro ASP.NET MVC4 4th Edition》第二章(五)

       本文地址: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结构,设计模式和本书中要用到的技术。

    --------------------------------------我是分割线----------------------------------------------------

      终于没有食言,保持着每周一到二次的更新。同样还是前面那些话,在翻译的不好的地方希望大家都帮我提出来,大家一起学习。另外,如果你喜欢这个系列,就点一下右下角的【推荐】吧~~

      关于本书的目录正在整理中...

    --------------------------------------我是分割线----------------------------------------------------




    文章作者:禁止吸烟

    道本无话可说,皆当全力以赴。

    博客地址:http://www.cnblogs.com/outtamyhead/

  • 相关阅读:
    asp.net 数据导出到Excel
    系统架构之畅想
    access2003绿色中文版(转)
    项目那点事(共享)
    不错的消息提示
    配置Windows media service 流媒体服务器
    MemberShip 数据库的安装,web.config的配置及数据库文档结构
    windows server 2003 service pack 2 无法安装...产品密钥可能无效
    残忍,人
    js小技巧鼠标滑过显示大图
  • 原文地址:https://www.cnblogs.com/outtamyhead/p/2995492.html
Copyright © 2011-2022 走看看