在MVC中,我如何开发类似旧学校用户控件的东西?

时间:2014-05-06 12:05:53

标签: asp.net-mvc asp.net-mvc-4 architecture user-controls

好吧,这个问题可能看起来太广了,但我会更具体。

我有一个TreeView,希望用于显示一些层次结构。此外,我已经实现了一些行为,例如,如果在检查父项时将打开折叠的节点,或者它是否是延迟加载或将自动加载所有内容。但我不想让这些行为硬编码。我想创建一个可自定义的控件。像Telerik Kendo UI这样的东西。他们开发了一个控件,可以像这样使用:

@(Html.Kendo().MaskedTextBox()
    .Name("phone_number")
    .Mask("(999) 000-0000")
    .Value("555 123 4567")
)

请注意,您可以向其传递一些选项。 此外,我希望能够传递将使用异步填充我的TreeView的操作的名称。因此,如果我在例如mysite / myController / indexAction中使用此组件,我想传递将异步填充组件的操作的名称。让我们举例说明。我想要这样的东西:

@(Html.Foo().HierarchyView()
    .Name("myTree")
    .AllowCheckBoxes(true)
    .PopulateChildrenOnCheck(true)
    .Async("GetChildrenAsync")
)

所以,我可以在myController上实现一个动作

string GetChildrenAsync(int idKey) {
    var nodes = new List<HierarchViewNodes>();
    (...) //implementation to populate the children nodes
    return JsonConvert.SerializeObject(nodes);
}

所以,这将是我的可自定义控件的开始。当然,我可以扩展它。 我已经搜索并了解了RenderPartial和RenderAction,但是我还不知道如何完全使用它来制作像我解释的那样可重复使用的控件。 有没有人开发这样的东西,可以给我一个快速启动,或文章链接,或任何东西?我经常搜索,但没有找到任何关于如何制作这样的控件的信息。

提前致谢!

2 个答案:

答案 0 :(得分:2)

您可能想看看制作一些custom HTML helpers。例如,你的看起来像这样:

public static MvcHtmlString MyTreeView(this HtmlHelper html, params...){
    var myHtmlContent = ....;
    // .. implement your functionality and generate the html to put in your view
    return MvcHtmlString.Create(myHtmlContent);
}

您可以在Razor视图中使用它,如下所示:

<div>@Html.MyTreeView(params...)</div>

这是一个非常简单的例子,但希望它能让你走上正轨。

答案 1 :(得分:2)

我建议使用一些HTML扩展,正如rwisch45所说的那样,但是在一个单独的“子助手”中保护(和组织),如Kendo和DevExpress:

public static class HtmlExtensions
{
   public static static MyCustomHelper CustomHelper(this HtmlHelper htmlHelper)
   {
      return new MyCustomHelper(htmlHelper);
   }
}

public class MyCustomHelper
{
   HtmlHelper _HtmlHelper;
   public MyCustomHelper(HtmlHelper htmlHelper) { _HtmlHelper = htmlHelper; }

   public MvcHtmlString WriteSomethingInteresting(string value)
   { return new MvcHtmlString(value); }

   public MyCustomGrid CreateMyGrid(object gridOptions)
   {
      // I won't show now how to transform dynamic into type.
      // You can find that on SO quite easy.
      var typedOptions = TransformDynamicIntoClass<GridOptions>(gridOptions);

      return new MyCustomGrid(typedOptions);
   }
}

public class MyCustomGrid : IHtmlString
{
   public string ToHtmlString()
   {
      // Return your grid as an HTML object!
   }
}

这样你就可以:

@Html.CustomHelper().MyCustomGrid(new { Option1 = "", Option2 = "", ...... });

但是,您可以使用IDisposable进行一些操作,例如:

@using(Html.CustomHelper().MyCustomGrid(....))
{
   // Dunno what could come here for a grid (poor sample) but maybe for a pane helper?
}