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

问题描述

谁能提出一种使用 ASP.NET MVC 开发动态表单的好方法?

我在页面上有级联下拉列表(下拉列表中的选项取决于值，在上一个下拉列表中选择).

所有值都来自数据库.

如何使用 ASP.NET MVC 实现此类行为?

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

解决方案

如果您需要在表单中包含一些动态字段，最好的方法是使用一些高级 javascript 框架，例如 Angular、主干、淘汰赛 等

如果您需要一些或多或少简单的东西，使用 Knockout 就足够了.对于更高级的场景，我会推荐 Angular，但这是我个人的偏好.

这是一个使用 Knockout 的动态表单的简单实现:

var model = {用户:ko.observableArray(),添加用户:函数(){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/>

<button data-bind="click: addUser">添加用户</button><ul data-bind="foreach: users"><li data-bind="text: name"></li>

现在，ASP.NET MVC 怎么样?

这更棘手.也许最好和最简单的方法是使用 Ajax 并将 JSON 发布到 ASP.NET MVC Action.首先，您需要从表单中获取一个 JSON 对象.淘汰赛非常简单:

var json = ko.toJSON(model);

现在，当我们知道如何从表单中获取 JSON 时，下一步是将您的数据发送到操作.jQuery 非常适合:

$.ajax({类型:POST"，url: "@Url.Action("AddUser")",data: ko.toJSON(model).users,//序列化为 JSON 并获取用户数组接受:'应用程序/json'，成功:功能(数据){警报(完成！")；}//你的成功回调});

在我们的例子中，我们基本上发送一个字符串数组，因此 ASP.NET MVC 操作应该如下所示:

[HttpPost]public JsonResult AddUser(List users){返回JSON(数据)；//返回一些东西}

这绝对不是实现动态表单的唯一选择，但我认为它非常有效.希望有帮助.

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屋！