web-dev-qa-db-ja.com

ASP.NET MVCダイナミックフォーム

ASP.NET MVCを使用して動的フォームを開発する良い方法を提案できる人はいますか？

ページにカスケードドロップダウンがあります（ドロップダウンのオプションは、前のドロップダウンで選択した値によって異なります）。

すべての値はデータベースから取得されます。

ASP.NET MVCを使用してこのような動作を実装するにはどうすればよいですか？

もちろん、フォームを送信するときにコントローラーのすべての値を受け取りたいです。

html.netasp.net-mvcrazordynamic-forms
18
Andrei

フォームにいくつかの動的フィールドが必要な場合、最良の方法は、 Angular 、 Backbone 、 ノックアウト など.

多少シンプルなものが必要な場合は、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アクションに投稿することです。まず、フォームからJSONオブジェクトを取得する必要があります。ノックアウトでは非常に簡単です：

var json = ko.toJSON(model);

フォームからJSONを取得する方法がわかったら、次のステップはデータをアクションに送信することです。 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
}

これは間違いなく動的フォームを実装する方法の唯一のオプションではありませんが、かなり効果的だと思います。それが役に立てば幸い。

11
Andrei

これは 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.
}

`` `

デモサイト には、設定できるさまざまな機能の例（ネストされたコレクション、オートコンプリート、日付ピッカーなど）があります

12
mcintyre321

FormCollection をパラメーターとして使用して、フォームからのすべてのデータを受け取ることができます。

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

ドロップダウンの各オプションと追加フィールドの部分ビューを作成します。コントローラーよりも、ドロップダウン値に従ってhtmlのそのような部分を返します：

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

次に、jquery Ajax で呼び出して、ドロップダウンの値が changes の場合に、アクションの結果を現在のフォームに追加します。

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

これを試してください http://mvcdynamicforms.codeplex.com/releases/view/4332 役に立つはずです

0
Soner