ASP.NET?MVC前臺(tái)動(dòng)態(tài)添加文本框并在后臺(tái)使用FormCollection接收值
在"MVC批量添加,增加一條記錄的同時(shí)添加N條集合屬性所對(duì)應(yīng)的個(gè)體"中,對(duì)于前臺(tái)傳來的多個(gè)TextBox值,在控制器方法中通過強(qiáng)類型來接收。使用FormCollection也可以接收來自前臺(tái)的多個(gè)TextBox值。實(shí)現(xiàn)效果如下:
動(dòng)態(tài)添加TextBox:

后臺(tái)使用FormCollection接收來自前臺(tái)的TextBox值,再以TempData把接收到的值返回:

當(dāng)頁面沒有TextBox,點(diǎn)擊"移除",提示"沒有文本框可被移除":

在HomeController中,先獲取前臺(tái)用來計(jì)數(shù)的隱藏域的值,然后遍歷,根據(jù)前臺(tái)Input的name屬性值的命名規(guī)則獲取到每個(gè)TextBox的值。
public class HomeController : Controller
{
public ActionResult Index()
{
return View();
}
[HttpPost]
public ActionResult Index(FormCollection collection)
{
var inputCount = 0; //前端文本框的數(shù)量
var inputValues = new List<string>();//前端文本款的值放到這個(gè)集合
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() {
//默認(rèn)焦點(diǎn)
$('#textbox1').focus();
//點(diǎn)擊添加
$('#add').click(function() {
//從隱藏域中獲取當(dāng)前文本框的數(shù)量
var currentCount = parseInt($('#TextBoxCount').val(), 10);
//文本框數(shù)量加1
var newCount = currentCount + 1;
//創(chuàng)建新的文本框
var newInput = $(document.createElement('Input')).attr({
"type": "text",
"id": "textbox" + newCount,
"name": "textbox" + newCount
});
//把新的文本框附加到區(qū)域中
$('#TextBoxesGroup').append(newInput);
//把當(dāng)前文本框的數(shù)量賦值到用來計(jì)數(shù)隱藏域
$('#TextBoxCount').val(newCount);
//把焦點(diǎn)轉(zhuǎn)移到新添加的文本框中來
$('#textbox' + newCount).focus();
});
//點(diǎn)擊移除
$('#remove').click(function() {
//從隱藏域中獲取當(dāng)前文本框的數(shù)量
var currentCount = parseInt($('#TextBoxCount').val(), 10);
if (currentCount == 0) {
alert('已經(jīng)沒有文本框可以被移除了~~');
return false;
}
//移除當(dāng)前文本框
$('#textbox' + currentCount).remove();
//把新的文本框計(jì)數(shù)賦值給隱藏域
var newCount = currentCount - 1;
$('#TextBoxCount').val(newCount);
});
});
</script>
}以上就是這篇文章的全部?jī)?nèi)容了,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,謝謝大家對(duì)腳本之家的支持。如果你想了解更多相關(guān)內(nèi)容請(qǐng)查看下面相關(guān)鏈接
- ASP.NET?MVC前臺(tái)動(dòng)態(tài)添加文本框并在后臺(tái)使用FormCollection接收值
- 利用ASP.Net?Core中的Razor實(shí)現(xiàn)動(dòng)態(tài)菜單
- ASP.NET?Core實(shí)現(xiàn)動(dòng)態(tài)獲取文件并下載
- asp.net core為IHttpClientFactory添加動(dòng)態(tài)命名配置
- ASP.NET Core奇淫技巧之動(dòng)態(tài)WebApi的實(shí)現(xiàn)
- ASP.NET Core MVC如何實(shí)現(xiàn)運(yùn)行時(shí)動(dòng)態(tài)定義Controller類型
- 1個(gè)文件如何輕松搞定Asp.net core 3.1動(dòng)態(tài)頁面轉(zhuǎn)靜態(tài)頁面
- Asp.net mvc在view中用C#代碼動(dòng)態(tài)創(chuàng)建元素
- ASP.Net動(dòng)態(tài)讀取Excel文件最簡(jiǎn)方法
- asp.net mvc 動(dòng)態(tài)編譯生成Controller的方法
- asp.net動(dòng)態(tài)生成HTML表單的方法
相關(guān)文章
ASP.NET 使用application與session對(duì)象寫的簡(jiǎn)單聊天室程序
寫了快一年的asp.net,application對(duì)象還真沒怎么用過。看了看書,根據(jù)這兩個(gè)對(duì)象的特性寫了一個(gè)簡(jiǎn)單的聊天室程序。真的是非常的簡(jiǎn)陋2014-07-07
ASP.NET Core開發(fā)教程之Logging利用NLog寫日志文件
一直很喜歡 NLog 的簡(jiǎn)潔和擴(kuò)展性,所以下面這篇文章主要給大家介紹了關(guān)于ASP.NET Core開發(fā)教程之Logging利用NLog寫日志文件的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2018-07-07
asp.net repeater實(shí)現(xiàn)批量刪除
asp.net repeater實(shí)現(xiàn)批量刪除實(shí)現(xiàn)效果代碼2009-03-03
ajax.net對(duì)數(shù)據(jù)庫的插入實(shí)例
ajax.net對(duì)數(shù)據(jù)庫的插入實(shí)例,需要的朋友可以參考一下2013-04-04
ASP.NET AJAX 1.0 RC開發(fā)10分鐘圖解
12月15日,ASP.NET AJAX 1.0 RC版發(fā)布,我下載安裝試用了一下,沒有寫一行代碼,實(shí)現(xiàn)了一個(gè)簡(jiǎn)單的AJAX應(yīng)用,以下為截圖說明。2008-03-03
.NET Core中創(chuàng)建和使用NuGet包的示例代碼
這篇文章主要介紹了.NET Core中創(chuàng)建和使用NuGet包的示例代碼,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
C#實(shí)現(xiàn)Web文件上傳的兩種方法實(shí)例代碼
在Web編程中,我們常需要把一些本地文件上傳到Web服務(wù)器上,上傳后,用戶可以通過瀏覽器方便地瀏覽這些文件,應(yīng)用十分廣泛。2013-07-07

