0

我想在我的 MVC 添加/编辑表单中动态添加文本框。

我有一个名为“ Interests”的字段，用户应该能够通过单击“ Add another”文本框添加他/她喜欢的任意数量的兴趣。

这个，我可以用 JQuery 来做。

我想生成一个字符串，该字符串将具有来自上述字段“ Interests”的逗号分隔值。

假设用户添加了三个文本框，其值为网球、足球和棒球。我想将这些值组合成逗号分隔的字符串并将它们传递给Model.Interest我的用户模型中的字段之一。

有什么简单的方法可以做到这一点..

4

2 回答 2

3

它比这简单得多，只需在您的输入中添加一个 name='' 约定，mvc 的绑定器将获取这些值。

您实际上有两种选择... 1. name="textbox[0].Name" 等等。2. 创建您自己的 Binder，并根据需要绑定您的输入。你不必重新发明任何东西。

对不起，我花了这么长时间来编辑我的答案，这里是例子：模型：

public class Person
{
    public Person()
    {
        InterestList = new List<Interest>();
    }

    public IList<Interest> InterestList { get; set; }
}

public class Interest
{
    public string Name { get; set; }
}

粘合剂：

public class InterestListBinder: IModelBinder
{
    public object BindModel(ControllerContext controllerContext, 
        ModelBindingContext bindingContext)
    {
        var person = new Person();
        foreach (var i in controllerContext.RequestContext.HttpContext.Request.Form.AllKeys)
        {
            person.InterestList.Add(new Interest
                {
                    Name = controllerContext.RequestContext.HttpContext.Request.Form[i]
                });
        }
        return person;
    }
}

附加活页夹的 Global.asax

public class MvcApplication : System.Web.HttpApplication
{
    protected void Application_Start()
    {
        AreaRegistration.RegisterAllAreas();

        WebApiConfig.Register(GlobalConfiguration.Configuration);
        FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);
        RouteConfig.RegisterRoutes(RouteTable.Routes);
        ModelBinders.Binders.Add(typeof(Person), new InterestListBinder());
    }
}

控制器：

   public class HomeController : Controller
   {
        public ActionResult Index()
        {
            return View();
        }

        [HttpPost]
        public ActionResult Index(Person person)
        {
            return View("Index", person);
        }
    }

现在的观点：

@model Data.Services.DataBinders.Person



<div>
    <form action="@Url.Action("Index", "Home")" method="POST">
        @{
            if (Model != null && Model.InterestList.Any())
            {
                foreach (var tb in Model.InterestList)
                {
                    <input type="text" value="@tb.Name"/>
                }
            }
        }
        <input type="button" value="add" id="add" />
        <input type="button" value="remove" id="remove" />
        <input type="submit" value="Submit" />
    </form>
</div>

而生成动态输入的 javascript，您可以输入任何您喜欢的名称：

    <script>
    (function ($) {
        var demo = {
            init: function () {
                this.elements = null;
                this.cache();
                this.bindEvents();
                return this;
            },
            cache: function () {
                this.elements = new Array();
            },
            bindEvents: function () {
                $("#add").on("click", this.add);
                $("#remove").on("click", this.remove);
            },
            add: function () {
                var self = demo;
                var $elem = $("<input type='text' \>");
                self.elements.push($elem);
                self.render();
            },
            remove: function () {
                var self = demo;
                $.each(self.elements, function (index, elem) {
                    elem.remove();
                });
                self.elements.splice(0, 1);
                self.render();
            },
            render: function () {
                var self = demo;
                for (var e in self.elements) {
                    self.elements[e].attr("name", "Interest" + e);
                    $("form").append(self.elements[e]);
                }
                console.log(self.elements);
            }
        };
        window.load = demo.init();
    })(jQuery)
</script>
于 2013-02-22T04:31:15.077 回答
2

如果您的所有文本框都共享一个类txtInterestsToGrab，您可以将它们全部组合成一个逗号分隔的字符串，并将它们发布到一个名为的假设操作方法中。saveInterests

    var data = $('.txtInterestsToGrab').val().join(',');



    $.ajax({
        type: "POST",
        url: "/Stuff/saveInterests/",
        dataType: 'json',
        traditional: true,
        data: data,
        success: function () {
        }
    });

如果您决定不使用逗号分隔的字符串，而是使用列表（我强烈推荐）

    var data = $('.txtInterestsToGrab').val();
于 2013-02-22T04:25:35.580 回答