0

私はasp.mvc 3に非常に慣れていません。バインディングに剣道とノックアウトを使用しています。私のアプリケーションは次のサンプルのようになります。

ビューモデル

public class MyViewModel
    {
        public MyViewModel()
        {
            Initialize();
        }

        public IEnumerable<string> MyOptions1 { get; set; }
        public string MyChoice1 { get; set; }

        public IEnumerable<string> MyOptions2 { get; set; }
        public string MyChoice2 { get; set; }

        private void Initialize()
        {
            MyOptions1 = new List<string>()
                             {
                                 "OptionA",
                                 "OptionB"
                             };

            MyOptions2 = new List<string>()
                             {
                                 "OptionC",
                                 "OptionD"
                             };
        }
    }

ホームコントローラのインデックス方法

public ActionResult Index()
        {
            return View();
        }

インデックス ビュー:

<div id="optionsArea">
    <table>
        <tr>
            <td><label>Option1:</label></td>
            <td><input id="options1" data-bind="kendoDropDownList: { data: MyOptions1, value: MyChoice1 }" /></td>
        </tr>
        <tr>
            <td><label>Option2:</label></td>
            <td><input id="options2" data-bind="kendoDropDownList: { data: MyOptions2, value: MyChoice2 }" /></td>
        </tr>
    </table>
</div>

インデックス ビューが読み込まれると、Json として入力されOptionsDataたものを返すコントローラーのメソッドを呼び出しています。MyViewModel

public ActionResult OptionsData()
        {
            var myModel = new MyViewModel();
            var jsonNetResult = new JsonNetResult
            {
                Formatting = Formatting.Indented,
                Data = myModel
            };

            return jsonNetResult;
        }

JavaScript Fromでは、ノックアウトの観測可能なプロパティをMyViewModel使用して、入力された JavaScript ビューモデルを作成し、それを Index View の div にバインドします。viewModel

$(function () {

    my = {

    }

    $.getJSON("/Home/OptionsData", function (data) {

        // create observable properties from MyViewModel
        my.viewModel = ko.mapping.fromJS(data);

        ko.applyBindings(my.viewModel, document.getElementById("optionsArea"));
    });
});

私のアプリケーションには、ラベルとドロップダウンを含む多くの要素があるため、コンポーネントのようなものでその部分を抽出し、それをいくつかのパラメーターで呼び出して再利用し、バインディングを置き換えたいと考えています。いくつかの記事を読みましたが、おそらく解決策は部分ビューまたはカスタム HTML ヘルパーを使用することで、次のようなことができます。

_OptionPartialView

<tr>
    <td><label>Option2:</label></td>
    <td><input data-bind="kendoDropDownList: { data: (parameter1), value: (parameter2) }" /></td>
</tr>

Index View でパーシャルを呼び出すときに、何らかの方法で parameter1 と parameter 2 を置き換えたい:

@Html.Partial("_OptionPartialView.cshtml", parameter1, parameter2);

またはヘルパーメソッドを使用：

@Html.MyCustomHelper(..., parameter1, parameter2);

次に、Index メソッドを Index ビューに強くバインドします。

public ActionResult Index()
        {
            var myModel = new MyViewModel();
            return View(myModel);
        }

そして、私のビューは次のようになります。

  @model MVC3Question.Models.MyViewModel

<div id="optionsArea">
    <table>
        @Html.Partial("_OptionPartialView.cshtml", Model.MyOptions1, Model.MyChoice1);
        @Html.Partial("_OptionPartialView.cshtml", Model.MyOptions2, Model.MyChoice2);
    </table>
</div>

私の質問は、この状況で部分ビューまたはカスタムヘルパーメソッドのどちらが優れているか、および投稿されたサンプルコードを念頭に置いてパラメーターを使用してそれらをどのように実装するかがより重要です。他のアプローチやアイデアは大歓迎です。ありがとう！

4

1 に答える 1

1

私の意見では、どちらの方法も良いです。次のような2つのパラメーターを受け取るカスタムヘルパーを作成できます。

public static MvcHtmlString MyHtmlHelper(this HtmlHelper htmlHelper, string label, IEnumerable<string> option, string choise)
    {
        var html = new MvcHtmlString(String.Empty);

            html = MvcHtmlString.Create("<tr><td><label>" + label + ":</label></td><td><input data-bind=\"kendoDropDownList: { data: (" + option + "), value: (" + choise + ") }\" /></td></tr>");


        return html;
    }

現在のコードを変更しなくても機能するため、この方法をお勧めします。

部分ビューを使用する場合は、現在のモデルを変更する必要があります。

public class MyViewModel
{
    public MyViewModel()
    {
        MyOptions = new List<string();
    }

    public IEnumerable<string> MyOptions { get; set; }
    public string MyChoice { get; set; }
}

次に、次のようにコントローラーにモデルを設定できます。

public ActionResult Index()
    {
        var viewModels = new List<MyViewModel>();
        var myOptions1 = new List<string>()
                         {
                             "OptionA",
                             "OptionB"
                         };

        var myOptions2 = new List<string>()
                         {
                             "OptionC",
                             "OptionD"
                         };
        viewModels.Add(new MyViewModel{MyOptions = myOptions1});
        viewModels.Add(new MyViewModel{MyOptions = myOptions2});
        return View(viewModels);
    }

その後、次のようにビューを変更する必要があります。

    @model IList<MVC3Question.Models.MyViewModel>
<div id="optionsArea">
    <table>
        @foreach(var viewModel in Model)
        {
            @Html.Partial("_OptionPartialView.cshtml", viewModel);
        }
    </table>
</div>

そして最後に部分的なビューを作成します。

    @model Mvc3Question.Models.MyViewModel
<tr>
    <td><label>Option2:</label></td>
    <td><input data-bind="kendoDropDownList: { data: (@Model.MyOptions), value: (@Model.MyChoice) }" /></td>
</tr>

これがお役に立てば幸いです。

于 2012-10-24T12:42:35.373 に答える