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 取得资料