ASP.NET MVC动态表单 [英] ASP.NET MVC Dynamic Forms

问题描述

任何人都可以建议动态下发展与形式ASP.NET MVC的好办法？

我已经在页面上级联下拉菜单（在下拉选项取决于价值，在previous下拉列表中选择）。

的所有值来从数据库中。

我

如何使用ASP.NET MVC实现这样的行为？

我当然希望收到控制器的所有值时，我提交表单。

解决方案

如果您需要在您的形式的动态领域，为您提供最好的方法是使用类似的角，骨干，的淘汰赛等。

如果你需要的东西或多或少简单，它是足够你使用淘汰赛。对于更高级的场景我会建议角，但是这是我个人的preference。

下面是一个简单的实现与淘汰赛动态的形式是：

\r

\r

VAR模型= {\r
    用户：ko.observableArray（），\r
    ADDUSER：功能（）{\r
        this.users.push（{名称：ko.observable（）}）;\r
    }\r
};\r
\r
ko.applyBindings（模型）;

\r

＆LT;脚本SRC =htt​​ps://cdnjs.cloudflare.com/ajax /libs/knockout/3.2.0/knockout-min.js\"></script>\r
＆LT; D​​IV数据绑定=的foreach：用户＆GT;\r
    ＆LT;输入类型=文本数据绑定=值：名/＆GT;＆LT; BR /＆GT;\r
＆LT; / DIV＆GT;\r
＆LT;按键数据绑定=点击：ADDUSER＆gt;添加用户LT; /按钮＆GT;\r
\r
＆LT; UL数据绑定=的foreach：用户＆GT;\r
    ＆LT;李数据绑定=TEXT：名称＆GT;＆LT; /李＆GT;\r
＆LT; / UL＆GT;

\r

\r

\r

现在，关于ASP.NET MVC？

这是更加棘手。也许是最好的和最简单的方法是使用Ajax和JSON发布到ASP.NET MVC行动。首先，你需要从你的形式得到一个JSON对象。随着淘汰赛这是非常简单的：

  VAR JSON = ko.toJSON（模型）;
 

现在，当我们知道如何从形式得到JSON，下一步是将数据发送到一个动作。 jQuery的非常适合：

  $。阿贾克斯（{
    键入：POST，
    网址：@ Url.Action（ADDUSER），
    数据：ko.toJSON（模型）。用户，//序列化到JSON，并采取用户阵
    接受：应用/ JSON，
    成功：功能（数据）{警报（完成！）; } //您的成功回调
}）;
 

在我们的例子中，我们基本上是发送一个字符串数组，从而ASP.NET MVC的行动看起来应该是：

  [HttpPost]
公共JsonResult ADDUSER（列表＆LT;串GT;用户）
{
    返回JSON（数据）; //返回的东西
}
 

这绝对不是如何实现动态表单的只有一个选择，但我认为这是pretty有效。希望它帮助。

Can anyone suggest a good way to develope dynamic forms with ASP.NET MVC?

I have cascading dropdowns on the page (options in the dropdown depends on the value, selected in the previous dropdown).

All the values come from the database.

How can I implement such behavior using ASP.NET MVC?

Of course I'd like to receive all the values in the controller when I submit my form.

解决方案

If you need to have some dynamic fields in your form, the best way for you would be to use some advanced javascript frameworks like Angular, Backbone, Knockout etc.

If you need something more or less simple it is enough for you to use Knockout. For more advanced scenarios I would recommend Angular, but this is my personal preference.

Here is a simple implementation of a dynamic form with Knockout:

var model = {
    users: ko.observableArray(),
    addUser: function() {
        this.users.push({ name: ko.observable() });
    }
};

ko.applyBindings(model);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<div data-bind="foreach: users">
    <input type="text" data-bind="value: name" /><br />
</div>
<button data-bind="click: addUser">Add user</button>

<ul data-bind="foreach: users">
    <li data-bind="text: name"></li>
</ul>

Now, what about ASP.NET MVC?

This is more tricky. Perhaps the best and the easiest way would be to use Ajax and post JSON to ASP.NET MVC Action. First of all, you'll need to get a JSON object from your form. With knockout it's very simple:

var json = ko.toJSON(model);

Now, when we know how to get JSON from form, next step is to send your data to an Action. jQuery is perfect for that:

$.ajax({
    type: "POST", 
    url: "@Url.Action("AddUser")",
    data: ko.toJSON(model).users, // Serialize to JSON and take users array
    accept: 'application/json',
    success: function (data) { alert("Done!"); } // Your success callback
});

In our case we basically send an array of strings, thus ASP.NET MVC action should look like that:

[HttpPost]
public JsonResult AddUser(List<string> users)
{
    return Json(data); // return something
}

This is definitely not the only one option of how to implement dynamic forms, but I think it's pretty effective. Hope it helps.

这篇关于ASP.NET MVC动态表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！