博客

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

  • Post category:C#

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

在 ASP.NET MVC 中，可以通过前台动态添加文本框来收集用户输入的数据，并使用 FormCollection 对象在后台接收这些值。下面是详细的攻略：

步骤1：创建 ASP MVC 项目

在 Visual Studio 中创建名为“DynamicTextBoxDemo”的 ASP.NET MVC 项目。

步骤2：创建视图

在 Views 文件夹中创建为“Index.cshtml”的视图，并添加以下代码：

@model int

@using (Html.BeginForm("Submit", "Home"))
{
    <div id="textbox-container">
        @for (int i = 0; i < Model; i++)
        {
            <div>
                @Html.TextBox("textbox_" + i)
            </div>
        }
    </div>

    <button type="button" id="add-textbox">Add Textbox</button>
    <button type="submit">Submit</button>
}

@section scripts {
    <script>
        $(function () {
            var count = @Model;

            $('#add-textbox').click(function () {
                var textbox = $('<div><input type="text" name="textbox_' + count + '" /></div>');
                $('#textbox-container').append(textbox);
                count++;
            });
        });
    </script>
}

在这个视图中，我们使用 @model 指令指定了一个整数模型。在表单中，我们使用 @for 循环来动态文本框。每个文本框的名称都是 textbox_ 加上一个递增的数字。我们还添加了两个按钮，一个用于添加本框，另一个用于提交表单。在 @section scripts 中，我们使用 jQuery 来处理添加文本框的逻辑。

步骤3：创建控制器

在 Controllers 文件夹中创建名为“HomeController”的控制器，并添加以下代码：

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

    [HttpPost]
    public ActionResult Submit(FormCollection form)
    {
        foreach (string key in form.AllKeys)
        {
            if (key.StartsWith("textbox_"))
            {
                string value = form[key];
                // Do something with the value.
            }
        }

        return RedirectToAction("Index");
    }
}

在这个控制器中，我们创建了一个 Index() 方法，该方法返回一个整数模型。我们还创建了一个 Submit() 方法，该方法使用 FormCollection 对象接收表单数据。在 Submit() 方法中，我们遍历表单中的所有键，并检查它们是否以“textbox_”开头。如果是，我们获取该键的值，并对其进行处理。

示例1：使用 TextBoxFor 辅助方法

在视图中，我们可以使用 TextBoxFor 辅助方法来创建文本框。下面是一个使用 TextBoxFor 辅助方法的示例：

@model List<string>

@using (Html.BeginForm("Submit", "Home"))
{
    <div id="textbox-container">
        @for (int i = 0; i < Model.Count; i++)
        {
            <div>
                @Html.TextBoxFor(m => m[i])
            </div>
        }
    </div>

    <button type="button" id="add-textbox">Add Textbox</button>
    <button type="submit">Submit</button>
}

@section scripts {
    <script>
        $(function () {
            var count = @Model.Count;

            $('#add-textbox').click(function () {
                var index = count++;
                var textbox = $('<div><input type="text" name="[' + index + ']" /></div>');
                $('#textbox-container').append(textbox);
            });
        });
    </script>
}

在这个示例中，我们使用 @model 指令指定了一个字符串列表模型。在表单中，我们使用 @for 循环和 TextBoxFor 辅助方法来动态创建本框。我们还添加了两个按钮，一个用于添加文本框，另一个用于提交表单。在 @section scripts 中，我们使用 jQuery 来处理添加文本框的逻辑。

示例2：使用 EditorFor助方法

在视图中，我们还可以使用 EditorFor 辅助方法来创建文本框。下面是一个使用 EditorFor 辅助方法的示例：

@model List<string>

@using (Html.BeginForm("Submit", "Home"))
{
    <div id="textbox-container">
        @Html.EditorFor(m => m)
    </div>

    <button type="button" id="add-textbox">Add Textbox</button>
    <button type="submit">Submit</button>
}

@section scripts {
    <script>
        $(function () {
            var count = @Model.Count;

            $('#add-textbox').click(function () {
                var index = count++;
                var textbox = $('<div><input type="text" name="[' + index + ']" /></div>');
                $('#textbox-container').append(textbox);
            });
        });
    </script>
}

在这个示例中，我们使用 @model 指令指定了一个字符串列表模型。在表单中，我们使用 EditorFor 辅助方法来动态创建文本框。我们还添加了两个按钮，一个于添加文本框，另一个用于提交表单。在 @section scripts 中，我们使用 jQuery 来处理添加文本框的逻辑。

以上就是“ASP.NET MVC前台动态添加文本框并在后台使用FormCollection接收值”的整攻略，包括创建视图、创建控制器和两个示例。

Tags: