Hierarchical Component Architecture in MVChttp://forums.asp.net/t/1624464.aspx/1?Hierarchical+Component+Architecture+in+MVCThu, 18 Nov 2010 06:38:49 -050016244644173495http://forums.asp.net/p/1624464/4173495.aspx/1?Hierarchical+Component+Architecture+in+MVCHierarchical Component Architecture in MVC <p style="margin-top:0px; margin-right:0px; margin-bottom:1em; margin-left:0px; font-size:14px; vertical-align:baseline; background-color:transparent; clear:both; word-wrap:break-word; padding:0px; border:0px initial initial"> I'm building an ASP.Net MVC 2 application with a component architecture. There are two different types of components:&nbsp;<span class="Apple-style-span" style="font-style:italic">Elementary Components</span>, which have an associated controller action rendering a partial view, and&nbsp;<span class="Apple-style-span" style="font-style:italic">Layout Components</span>, which render all their child components (Elementary Components or again Layouts) in a certain layout.</p> <p style="margin-top:0px; margin-right:0px; margin-bottom:1em; margin-left:0px; font-size:14px; vertical-align:baseline; background-color:transparent; clear:both; word-wrap:break-word; padding:0px; border:0px initial initial"> Here is my generic&nbsp;<span class="Apple-style-span" style="font-weight:bold">RenderComponent()</span>&nbsp;action method, which takes a component ID and renders the appropriate view:</p> <pre class="prettyprint">[ChildActionOnly] public ActionResult RenderComponent(int id) { ComponentRepository repository = new ComponentRepository(); Component component = repository.GetComponent(id); if (component.ControllerName != null &amp;&amp; component.ViewName != null) { // render elementary component return PartialView(&quot;Elementary&quot;, component); } else { // render layout return PartialView(component.Layout.ViewName, component); } }</pre><p><br></p><p><span mce_name="strong" mce_style="font-weight: bold;" style="font-weight: bold;" class="Apple-style-span" mce_fixed="1">Elementary.ascx</span>&nbsp;renders an elementary component:</p><pre class="prettyprint">&lt;%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl&lt;MyApp.Models.Component&gt;" %&gt; &lt;% Html.RenderAction(Model.ViewName, Model.ControllerName); %&gt;</pre><p><br></p><p>Currently the only existing layout is the&nbsp;<span mce_name="strong" mce_style="font-weight: bold;" style="font-weight: bold;" class="Apple-style-span" mce_fixed="1">VerticalLayout.ascx</span>:</p><pre class="prettyprint">&lt;%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl&lt;MyApp.Models.Component&gt;" %&gt; &lt;% foreach (var child in Model.ChildComponents()) { %&gt; &lt;div class="layout-container"&gt; &lt;% Html.RenderAction("RenderComponent", "Core", child.ID); %&gt; &lt;/div&gt; &lt;% } %&gt;</pre> <hr style="color:#dddddd; background-color:#dddddd; height:1px; margin-bottom:20px; border:0px initial initial"> <p style="margin-top:0px; margin-right:0px; margin-bottom:1em; margin-left:0px; font-size:14px; vertical-align:baseline; background-color:transparent; clear:both; word-wrap:break-word; padding:0px; border:0px initial initial"> <span class="Apple-style-span" style="font-weight:bold">The Problem:</span></p> <p style="margin-top:0px; margin-right:0px; margin-bottom:1em; margin-left:0px; font-size:14px; vertical-align:baseline; background-color:transparent; clear:both; word-wrap:break-word; padding:0px; border:0px initial initial"> When I tried to render an example layout component with three associated elementary child components, the page wouldn't render. Some debugging revealed the following problem:</p> <p style="margin-top:0px; margin-right:0px; margin-bottom:1em; margin-left:0px; font-size:14px; vertical-align:baseline; background-color:transparent; clear:both; word-wrap:break-word; padding:0px; border:0px initial initial"> <code style="padding-top:1px; padding-right:5px; padding-bottom:1px; padding-left:5px; font-size:14px; vertical-align:baseline; background-color:#eeeeee; font-family:Consolas,Menlo,Monaco,'Lucida Console','Liberation Mono','DejaVu Sans Mono','Bitstream Vera Sans Mono','Courier New',monospace,serif; margin:0px; border:0px initial initial">RenderComponent(5)</code>&nbsp;renders the layout view. For rendering the first child component in the layout,<code style="padding-top:1px; padding-right:5px; padding-bottom:1px; padding-left:5px; font-size:14px; vertical-align:baseline; background-color:#eeeeee; font-family:Consolas,Menlo,Monaco,'Lucida Console','Liberation Mono','DejaVu Sans Mono','Bitstream Vera Sans Mono','Courier New',monospace,serif; margin:0px; border:0px initial initial">Html.RenderAction(&quot;RenderComponent&quot;, &quot;Core&quot;, 1)</code>&nbsp;is called in the view. Stepping further, I discovered that in effect&nbsp;<code style="padding-top:1px; padding-right:5px; padding-bottom:1px; padding-left:5px; font-size:14px; vertical-align:baseline; background-color:#eeeeee; font-family:Consolas,Menlo,Monaco,'Lucida Console','Liberation Mono','DejaVu Sans Mono','Bitstream Vera Sans Mono','Courier New',monospace,serif; margin:0px; border:0px initial initial">RenderComponent(5)</code>&nbsp;is called instead of&nbsp;<code style="padding-top:1px; padding-right:5px; padding-bottom:1px; padding-left:5px; font-size:14px; vertical-align:baseline; background-color:#eeeeee; font-family:Consolas,Menlo,Monaco,'Lucida Console','Liberation Mono','DejaVu Sans Mono','Bitstream Vera Sans Mono','Courier New',monospace,serif; margin:0px; border:0px initial initial">RenderComponent(1)</code>!!</p> <p style="margin-top:0px; margin-right:0px; margin-bottom:1em; margin-left:0px; font-size:14px; vertical-align:baseline; background-color:transparent; clear:both; word-wrap:break-word; padding:0px; border:0px initial initial"> This obviously results in an infinite loop of the layout view rendering itself.</p> <hr style="color:#dddddd; background-color:#dddddd; height:1px; margin-bottom:20px; border:0px initial initial"> <p style="margin-top:0px; margin-right:0px; margin-bottom:1em; margin-left:0px; font-size:14px; vertical-align:baseline; background-color:transparent; clear:both; word-wrap:break-word; padding:0px; border:0px initial initial"> Why is this happening? How can I fix it? Is my hierarchical component architecture incompatible with ASP.Net MVC? How would you build such a system in ASP.Net MVC?</p> <p style="margin-top:0px; margin-right:0px; margin-bottom:1em; margin-left:0px; font-size:14px; vertical-align:baseline; background-color:transparent; clear:both; word-wrap:break-word; padding:0px; border:0px initial initial"> <br> </p> 2010-11-17T23:19:31-05:004173887http://forums.asp.net/p/1624464/4173887.aspx/1?Re+Hierarchical+Component+Architecture+in+MVCRe: Hierarchical Component Architecture in MVC <p>please call</p> <p><code style="padding:1px 5px; font-size:14px; vertical-align:baseline; background-color:rgb(238,238,238); font-family:Consolas,Menlo,Monaco,'Lucida Console','Liberation Mono','DejaVu Sans Mono','Bitstream Vera Sans Mono','Courier New',monospace,serif; margin:0px">Html.RenderAction(&quot;RenderComponent&quot;, &quot;Core&quot;,new {id= 1})</code></p> 2010-11-18T06:38:49-05:00