zoukankan      html  css  js  c++  java
  • ASP.NET MVC轻教程 Step By Step 6——改进表单

    上一节我们使用原始的HTML表单来完成留言功能,但是ASP.NET MVC提供了丰富的HTML辅助方法来帮助我们构建更简洁优雅的表单。

    Step 1. 修改Form标签

    首先,我们可以使用Html.BeginForm来创建form标签。这样我们可以将原来的表单改成如下代码。

        @{Html.BeginForm("Save", "Home"); }
            <label for="nickname">昵称</label>
            <input name="nickname" type="text" />
            <br /><br />
            <label for="content">内容</label>
            <textarea name="content" cols="50" rows="5" ></textarea>
            <br /><br />
            <input type="submit" value="提交" />
        @{Html.EndForm();}

    这里使用的Html.BeginForm方法的原型是Html.BeginForm(string actionName,string controllerName)。之前代码<form action="/Home/Save" method="post">中action的值是写死在Html里面的,原本这样做并没有什么问题,可是在ASP.NET MVC中网址Url是可以通过路由规则修改的,写死了对我们后期修改不利,使用这个辅助方法的好处是避免这一点。注意Html.BeginForm和Html.EndForm我们要语句方式调用,所以要加“;”和大括号。当然这样会显得不简洁,所以通常可以使用using语句,如下。

        @using (Html.BeginForm("Save", "Home"))
        { 
            <label for="nickname">昵称</label>
            <input name="nickname" type="text" />
            <br /><br />
            <label for="content">内容</label>
            <textarea name="content" cols="50" rows="5" ></textarea>
            <br /><br />
            <input type="submit" value="提交" />
        }

    Step 2. 改进表单标签

    表单中的label标签和input标签同样可以改用Html辅助方法,来看代码。

        @using (Html.BeginForm("Save", "Home"))
        {
            @Html.Label("nickname","昵称")
            @Html.TextBox("nickname")
            <br /><br />
            @Html.Label("content","内容")
            @Html.TextArea("content", "",5,50,null)
            <br /><br />
            <input type="submit" value="提交" />
        }

     Html.Label和Html.TextBox可以生成之前表单近乎相同的HTML标签。表单标签我们都可以使用Html辅助方法,它们之间的对应关系见下表。

    <label> Html.Label
    <input type="text"> Html.TextBox
    <textarea> Html.TextArea
    <select>

    Html.DropDownList和Html.ListBox

    <input type="hidden"> Html.Hidden
    <input type="password> Html.Password
    <input type="radio"> Html.RadioButton
    <input type="checkbox"> Html.CheckBox

    可见Html辅助方法可以让我们使用原本在ASP.NET编程就熟悉的控件名称。

    Step 3. 使用强类型视图

    在设计Index视图的时候,我们已经了解使用强类型的好处。在Write视图同样也应该使用强类型。

    首先在Write视图顶部加上@model MessageBoard.Models.Message,接下来就可以使用强类型辅助方法替换先前的辅助方法。强类型辅助方法名称是辅助方法名加上后缀“For”,如Html.Label的强类型是Html.LabelFor。替换后的代码如下。

    @model MessageBoard.Models.Message
    
    @{
        Layout = null;
    }
    
    <!DOCTYPE html>
    
    <html>
    <head>
        <meta name="viewport" content="width=device-width" />
        <title>Write</title>
    </head>
    <body>
        <h1>MVC留言板</h1>
        @using (Html.BeginForm("Save", "Home"))
        {
            @Html.LabelFor(m=>m.NickName,"昵称")
            @Html.TextBoxFor(m => m.NickName)
            <br /><br />
            @Html.LabelFor(m => m.Content,"内容")
            @Html.TextAreaFor(m => m.Content,5,50,null)
            <br /><br />
            <input type="submit" value="提交" />
        }
    </body>
    </html>

    强类型Html辅助方法使用lambda表达式来代替name字符串,这样做主要有两个好处:一是写代码时可以有代码提示;二是代码重构的时候可以自动修改。所以强类型Html辅助方法是我们主要构建表单的方式。

  • 相关阅读:
    Python——项目-小游戏_正式的进入开发阶段_1阶段 主程序&背景移动
    Ajax-使用教程
    JavaScript——类还有对象
    Python——项目-小游戏3-精灵?蓝精灵?
    Python——项目-小游戏2-动画绘制
    jQuery——有关于jQuery操作 属性,元素,还有尺寸位置等
    Python——项目-小游戏
    jQuery入门
    JavaScript——WEBAPIS_有关于移动端特效,还有本地存储
    性能优化之Angular前端优化总结
  • 原文地址:https://www.cnblogs.com/nivi3000/p/4954844.html
Copyright © 2011-2022 走看看