MVC3 .NET Modelo múltiple o un modelo de vista única

Question

Quiero construir una página web que tenga 3 pestañas (y, por lo tanto, 3 divs): Tab 1 - Actualizar los detalles personales de los datos 2 - Verifique la pestaña del pedido 3 - Cambie los detalles del inicio de sesión

Hay 2 formas de implementar esto por lo que puedo decir, pero me gustaría saber las mejores prácticas.

Primero sería tener 3 vistas parciales que implementen un modelo separado cada segundo sería tener 3 vistas parciales que implementen un solo model de vista

La primera opción si el uso de vistas parciales causará un error de "esperar el modelo A pero obtener el modelo B", creo que puede usar la renderización para evitar esto, pero ¿es esa mejor práctica?

Opiniones bienvenidas.

Gracias

Answer 1

Mirando los nombres de las pestañas, 'actualizar los datos personales', 'Verificar el pedido' y 'cambiar los detalles de inicio de sesión'; parece que estas son opciones bastante diferentes, pero relacionadas que un usuario podría hacer.

Para mí, tendría sentido dividirlos en tres acciones diferentes con tres vistas diferentes, lo que significa que solo representa la acción para la pestaña visible. De esta manera, si el usuario solo quería, por ejemplo, actualizar sus detalles, el servidor no está haciendo las consultas de DB para verificar el pedido

Usaría algunos CSS para diseñarlo para que parezca tres pestañas, pero cada pestaña realmente sería un enlace que hizo una nueva solicitud, solo que parecía que había tres pestañas.

p.ej

<div id="content">
    <ul>
       <li class="active">Update Personal Details</li>
       <li>@Html.ActionLink("Check Order","CheckOrder")</li>
       <li>@Html.ActionLink("Update Logon Details","UpdateLogonDetails")</li>
    </ul>
    <div id="tab1" />
     ... Update Personal Details Tab... etc
    </div>
    ... tab2 and tab 3 not included...
</div>

Las acciones para CheckOrge y UpdateLogondetails harían esencialmente la misma vista, pero se mostraría una pestaña diferente.

Esto crearía la ilusión de que todo se ejecuta usando pestañas, aunque no lo fuera.

Luego, cuando tenía todo en ejecución, puede actualizar esos enlaces usando jQuery para despedir las solicitudes a través de AJAX, devolviendo los resultados como vistas parciales y actualizando el contenido Div con el resultado. Esto significa que las personas con JavaScript habilitan la experiencia adecuada de 'Ajax', pero que todavía funciona bien para aquellos con JavaScript discapacitados.

Answer 2

usuario1079925,

Como usted dice, hay una variedad de formas de hacer esto y todo dependerá de qué tan relacionados estén los datos. Si todo se deriva del mismo controlador, entonces tendría sentido tener un solo modelo de vista para encapsular los datos. Aquí hay un garabato rápido sobre cómo podría verse eso:

public class SubViewModelA
{
    public string SpecialProperty { get; set; }
}

public class SubViewModelB
{
    public string SpecialProperty { get; set; }
}

public class SubViewModelC
{
    public string SpecialProperty { get; set; }
}

public class TabbedViewModel
{
    public SubViewModelA TabA {get; set; }
    public SubViewModelB TabB {get; set; }
    public SubViewModelC TabC {get; set; }
}

Esto se referiría en su opinión como:

@model TabbedViewModel

<div id="taba">@Html.EditorFor(model => model.TabA.SpecialProperty )</div>
<div id="tabb">@Html.EditorFor(model => model.TabB.SpecialProperty )</div>
<div id="tabc">@Html.EditorFor(model => model.TabC.SpecialProperty )</div>

Ahora, esto no es bonito (dejaré esa parte para ti), pero te permitiría poblar tus 'pestañas' desde un solo modelo de vista. La otra alternativa, como mencionas, es tener 3 @RenderAction() Bloqueos dentro de la pestaña Divs si los datos no están relacionados de ninguna manera.