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

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

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

在HomeController中,先獲取前臺(tái)用來(lá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中,通過(guò)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ù)量加1var 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ù)量賦值到用來(lái)計(jì)數(shù)隱藏域$("#TextBoxCount").val(newCount);//把焦點(diǎn)轉(zhuǎn)移到新添加的文本框中來(lái)$("#textbox" + newCount).focus(); }); //點(diǎn)擊移除 $("#remove").click(function() {//從隱藏域中獲取當(dāng)前文本框的數(shù)量var currentCount = parseInt($("#TextBoxCount").val(), 10);if (currentCount == 0) { alert("已經(jīng)沒(méi)有文本框可以被移除了~~"); 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)鏈接
相關(guān)文章:
1. ASP.NET MVC使用異步Action的方法2. ASP.Net MVC利用NPOI導(dǎo)入導(dǎo)出Excel的示例代碼3. 使用EF Code First搭建簡(jiǎn)易ASP.NET MVC網(wǎng)站并允許數(shù)據(jù)庫(kù)遷移4. ASP.NET MVC使用Session會(huì)話保持表單狀態(tài)5. ASP.NET MVC通過(guò)勾選checkbox更改select的內(nèi)容6. ASP.NET MVC遍歷驗(yàn)證ModelState的錯(cuò)誤信息7. ASP.NET MVC實(shí)現(xiàn)登錄后跳轉(zhuǎn)到原界面8. ASP.NET MVC使用jQuery ui的progressbar實(shí)現(xiàn)進(jìn)度條9. ASP.NET MVC實(shí)現(xiàn)樹形導(dǎo)航菜單10. ASP.NET MVC使用jQuery的Load方法加載靜態(tài)頁(yè)面及注意事項(xiàng)

網(wǎng)公網(wǎng)安備