Cómo crear una vista parcial plegable / desplegable / expandible en la aplicación web ASP .NET MVC

En la acción de Details de PersonController me gustaría mostrar toda la información sobre el objeto Person .

Inicialmente solo quiero mostrar información sobre la Person y el rest se contraerá, luego quiero hacer clic en un botón / flecha / lo que sea y el rest de la información se expandirá.

Antes de hacer clic en el botón / flecha / lo que sea, todos los datos se cargaron pero solo se ocultaron. Si no tengo que hacerlo no quiero usar AJAX (no estoy familiarizado con él).

Los dibujos muestran lo que quiero decir.


Antes de hacer clic

introduzca la descripción de la imagen aquí


Después de hacer clic

introduzca la descripción de la imagen aquí

Ahora mismo la vista de Details ve así:

 @model WebApplication2.Models.Person @{ ViewBag.Title = "Details"; } 

Details

Person


@Html.DisplayNameFor(model => model.FirstName)
@Html.DisplayFor(model => model.FirstName)
@Html.DisplayNameFor(model => model.LastName)
@Html.DisplayFor(model => model.LastName)
@Html.DisplayNameFor(model => model.CellNumber)
@Html.DisplayFor(model => model.CellNumber)
@Html.DisplayNameFor(model => model.SecondaryPhoneNumber)
@Html.DisplayFor(model => model.SecondaryPhoneNumber)
@Html.DisplayNameFor(model => model.Address)
@Html.DisplayFor(model => model.Address)
@Html.DisplayNameFor(model => model.BirthDate)
@Html.DisplayFor(model => model.BirthDate)
@Html.DisplayNameFor(model => model.Pesel)
@Html.DisplayFor(model => model.Pesel)
@Html.DisplayNameFor(model => model.Notes)
@Html.DisplayFor(model => model.Notes)

EDITAR: la solución original de Pragnesh Khalas funcionó muy bien, pero quería pasar el objeto Person completo a una vista parcial. Así que modifiqué el script sustituyendo:

  data: { parentEls: '@Model.FirstName' } 

con

 data: { person: '@Model' } 

y en el controlador:

  [HttpPost] public ActionResult Test(Person person) { System.Diagnostics.Debug.WriteLine("PASSED: " + person); return PartialView(person); } 

pero la Person person en la acción Test es null además de que todo funciona. ¿Por qué (modelo) no se ha pasado?

Código completo:

Guión:

  function BtnOnclick() { $.ajax({ type: 'POST', url: '@Url.Content("~/Person/Test")', data: { person: '@Model' }, success: function (data) { $('#divpopup').css("display", "block"); $('#btnExpand').css("display", "none"); $('#divpopup')[0].innerHTML = data; } }); } function CollapseDiv() { $('#divpopup').css("display", "none"); $('#btnExpand').css("display", "block"); }  

Ver:

 

Acción del controlador:

  [HttpPost] public ActionResult Test(Person person) { // ViewBag.Chk = parentEls; System.Diagnostics.Debug.WriteLine("PASSED: "); System.Diagnostics.Debug.WriteLine(person.FirstName); return PartialView(person); } } 

Vista parcial:

 @model WebApplication2.Models.Person 

Survey 1

@Html.DisplayNameFor(model => model.Notes)
@Html.DisplayFor(model => model.Notes)

Si necesita mostrar una vista parcial en la vista principal, en ese caso, la mejor opción es usar ajax.

Usando ajax podrá llamar al método de acción y devolver una vista parcial y también en la acción de vista parcial podrá pasar el valor que desee de la vista principal.

Verifique abajo el ejemplo que le ayudará.

 //==Your Code in main View============ 
@Html.DisplayFor(model => model.Notes)
//==Your Code============ //============Added

//============Added

Cuando hace clic en el botón Expandir en ese momento, llame a la función javascript BtnOnclick y en esa función se establece esa vista parcial en el div divopopup.

Como debajo del script: –

  

Por encima de la llamada ajax, podrá pasar cualquier valor a la acción de prueba. En el ejemplo anterior, pase el Nombre de las propiedades del modelo.

Vista parcial (lado del controlador): –

 [HttpPost] public ActionResult Test(string parentEls) { ViewBag.Chk = parentEls; return PartialView(); } 

Vista parcial (vista lateral):

 

Partial View

@ViewBag.Chk

Desafortunadamente, tendrás que hacer esto con Javascript. Sin embargo, se puede lograr con relativa facilidad. En mi ejemplo, uso jQuery, que es mucho más poderoso que el simple Javascript. Recomiendo encarecidamente seleccionarlo si va a trabajar con proyectos web.

Asegúrate de representar el parcial dentro de un div con un id, por ejemplo:

En su opinión:

 
@Html.RenderPartial("_DetailsDropDown", personModel)

En tu sección / archivo de Javascript:

 $("div#details").click(function() { if ($("div#details").hasClass("hidden")) { $("div#details").removeClass("hidden"); } else { $("div#details").addClass("hidden"); } }); 

Esto utiliza una clase ‘oculta’, que se puede definir en su CSS de esta manera:

 div.hidden { display: none; } 

Tenga en cuenta que puede adjuntar el evento clic a cualquier cosa que desee, como un botón o enlace, o al div en sí (como lo he hecho en el ejemplo).

Luego agrega un PartialView en Vistas / Compartido / y asígnele el nombre apropiado como _PersonDropDown.cshtml y reemplaza su comentario en la Vista de detalles con:

 @Html.RenderPartial("_PersonDropDown", yourModel) 

o si es un método de acción, que devuelve un resultado html parcial, utiliza:

 @Html.RenderAction("methodNameThatRendersPartialView") 

Pero todavía tendría que hacer el contenido colapsable usted mismo en la vista parcial. ¡Buena suerte!