ASP.NET?MVC前臺動態(tài)添加文本框并在后臺使用FormCollection接收值
在"MVC批量添加,增加一條記錄的同時添加N條集合屬性所對應(yīng)的個體"中,對于前臺傳來的多個TextBox值,在控制器方法中通過強(qiáng)類型來接收。使用FormCollection也可以接收來自前臺的多個TextBox值。實現(xiàn)效果如下:
動態(tài)添加TextBox:
后臺使用FormCollection接收來自前臺的TextBox值,再以TempData把接收到的值返回:
當(dāng)頁面沒有TextBox,點擊"移除",提示"沒有文本框可被移除":
在HomeController中,先獲取前臺用來計數(shù)的隱藏域的值,然后遍歷,根據(jù)前臺Input的name屬性值的命名規(guī)則獲取到每個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>();//前端文本款的值放到這個集合 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)焦點 $('#textbox1').focus(); //點擊添加 $('#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ù)量賦值到用來計數(shù)隱藏域 $('#TextBoxCount').val(newCount); //把焦點轉(zhuǎn)移到新添加的文本框中來 $('#textbox' + newCount).focus(); }); //點擊移除 $('#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(); //把新的文本框計數(shù)賦值給隱藏域 var newCount = currentCount - 1; $('#TextBoxCount').val(newCount); }); }); </script> }
以上就是這篇文章的全部內(nèi)容了,希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,謝謝大家對腳本之家的支持。如果你想了解更多相關(guān)內(nèi)容請查看下面相關(guān)鏈接
- ASP.NET?MVC前臺動態(tài)添加文本框并在后臺使用FormCollection接收值
- 利用ASP.Net?Core中的Razor實現(xiàn)動態(tài)菜單
- ASP.NET?Core實現(xiàn)動態(tài)獲取文件并下載
- asp.net core為IHttpClientFactory添加動態(tài)命名配置
- ASP.NET Core奇淫技巧之動態(tài)WebApi的實現(xiàn)
- ASP.NET Core MVC如何實現(xiàn)運(yùn)行時動態(tài)定義Controller類型
- 1個文件如何輕松搞定Asp.net core 3.1動態(tài)頁面轉(zhuǎn)靜態(tài)頁面
- Asp.net mvc在view中用C#代碼動態(tài)創(chuàng)建元素
- ASP.Net動態(tài)讀取Excel文件最簡方法
- asp.net mvc 動態(tài)編譯生成Controller的方法
- asp.net動態(tài)生成HTML表單的方法
相關(guān)文章
ASP.NET 使用application與session對象寫的簡單聊天室程序
寫了快一年的asp.net,application對象還真沒怎么用過??戳丝磿?,根據(jù)這兩個對象的特性寫了一個簡單的聊天室程序。真的是非常的簡陋2014-07-07ASP.NET Core開發(fā)教程之Logging利用NLog寫日志文件
一直很喜歡 NLog 的簡潔和擴(kuò)展性,所以下面這篇文章主要給大家介紹了關(guān)于ASP.NET Core開發(fā)教程之Logging利用NLog寫日志文件的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2018-07-07ASP.NET AJAX 1.0 RC開發(fā)10分鐘圖解
12月15日,ASP.NET AJAX 1.0 RC版發(fā)布,我下載安裝試用了一下,沒有寫一行代碼,實現(xiàn)了一個簡單的AJAX應(yīng)用,以下為截圖說明。2008-03-03.NET Core中創(chuàng)建和使用NuGet包的示例代碼
這篇文章主要介紹了.NET Core中創(chuàng)建和使用NuGet包的示例代碼,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04