下面是“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
循环来动态文本框。每个文本框的名称都是 _
加上一个递增的。我们还添加了两个按钮,一个用于添加本框,另用于提交表单。在 @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 (HtmlForm("Submit", "Home"))
{
< 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接收值”的完整使用攻略,包括创建视图、创建控制器和两个示例。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:ASP.NET MVC前台动态添加文本框并在后台使用FormCollection接收值 - Python技术站