asp.net mvc - pagina - ¿Cómo puedo cargar una vista parcial dentro de la vista?

llamar una vista parcial mvc

Question

Estoy muy confundido con esta vista parcial ...

Quiero cargar una vista parcial dentro de mi vista principal ...

aquí está el simple exmaple ...

Estoy cargando Index.cshtml de la acción del Índice de Homecontroller como página principal.

en index.cshtml estoy creando un enlace a través de

@Html.ActionLink("load partial view","Load","Home")

en HomeController estoy agregando una nueva Acción llamada

public PartialViewResult Load()
{
    return PartialView("_LoadView");
}

en _LoadView.cshmtl solo estoy teniendo un

<div>
    Welcome !!
</div>

PERO, cuando ejecuto el proyecto, index.cshtml representa primero y me muestra el enlace "Cargar vista parcial" ... cuando hago clic en eso va a la página nueva instade de renderizar el mensaje de bienvenida de _LoadView.cshtml en el index.cshtml .

¿Qué puede estar mal?

Nota: No quiero cargar páginas a través de AJAX o no quiero usar Ajax.ActionLink

Answer 1

Para mí, esto funcionó después de que descargué la biblioteca discreta AJAX vía NuGet:

 Search and install via NuGet Packages:   Microsoft.jQuery.Unobtrusive.Ajax

Luego agregue en la vista las referencias a jquery y Ajax Unobtrusive:

@Scripts.Render("~/bundles/jquery")
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"> </script>

Luego, el Ajax ActionLink y el div fueron los que queremos mostrar:

@Ajax.ActionLink(
    "Click Here to Load the Partial View", 
    "ActionName", 
    null, 
    new AjaxOptions { UpdateTargetId = "toUpdate" }
)

<div id="toUpdate"></div>

Answer 2

Pequeña tweek para el anterior

@Ajax.ActionLink(
    "Click Here to Load the Partial View", 
    "ActionName", 
    "ControlerName",
    null, 
    new AjaxOptions { UpdateTargetId = "toUpdate" }
)

<div id="toUpdate"></div>

Answer 3

RenderParital es mejor usar para el rendimiento.

{@Html.RenderPartial("_LoadView");}

Answer 4

Si desea cargar la vista parcial directamente dentro de la vista principal, puede usar el ayudante Html.Action :

@Html.Action("Load", "Home")

o si no desea pasar por la acción Cargar, use el hepler HtmlPartial:

@Html.Partial("_LoadView")

Si desea utilizar Ajax.ActionLink , reemplace su Html.ActionLink con:

@Ajax.ActionLink(
    "load partial view", 
    "Load", 
    "Home", 
    new AjaxOptions { UpdateTargetId = "result" }
)

y, por supuesto, debe incluir un titular en su página donde se mostrará el parcial:

<div id="result"></div>

Además, no olvide incluir:

<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>

en su vista principal para habilitar Ajax.* helpers. Y asegúrese de que javascript no intrusivo esté habilitado en su web.config (debe ser por defecto):

<add key="UnobtrusiveJavaScriptEnabled" value="true" />

Answer 5

Si lo hace con un @Html.ActionLink() entonces la carga de PartialView se maneja como una solicitud normal al hacer clic en un elemento de anclaje, es decir, cargar una nueva página con la respuesta del método PartialViewResult.
Si desea cargarlo inmediatamente, use @Html.RenderPartial("_LoadView") o @Html.RenderAction("Load") .
Si desea hacerlo en la interacción con el usuario (es decir, hacer clic en un enlace), entonces necesita usar AJAX -> @Ajax.ActionLink()

Answer 6

Tenía exactamente el mismo problema que Leniel. Intenté las correcciones sugeridas aquí y en una docena de otros lugares. Lo que finalmente funcionó para mí fue simplemente agregar

@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryval")

a mi diseño ...

Answer 7

UNA COSA A TENER EN CUENTA - Y ME CAYRÍO DE ESTO ...

jquery.validate.unobtrusive.js
jquery.validate.unobtrusive.min.js

NO SON LOS MISMOS QUE ...

jquery.unobtrusive-ajax.js
jquery.unobtrusive-ajax.min.js

Leí "discretamente" y asumí que tenía la biblioteca correcta: ¡se necesitan los AJAX!

Answer 8

si desea llenar el contenido de su vista parcial dentro de su vista, puede usar

@Html.Partial("PartialViewName")

o

{@Html.RenderPartial("PartialViewName");}

si desea hacer una solicitud del servidor y procesar los datos y luego devolver una vista parcial a la vista principal llena de esos datos, puede usar

...
    @Html.Action("Load", "Home")
...

public PartialViewResult Load()
{
    return PartialView("_LoadView");
}

si desea que el usuario haga clic en el enlace y luego rellene los datos de la vista parcial, puede usar:

@Ajax.ActionLink(
    "Click Here to Load the Partial View", 
    "ActionName", 
    "ControlerName",
    null, 
    new AjaxOptions { UpdateTargetId = "toUpdate" }
)