使用 ASP.NET MVC 5 创建表单

引言

当我刚开始使用 ASP.NET MVC 开发 Web 应用程序时，我在学习如何创建表单方面遇到了困难。尽管我的表单能够工作（感谢 Ctrl-c Ctrl-v），但它们远非可扩展，而且我也不确定它们是如何工作的。这篇入门文章的目的是帮助指导初学者创建表单。我们将讨论四种类型的表单：

• 弱类型同步表单
• 强类型同步表单
• 强类型 AJAX 表单
• 使用 jQuery 和 AJAX 提交表单数据

为了增强您的学习体验，您可以 Fork 这四个表单示例，并在阅读本文的同时进行实验：https://github.com/NanoBreeze/CodeProject-Creating-Forms-in-ASP.NET-MVC-5。

如果您已经有创建表单的经验，可以查看 延伸阅读 部分，了解关于表单更全面的细节。

背景

每个表单包含三个基本元素：一个 <form> 元素，用户可以输入内容的 <input> 元素，以及某种提交按钮。

在我们的示例中，每个表单都包含一个 checkbox，一个用于 string 的 textbox，以及一个用于数字的 textbox，因为这些是最常用的 <input> 元素。

安装

我们创建一个新的控制器、视图和模型（实际上是一个包含自动实现的属性的类。模型将用于强类型表单示例）。我们将控制器命名为“Form”（这将在 Controllers 文件夹中创建一个名为“FormController.cs”的新文件），并为其 Index 操作方法添加一个视图。

接下来，我们在 Model 文件夹中创建一个名为“FormData.cs”的类（您实际上可以将该类放在任何位置，但按照惯例，我们将其放在 Model 文件夹中），其属性将存储用户的输入。

namespace LearningForms.Models
{
    public class FormData
    {
        public string TextBoxStringData { get; set; }

        public int TextBoxIntData { get; set; }

        public bool CheckboxData { get; set; }
    }
}

弱类型同步表单

这是提交表单最快的方式。每个 <input> 的名称必须匹配表单提交到的方法的某个参数名称。用户在 <input> 元素中输入的字符或数字将成为 <input> 的 value 属性的一部分，由于 <input> 的值是通过匹配名称从客户端传递到服务器的，请确保没有拼写错误。

客户端（~/Views/Forms/Index.cshtml）

<form action="/Form/FormOne" method="post">
    <input type="text" name="textBoxStringData" />
    <input type="checkbox" name="checkboxData" />
    <input type="number" name="textBoxIntData" />

    <input type="submit" value="Submit weakly typed form" />
</form>

注释

• <form> 元素。这是所有与表单相关的元素（包括 <input>）的父元素。
  • action 指示表单提交到的方法（也称为将接收用户在提交表单前输入的 <input> 元素值的那个方法）。
  • method 指定我们使用的 HTTP 动词。将 method="post" 设置为确保此表单中的信息只能从表单或 JavaScript 发送到服务器，而不能从 URL 发送。您可以在这里了解更多关于 HTTP 动词的知识。此处。
• <input> 元素。用户通过输入元素输入数据。
  • type 指示输入接受的数据类型。例如：textbox、checkbox、单选按钮、提交按钮。
  • name 非常重要，它必须与表单提交到的方法的参数名称匹配。

服务器

在 FormController.cs 中创建一个名为 FormOne 的新方法，该方法接受参数，其名称与 <input> 元素的名称完全相同。我们还为该方法提供一个 [HttpPost] 属性。

[HttpPost]
public void FormOne(string textBoxStringData, int textBoxIntData, string checkboxData)
{
    //Do something
}

注释

• 参数名称。这些名称必须与 <input> 名称完全相同。如果不同，<input> 的值将不会传递到 FormOne。
• [HttpPost] 属性。确保此表单中的信息只能从 <form> 或 JavaScript 发送到服务器，而不能从 URL 发送。这就是为什么我们在 <form> 元素中设置了 method="post"。
• Checkbox。如果 checkbox 被选中，checkboxData 的值将是 "on"。如果未选中，其值将是 null。您可能会惊讶地发现我们将 checkboxData 的数据类型设置为 string 而不是 bool。这是因为如果 checkboxData 是 bool 类型，系统将抛出异常；如果 checkboxData 是 bool? 类型，无论是否选中，其值将始终为 null。

后续步骤

在用户提交表单后，页面通常会重定向到另一个页面。我们可以将 FormOne 的返回类型更改为 ActionResult，并返回一个 RedirectToAction(“ActionName”); 来将用户重定向到另一个页面。您可以查看本文的源代码示例。

强类型同步表单

在强类型表单中，我们从客户端向服务器传递一个对象（模型），其属性包含 <input> 的值，而不是传递多个原始类型。使用强类型表单的一个优点是更易于维护。与弱类型表单不同，不太可能发生拼写错误。此外，表单提交到的方法参数更少。

客户端

