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辅助方法是我们主要构建表单的方式。

 

posted @   iLoop  阅读(473)  评论(0)  编辑  收藏  举报
编辑推荐：
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
阅读排行：
· 周边上新：园子的第一款马克杯温暖上架
· 分享 3 个 .NET 开源的文件压缩处理库，助力快速实现文件压缩解压功能！
· Ollama——大语言模型本地部署的极速利器
· DeepSeek如何颠覆传统软件测试？测试工程师会被淘汰吗？
· 使用C#创建一个MCP客户端
点击右上角即可分享
微信分享提示
SQL AI 助手