ASP MVC 3使用参数创建局部视图或自定义帮助器

Question

我对asp.mvc 3非常陌生。我使用kendoui和knockout进行绑定。我的应用程序看起来是这样的例子：

视图模型Home控制器的

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创建填充的javascript视图模型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> 

在那里不知何故，我想替换参数1和参数2当我打电话部分在索引视图：

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

或helper方法：

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

然后，我会极力我的索引方法绑定到索引视图：

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> 

我希望这有助于。