ASP.NET MVC前台动态添加文本框并在后台使用FormCollection接收值
在"MVC批量添加,增加一条记录的同时添加N条集合属性所对应的个体"中,对于前台传来的多个TextBox值,在控制器方法中通过强类型来接收。使用FormCollection也可以接收来自前台的多个TextBox值。实现效果如下:
动态添加TextBox:

后台使用FormCollection接收来自前台的TextBox值,再以TempData把接收到的值返回:

当页面没有TextBox,点击"移除",提示"没有文本框可被移除":

在HomeController中,先获取前台用来计数的隐藏域的值,然后遍历,根据前台Input的name属性值的命名规则获取到每个TextBox的值。
public class HomeController : Controller
{
public ActionResult Index()
{
return View();
}
[HttpPost]
public ActionResult Index(FormCollection collection)
{
var inputCount = 0; //前端文本框的数量
var inputValues = new List<string>();//前端文本款的值放到这个集合
if (int.TryParse(collection["TextBoxCount"], out inputCount))
{
for (int i = 1; i <= inputCount; i++)
{
if (!string.IsNullOrEmpty(collection["textbox" + i]))
{
inputValues.Add(collection["textbox" + i]);
}
}
}
TempData["InputResult"] = inputValues;
return View();
}
}在Home/Index.cshtml中,通过jquery添加或移除TextBox。
@{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<div>
@if (TempData["InputResult"] != null)
{
<ul>
@foreach (var item in (List<string>) TempData["InputResult"])
{
<li>@item</li>
}
</ul>
}
</div>
@using (Html.BeginForm("Index", "Home", FormMethod.Post))
{
<div>
<div id="TextBoxesGroup">
<input type="text" id="textbox1" name="textbox1"/>
</div>
<hr/>
@Html.Hidden("TextBoxCount", 1)
<input type="button" value="添加" id="add"/>
<input type="button" value="移除" id="remove"/>
<input type="submit" value="提交"/>
</div>
}
@section scripts
{
<script type="text/javascript">
$(document).ready(function() {
//默认焦点
$('#textbox1').focus();
//点击添加
$('#add').click(function() {
//从隐藏域中获取当前文本框的数量
var currentCount = parseInt($('#TextBoxCount').val(), 10);
//文本框数量加1
var newCount = currentCount + 1;
//创建新的文本框
var newInput = $(document.createElement('Input')).attr({
"type": "text",
"id": "textbox" + newCount,
"name": "textbox" + newCount
});
//把新的文本框附加到区域中
$('#TextBoxesGroup').append(newInput);
//把当前文本框的数量赋值到用来计数隐藏域
$('#TextBoxCount').val(newCount);
//把焦点转移到新添加的文本框中来
$('#textbox' + newCount).focus();
});
//点击移除
$('#remove').click(function() {
//从隐藏域中获取当前文本框的数量
var currentCount = parseInt($('#TextBoxCount').val(), 10);
if (currentCount == 0) {
alert('已经没有文本框可以被移除了~~');
return false;
}
//移除当前文本框
$('#textbox' + currentCount).remove();
//把新的文本框计数赋值给隐藏域
var newCount = currentCount - 1;
$('#TextBoxCount').val(newCount);
});
});
</script>
}以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对脚本之家的支持。如果你想了解更多相关内容请查看下面相关链接
- ASP.NET MVC前台动态添加文本框并在后台使用FormCollection接收值
- 利用ASP.Net Core中的Razor实现动态菜单
- ASP.NET Core实现动态获取文件并下载
- asp.net core为IHttpClientFactory添加动态命名配置
- ASP.NET Core奇淫技巧之动态WebApi的实现
- ASP.NET Core MVC如何实现运行时动态定义Controller类型
- 1个文件如何轻松搞定Asp.net core 3.1动态页面转静态页面
- Asp.net mvc在view中用C#代码动态创建元素
- ASP.Net动态读取Excel文件最简方法
- asp.net mvc 动态编译生成Controller的方法
- asp.net动态生成HTML表单的方法
相关文章
ASP.NET(C#) 读取EXCEL另加解决日期问题的方法分享
这篇文章介绍了ASP.NET(C#) 读取EXCEL另加解决日期问题的方法,有需要的朋友可以参考一下2013-11-11
asp.net textbox javascript实现enter与ctrl+enter互换 文本框发送消息与换行(类似
今天与大家分享一下 asp.net textbox javascript实现enter与ctrl+enter互换 文本框发送消息与换行(类似于QQ),这个功能到底怎么实现?首先声明以下几点2012-01-01
ASP.NET批量操作基于原生html标签的无序列表的三种方法
无序列表被大量使用,ASP.NET虽然内置了BulletedList控件,用于创建和操作无序列表,但感觉不太好用2014-09-09
asp.net后台cs中的JSON格式变量在前台Js中调用方法(前后台示例代码)
本文主要介绍下asp.net后台cs中的JSON格式变量在前台Js中调用方法,下面是前后台的实现代码,感兴趣的朋友可以参考下哈,下对大家有所帮助2013-06-06


最新评论