客户端使用 HTML Helper 来表示 <form> 和 <input> 元素。我们还在文件顶部包含模型对象。

@using (Html.BeginForm("FormTwo", "Form", FormMethod.Post))
{
    @Html.TextBoxFor(m => m.TextBoxStringData)
    @Html.CheckBoxFor(model => model.CheckboxData)
    @Html.TextBoxFor(model => model.TextBoxIntData)

    <input type="submit" value="Submit strongly type synchronous form" />
}

注释

• @model. 通用语法是 @model 命名空间.类名。这里，FormData 是从客户端传递到服务器的对象。为了将 <input> 的值赋给 FormData 的属性，我们使用...
• HTML Helper（例如，Html.BeginForm 和 @Html.TextBoxFor( m=> m.TextBoxStringData)）。
  • Html.BeginForm(...)。当在网页上渲染时，它实际上会显示为一个 <form> 元素。BeginForm 的前两个参数是方法名称和
  • @Html.TextBoxFor(m => m.TextBoxStringData)。我知道你在想什么：为什么是这个参数？是的，我也是这么想的。这个参数是一个lambda 表达式，它基本上意味着 m 是我们的模型对象（Forms.Models.FormData）的实例，而 <input> 的值存储在 Forms.Models.FormData.TextBoxStringData 中。

服务器

在 FormController.cs 中创建一个名为 FormTwo 的新方法。

[HttpPost]
public void FormTwo(Models.FormData formData)
{
    //Do something with formData
}

注释

• FormTwo 有一个参数，其类型是我们的模型对象！这比使用弱类型表单更方便，因为如果我们稍后决定在 <form> 中添加另一个 <input>，我们只需向 FormData 添加另一个属性，并向 Html.BeginForm 添加一个 HTML Helper，而无需更改 FormTwo 中的参数。

强类型异步表单

我们将强类型表单的优点与 AJAX 结合起来。这与强类型同步表单类似。

客户端

@using (Ajax.BeginForm("FormThree", "Form", 
	new AjaxOptions { LoadingElementId = "loader", OnSuccess = "onSuccess" }))
{
    @Html.TextBoxFor(m => m.TextBoxStringData)
    @Html.CheckBoxFor(m => m.CheckboxData)
    @Html.TextBoxFor(m => m.TextBoxIntData)

    <input type="submit" value="Submit strongly typed asynchronous form" />
}

<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>

注释

• Ajax.BeginForm(…)。前两个参数与 Html.BeginForm 相同。第三个参数包含有关我们的 AJAX 请求的信息，例如 AJAX POST 成功完成后要调用的 JavaScript 函数。
• jQuery 脚本。请记住包含 jQuery 以及 jQuery unobtrusive Ajax，可以通过在包管理器中输入以下命令来安装：

Install-Package jQuery.Ajax.Unobtrusive

确保包含 jQuery 的脚本放在包含 jQuery unobtrusive ajax 的脚本之上。

服务器

与强类型同步表单相同。

[HttpPost]
public void FormThree(Models.FormData formData)
{
    //Do something with formData
}

后续步骤

在服务器处理 AJAX POST 的过程中，我们可以显示一个对话框。

将 LoadingElementId = "loader" 添加为 AjaxOptions 的属性。

然后，将以下内容放在同一文件中的某个位置：

<div id="loader" style="display:none">
   Loading...
</div>

当表单被提交并由服务器处理时，屏幕上将显示“Loading...”字样。

使用 jQuery 和 AJAX 提交数据

在此示例中，我们将使用一些 JavaScript。使用 jQuery 提交数据的一个优点是数据不限于 <input>。它们也可以是 <p> 的文本或元素的类名。

客户端

<input type="text" id="text" />
<input type="checkbox" id="checkbox" />
<input type="number" id="number" />

<button onclick="submit()">Post with jQuery AJAX</button>

<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script>

    //submit data with jQuery AJAX
    function submit() {
        var data = {
            TextBoxStringData: $('#text').val(),
            TextBoxIntData: $('#number').val(),
            CheckboxData: $('#checkbox').is(':checked')
        };

        $.post("/Form/FormFour", { formData: data }, 
		function () { alert('Successfully posted to server') });
    }

注释

• $.post(…)。这会执行一个 AJAX POST。第一个参数是表单提交到的方法的路径；第二个参数是要提交的对象（如模型）；第三个是一个回调函数，如果 POST 成功则执行。
• 确保 $.post(...) 中第二个参数的属性与表单提交到的方法中的 FormData 参数的名称相等。此外，请确保数据的属性名称与 FormData 的属性名称完全相同。

服务器

[HttpPost]
public void FormFour(Models.FormData formData)
{
    //Do something with formData
}

延伸阅读

• ASP.NET MVC 模型绑定：复杂对象和集合
• ASP.NET MVC 客户端验证
• Knockout JS、复杂表单和 ASP.NET MVC

感谢阅读！希望本文能帮助您更深入地理解在 MVC 5 中创建表单。