Question

I am very new to asp.mvc 3. I am using kendoui and knockout for binding. My application looks like this sample:

ViewModel

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

Index method of Home controller

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

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

When Index view is loaded I am calling OptionsData method of controller which returns the populated MyViewModel as Json.

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

            return jsonNetResult;
        }

In javascript From MyViewModel I create populated javascript viewmodel viewModel with knockout observable properties and bind it to the div in the Index View.

$(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"));
    });
});

In my application I have many elements containing label and dropdown so I want to extract that part in something like a component and reuse it calling it with some parameters to replace the bindings. I read some articles and maybe the solution is to use partial views or custom HTML helpers so I can do something like this:

_OptionPartialView

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

where somehow I want to replace parameter1 and parameter 2 when I call the partial in the Index View:

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

or with helper method:

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

Then I will strongly bind my Index method to the Index view:

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

And my view will look something like this:

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

My question is which is better in this situation Partial View or Custom Helper method and more important how do I implement them with the parameters having in mind the posted sample code. Any other approches or ideas are welcome. Thanks!

Answer 1

In my opinion both methods are good.
You can create a custom helper that takes two parameters like this:

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

I would prefer this method because it will work without any change in your current code.

If you want to use a partial view you will need to change your current model.

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

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

Then you can populate the model in your controller like this:

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

After that you need to change your view like this:

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

And finally create a partial view:

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

I hope this helps.