ASP MVC 3 create Partial View or Custom Helper with params - asp.net-mvc-3

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.