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

MVC动态添加文本框,后台使用FormCollection接收,古老的榕树,5-wow.com

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。