0

我对 asp.mvc 3 很陌生。我正在使用 kendoui 和敲除进行绑定。我的应用程序看起来像这个示例：

视图模型

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"
                             };
        }
    }

Home控制器的索引方法

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>

加载索引视图时，我正在调用OptionsData控制器的方法，该方法返回填充MyViewModel为 Json。

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

            return jsonNetResult;
        }

在 javascript中MyViewModel，我创建了具有可淘汰可观察属性的填充 javascript 视图模型viewModel，并将其绑定到索引视图中的 div。

$(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>

当我在索引视图中调用部分时，我想以某种方式替换参数 1 和参数 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>

我的问题是，在这种情况下，Partial View 或 Custom Helper 方法哪个更好，更重要的是如何使用参数实现它们，同时牢记发布的示例代码。欢迎任何其他方法或想法。谢谢！

4

1 回答 1

1

在我看来，这两种方法都很好。您可以创建一个自定义助手，它采用两个参数，如下所示：

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 回答