Implementación de GitHub Tree Slider en MVC3

Estoy intentando implementar la misma diapositiva de tree en mi aplicación MVC3 y no estoy del todo seguro de hacerlo bien:

Página de inicio:

<script type="text/javascript"> $(document).ready(function () { $('#slider a').click(function () { history.pushState({ path: this.path }, '', this.href); $.get(this.href, function (data) { $('#slider').slideTo(data); }); return false; }); }); </script> @{Html.RenderAction("MainTableTracker", "Release", new { releaseId = Model });} 

Vista parcial de MainTableTracker:

 <script type="text/javascript"> $(document).ready(function () { $('#slider a').click(function () { history.pushState({ path: this.path }, '', this.href); $.get(this.href, function (data) { $('#slider').slideTo(data); }); return false; }); }); </script> <div id="slider"> @Html.RouteLink(Model.Brand.Name, "Brand", new { BrandId = Model.Brand.Id }) / <ul> <li><a href="#">Overview</a></li> @foreach(var model in Model.ModelExts) { <li>@Html.RouteLink(model.Model.Name, new { modelId = model.Model.Id })</li> } </ul> </div> 

Vista parcial de VersionTable:

 <script type="text/javascript"> $(document).ready(function () { $('#slider a').click(function () { history.pushState({ path: this.path }, '', this.href); $.get(this.href, function (data) { $('#slider').slideTo(data); }); return false; }); }); </script> <div id="slider"> @Html.RouteLink(Model.Brand.Name, "Brand", new { BrandId = Model.Brand.Id }) / @Html.RouteLink(Model.Name, "Model", new { modelId = Model.Id }) / <ul> <li><a href="#">Overview</a></li> @foreach(var model in Model.Brand.Model) { <li>@Html.RouteLink(model.Name, new { modelId = model.Id })</li> } </ul> <div class="versionWraper"> @foreach(var version in Model.Version) { <div> @version.Name </div> } </div> </div> 

Esto funciona, sin embargo estoy bastante seguro de que lo estoy haciendo mal, supongo que no debería tener 3 vistas diferentes copyndo el código de la vista principal cada vez.

Me pregunto si debería tener solo un model de vista y una acción y dejar que la vista decida qué mostrar cada vez. Pero no estoy muy contento con el uso de una sola acción para mostrar diferentes types de datos (versión, marca y característica).

Además, el layout tiene:

  $(window).bind('popstate', function (e) { $.get(e.originalEvent.state.path, function (data) { $('#slider').slideTo(data); }); }); 

Eso funciona, pero cuando regrese al nivel de Marca, volverá a cargar todos mis scripts (ya que es una Vista, no una Parcial para la pnetworkingeterminada).

¿Hay alguna forma mejor de implementar esto?

Gracias

Cuando diseñe algo como esto, le recomiendo que no oriente los objects por ID. Te pone en situaciones raras como la que estás enfrentando, donde quieres garantizar que el ítem está en la página antes de que el script se dispare y ese tipo de cosas, que pueden ser intrínsecamente problemáticas cuando se trata de carga parcial y cosas por el estilo.

Considere, en cambio, este tipo de enfoque:

 <style> .slider { /* Styles here */ } .slider > ul { /* Styles here */ } .slider > ul > li { /* Styles here */ } .slider > .versionWrapper { /* Styles here */ } .slider > .versionWrapper > .versionName { /* Styles here */ } </style> <div class="slider"> @Html.RouteLink(Model.Brand.Name, "Brand", new { BrandId = Model.Brand.Id }) / @Html.RouteLink(Model.Name, "Model", new { modelId = Model.Id }) / <ul> <li><a href="#">Overview</a></li> @foreach(var model in Model.Brand.Model) { <li>@Html.RouteLink(model.Name, new { modelId = model.Id })</li> } </ul> <div class="versionWrapper"> @foreach(var version in Model.Version) { <div class="versionName">@version.Name</div> } </div> </div> <script type="text/javascript" language="javascript"> $(document).ready(function () { $('.slider > ul > li > a').live('click', function (ev) { ev.preventDefault(); ev.stopPropagation(); var $a = $(ev.target); var $slider = $a.closest('.slider'); history.pushState({ path: $a.path }, '', $a.href); $.get($a.href, function (data) { $slider.slideTo(data); }); }); }); </script> 

En este punto, se está enfocando efectivamente CUALQUIER control deslizante que coloque en la página, independientemente de en qué parte esté envuelto, y la pequeña cantidad de lógica de jQuery al final puede colocarse fácilmente en un file JS en todo el sitio o en toda la página , desacoplado de la implementación específica que genera su HTML.

Luego, simplemente crea un alternar para qué modo estás. Me gusta hacer esto con ViewData["SettingName"] , pero así soy yo.

Si desea que se muestre su vista de estilo "MainTable", configure algo como:

 ViewData["Mode"] = "Default"; 

Si desea que se muestre su vista de estilo "Versión", configure:

 ViewData["Mode"] = "Version"; 

Luego modifique su parcial para renderizar como:

 <div class="slider"> @{ bool versionMode = (ViewData["Mode"] as String == "Version"); string breadCrumb = Html.RouteLink( Model.Brand.Name, "Brand", new { BrandId = Model.Brand.Id } ).ToString(); if (versionMode) { breadCrumb = String.Format("{0} / {1}", breadCrumb, Html.RouteLink( Model.Name, "Model", new { modelId = Model.Id } ).ToString() ); } } @breadCrumb / <ul> <li><a href="#">Overview</a></li> @{ if (versionMode) foreach(var model in Model.ModelExts) { <li>@Html.RouteLink(model.Model.Name, new { modelId = model.Model.Id })</li> } } else { @foreach(var model in Model.Brand.Model) { <li>@Html.RouteLink(model.Name, new { modelId = model.Id })</li> } } } </ul> @{ if (versionMode) { <div class="versionWrapper"> @foreach(var version in Model.Version) { <div>@version.Name</div> } </div> } } </div>