Question

我是asp.mvc 3的新手。我正在使用kendoui和knockout进行绑定。我的应用程序看起来像这样的样本：

视图模型

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>

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

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

            return jsonNetResult;
        }

在javascript中MyViewModel我使用knockout observable属性创建填充的javascript viewmodel viewModel，并将其绑定到Index视图中的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>

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

我的问题是在这种情况下哪个更好，部分视图或自定义助手方法，更重要的是如何使用参数考虑已发布的示例代码来实现它们。欢迎任何其他方法或想法。谢谢！

Answer 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>

我希望这会有所帮助。

ASP MVC 3使用参数创建部分视图或自定义助手

1 个答案: