html - ASP.NET MVC 动态表单

Question

谁能建议一种使用 ASP.NET MVC 开发动态表单的好方法？

我在页面上有级联下拉菜单（下拉菜单中的选项取决于在上一个下拉菜单中选择的值）。

所有值都来自数据库。

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

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

Answer 1

您可以使用FormCollection作为参数来接收来自表单的所有数据：

[HttpPost]
public ActionResult ActionName(FormCollection collection)
{
    //collection["inputName"];
}

Answer 2

您可以使用我的FormFactory库非常轻松地做到这一点。

默认情况下，它会根据视图模型反映以生成PropertyVm[]数组：

```

var vm = new MyFormViewModel
{
    OperatingSystem = "IOS",
    OperatingSystem_choices = new[]{"IOS", "Android",};
};
Html.PropertiesFor(vm).Render(Html);

```

但您也可以以编程方式创建属性，因此您可以从数据库加载设置然后创建PropertyVm.

这是来自 Linqpad 脚本的片段。

```

//import-package FormFactory
//import-package FormFactory.RazorGenerator


void Main()
{
    var properties = new[]{
        new PropertyVm(typeof(string), "username"){
            DisplayName = "Username",
            NotOptional = true,
        },
        new PropertyVm(typeof(string), "password"){
            DisplayName = "Password",
            NotOptional = true,
            GetCustomAttributes = () => new object[]{ new DataTypeAttribute(DataType.Password) }
        }
    };
    var html = FormFactory.RazorEngine.PropertyRenderExtension.Render(properties, new FormFactory.RazorEngine.RazorTemplateHtmlHelper());   

    Util.RawHtml(html.ToEncodedString()).Dump(); //Renders html for a username and password field.
}

```

有一个演示站点，其中包含您可以设置的各种功能的示例（例如嵌套集合、自动完成、日期选择器等）

Answer 3

如果您需要在表单中包含一些动态字段，最好的方法是使用一些高级 javascript 框架，如Angular、Backbone、Knockout等。

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

下面是一个使用 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>

现在，ASP.NET MVC 呢？

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

var json = ko.toJSON(model);

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

$.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
});

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

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

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

Answer 4

我将为下拉列表和附加字段的每个选项创建部分视图。比控制器，它将根据下拉值返回 html 的这些部分：

public class FormFieldsController : Controller
{
    public ActionResult Index(string dropDownOption)
    {
        if(dropDownOption == "Option1")
           return PartialView("PartialForOption1");
       etc.//
    }
}

然后只需使用 jquery Ajax调用它，并在下拉列表的值更改时将操作结果附加到当前表单中。

$.ajax("/FormFields/Index",
    {
        async: false,
        data: { dropDownOption: $('#dropDownId').value()},
        success: function(data) {
            if (callback == null) {
                $("#form").append(data);
            } else {
                callback(data);
            }
        },
        error: function() {
            alert('Error');
        },
        type: 'GET',
        timeout: 10000
    }
);

Answer 5

试试这个http://mvcdynamicforms.codeplex.com/releases/view/43320 它应该会有所帮助