如何创建可重用的;小部件;ASP.NET MVC 2.0站点中跨模块的标记?

如何创建可重用的;小部件;ASP.NET MVC 2.0站点中跨模块的标记?,asp.net,asp.net-mvc-2,Asp.net,Asp.net Mvc 2,情景: 平台:ASP.NET 4.0、MVC 2.0(如果不是正确的解决方案,则不必是MVC) 创建继承相同核心标记的各种小部件: <div class="widget"> <div class="hd-widget"> <!-- dynamically inject code here for each actual widget --> </div> <div class="bd-widget"&

情景:

平台:ASP.NET 4.0、MVC 2.0(如果不是正确的解决方案,则不必是MVC)

创建继承相同核心标记的各种小部件:

<div class="widget">
    <div class="hd-widget">
        <!-- dynamically inject code here for each actual widget -->

    </div>
    <div class="bd-widget">
        <!-- dynamically inject code here for each actual widget -->
    </div>
    <div class="ft-widget">
        <!-- dynamically inject code here for each actual widget -->
    </div>
</div>

上面的“简化”示例应该在一些可重用控件或母版页中

流程是这样的:

控制器->视图->部分视图(1..n)->小部件标记

用户实例化一个调用控制器的操作。控制器尝试呈现包含内容+多个小部件(左栏、右栏等)的视图。这些小部件都有各自的局部视图,但每个局部视图都应该继承或使用一组基本的小部件标记,并具有用于嵌入功能的控制器区域

标题、正文和页脚中的功能可以是纯文本、HTML或其他自定义控件


推荐的最佳方法是什么?

我假设您的小部件将存储在数据库中

我想您需要用于路径、页面设置、小部件、WidgetInstances、母版页、母版页区域和区域的表

我认为每个小部件都需要调用RenderAction,并且该操作将存储在针对小部件的DB中。小部件的页眉和页脚可能只是从数据库中检索

当我这样做的时候,我花了相当多的时间为每个小部件创建动态编辑器,每个小部件的状态都是用json序列化的,我唯一还在处理的问题是小部件编辑器的动态验证

页面布局由自定义个性化类处理,存储母版页、路径、用户ID等


使用JQuery sortable是一个非常复杂的解决方案,但是非常快速且对SEO友好。

我认为您应该有一个WidgetModel,其中包含一组关于小部件的属性

例如

您有一个小部件视图,如

<div class="widget">
   <div class="hd-widget">
      <%: Html.RenderAction(Model.HeaderAction, Model.ControllerName) %>
   </div>
   <div class="bd-widget">
      <%: Html.RenderAction(Model.BodyAction, Model.ControllerName) %>
   </div>
   <div class="ft-widget">
      <%: Html.RenderAction(Model.FooterAction, Model.ControllerName) %>
   </div>
</div>


当然,如果您愿意,您可以添加更多内容。

您是否在考虑母版页之类的内容,但只考虑部分视图?是的,有一些较旧的帖子就是这样做的,但在MVC 2.0/ASP.NET 4.0中,它不允许您将母版页用作部分HTML布局。看起来像我使用母版页引用的文章,但在VS 2010中生成警告消息,指出它是母版页的无效标记。无论如何,在不同的占位符区域中创建具有可嵌入内容的标准模块标记非常有用。
<div class="widget">
   <div class="hd-widget">
      <%: Html.RenderAction(Model.HeaderAction, Model.ControllerName) %>
   </div>
   <div class="bd-widget">
      <%: Html.RenderAction(Model.BodyAction, Model.ControllerName) %>
   </div>
   <div class="ft-widget">
      <%: Html.RenderAction(Model.FooterAction, Model.ControllerName) %>
   </div>
</div>