ASP.NET MVC前台动态添加文本框并在后台使用FormCollection接收值

ASP.NET MVC是一种针对Web应用程序的Web框架，它支持使用C#或VB.NET编程语言来创建动态、响应性的Web应用程序。本文将详细介绍如何在ASP.NET MVC前台动态添加文本框并在后台使用FormCollection接收值的过程。

准备工作

在开始本文的教程之前，你需要进行以下准备工作：

1. 首先，你需要安装Visual Studio 2017或更高版本来创建ASP.NET MVC项目。

2. 其次，你需要熟悉ASP.NET MVC框架的基础知识，比如控制器、视图和模型等。

实现过程

下面，我们将详细介绍如何实现在ASP.NET MVC前台动态添加文本框并在后台使用FormCollection接收值的过程。

示例一

首先，我们将创建一个简单的ASP.NET MVC项目，并创建一个控制器和一个视图。

创建控制器

打开Visual Studio，创建一个空的ASP.NET MVC项目。在解决方案资源管理器中，右键单击Controllers文件夹，并选择添加 -> 控制器。在“添加新项”对话框中，选择“MVC控制器类”的模板，并将控制器命名为“HomeController”，然后单击“添加”按钮。

在HomeController中添加以下代码：

public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View();
    }

    [HttpPost]
    public ActionResult Index(FormCollection form)
    {
        string[] inputs = Request.Form.GetValues("input");
        foreach (string input in inputs)
        {
            // 处理输入值
        }

        return View();
    }
}

此代码将HomeController定义为继承Controller类，并创建了两个动作方法：Index（默认为GET）和Index（为了处理POST请求）。 在处理POST请求时，我们使用FormCollection对象接收提交的表单数据，并使用GetValues方法获取名为“input”的表单元素的值。

创建视图

接下来，我们将创建一个简单的视图，允许用户在页面上添加文本框。

在Views文件夹中创建一个名为“Index.cshtml”的文件，并将以下代码添加到该文件中：

@using (Html.BeginForm())
{
    <div id="inputs"></div>

    <button type="button" onclick="addInput()">添加更多</button>
    <button type="submit">提交</button>
}

<script>
    var index = 0;

    function addInput() {
        var div = $('<div>');
        div.html('<input type="text" name="input-' + index + '" /><br>');
        $('#inputs').append(div);

        index++;
    }
</script>

此代码使用jQuery库动态添加文本框。当用户单击“添加更多”按钮时，它会使用addInput函数添加一个新的文本框到页面上，并使用“input-0”、“input-1”等名称对每个文本框进行命名。

运行应用程序

在Visual Studio中按F5运行项目，并进入Home/Index页面。单击“添加更多”按钮以添加更多文本框，并填写一些输入值。当你单击“提交”按钮时，你应该能够在第二个Index动作方法中找到提交的表单数据。

示例二

在示例二中，我们将使用ASP.NET MVC Razor帮助器和JavaScript来动态添加文本框，并在后台使用FormCollection接收值。

创建控制器

打开Visual Studio，创建一个空的ASP.NET MVC项目。在解决方案资源管理器中，右键单击Controllers文件夹，并选择添加 -> 控制器。在“添加新项”对话框中，选择“MVC控制器类”的模板，并将控制器命名为“PersonController”，然后单击“添加”按钮。

在PersonController中添加以下代码：

public class PersonController : Controller
{
    public ActionResult Index()
    {
        return View();
    }

    [HttpPost]
    public ActionResult Index(FormCollection form)
    {
        string[] inputs = Request.Form.GetValues("input");
        foreach (string input in inputs)
        {
            // 处理输入值
        }

        return View();
    }
}

这段代码与示例一中的控制器代码基本相同。

创建视图

接下来，我们将创建一个简单的视图，允许用户在页面上添加文本框。

在Views文件夹中创建一个名为“Index.cshtml”的文件，并将以下代码添加到该文件中：

@using (Html.BeginForm())
{
    <div id="inputs">
        @Html.TextBox("input-0")<br>
    </div>

    <button type="button" onclick="addInput()">添加更多</button>
    <button type="submit">提交</button>
}

<script>
    var index = 1;

    function addInput() {
        var div = $('<div>');
        var input = $('<input>').attr({
            "type": "text",
            "name": "input-" + index,
            "id": "input-" + index
        });
        div.append(input);
        div.append('<br>');
        $('#inputs').append(div);

        index++;
    }
</script>

该代码使用Razor帮助器生成第一个文本框，并使用jQuery库动态添加文本框。当用户单击“添加更多”按钮时，它会使用addInput函数添加一个新的文本框到页面上，并使用“input-1”、“input-2”等名称对每个文本框进行命名。

运行应用程序

在Visual Studio中按F5运行项目，并进入Person/Index页面。单击“添加更多”按钮以添加更多文本框，并填写一些输入值。当你单击“提交”按钮时，你应该能够在第二个Index动作方法中找到提交的表单数据。

总结

在本文中，我们介绍了如何在ASP.NET MVC前台动态添加文本框，并在后台使用FormCollection接收值的过程。我们提供了两个示例，每个示例都演示了如何使用不同的方法实现该过程。无论你使用哪种方法，这个过程都不会太困难，只需要一些基本的ASP.NET MVC知识和JavaScript知识即可。