ASP.NET MVC動態表單

Question

任何人都可以建議用ASP.NET MVC開發動態表單的好方法嗎？

我在頁面上有級聯下拉列表（下拉列表中的選項取決於在上一個下拉列表中選擇的值）。

所有值都來自數據庫。

如何使用ASP.NET MVC實現此類行為？

當然，我希望在提交表單時收到控制器中的所有值。

Answer 1

您可以使用我的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 2

如果你需要在表單中有一些動態字段，最好的方法是使用一些高級的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 3

您可以使用FormCollection作為參數來接收來自表單的所有數據：

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

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它應該會有所幫助