ASP.NETMVC动态表单如何实现?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (13)

任何人都可以提出一种开发ASP.NET MVC动态表单的好方法吗?

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

所有的值都来自数据库。

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

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

提问于
用户回答回答于

如果你需要在你的表单中有一些动态字段,最好的方法是使用一些先进的JavaScript框架,如AngularBackboneKnockout等。

如果你需要或多或少简单的东西,就足以让你使用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
}

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

用户回答回答于

你可以使用我的FormFactory库很容易地做到这一点。

默认情况下,它会反映视图模型以生成PropertyVm[]数组:

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

但也可以编程方式创建属性,以便可以从数据库加载设置然后创建PropertyVm

这是Linqpad脚本的一个片段。

```javascript
//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.
}

这是一个演示站点,可以设置各种功能的示例(例如嵌套集合,自动完成,日期选择器等)

扫码关注云+社区