¿Cómo puedo recargar un div con PartialView en ASP.NET MVC usando jQuery?

StackOverflow https://stackoverflow.com/questions/1433419

Pregunta

Tengo un div con un parcial dentro de algún lugar de la página. Tengo un evento en un botón. ¿Cómo podría escribir un Javascript que toma el div y lo recarga y también recarga la vista parcial?

Tengo esto en otra vista. Pero no puedo hacerlo así ahora. Pero necesito que ocurra lo mismo solo ejecutado por un jQuery que no está directamente en la página. ¿Puedo ejecutar tal vez un código ajax simular en el script jQuery porque su javascript también no lo es? 

<%  using (Ajax.BeginForm("EditFeiertag", new AjaxOptions { InsertionMode = InsertionMode.Replace, UpdateTargetId = "feiertage" }))
    {  %>
<div id="feiertage">
    <% Html.RenderPartial("FeiertagTable"); %>
</div>
<%  } %>

Me ayudaría si pudiera ejecutar el script anterior al iniciar un evento de clic o algo así

¿Fue útil?

Solución

Comencemos con algunas acciones básicas del controlador: 

public class FeiertagController
{
    IFeiertagService feiertagService = new FeiertagService();

    public ActionResult EditFeiertag()
    {
        // ... return your main edit view
        return View();
    }

    // Will be called by your jquery ajax call
    public PartialResult GetFeiertagTable()
    {
        var feiertagData = messageService.getLatestFeiertagData();
        var viewModel = new FeiertagViewModel();
        feiertagViewModel.feirtagTableData = feiertagData;

        return PartialView("FeiertagTableView", viewModel);
    }

}

Entonces, EditFeiertag () se usa para renderizar toda su página de edición, y esa página hará una llamada a GetFeiertagTable () cuando quiera renderizar asincrónicamente su vista parcial.

Ahora, en su opinión, supongamos que tiene algo como: 

<div id="Container">
    <div id="LeftPanel">
        // ... Some menu items
    </div>
    <div id="RightPanel">
        <a id="ReloadLink" href="#">Reload Table</a>
        <div id="FeiertagTable>
            <% Html.RenderPartial("FeiertagTable", Model.feiertagTableData); %>
        </div>
    </div>
</div>

Esto funciona bien y cargará su tabla una vez. Pero desea hacer que la tabla Feiertag se vuelva a cargar si hace clic en un elemento determinado (en nuestro caso, #ReloadLink).

Agregue lo siguiente a la parte de su página: 

<head>
        <script src="../../Scripts/Jquery/jquery-1.3.2.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            jQuery(document).ready(function($) {
                $('#ReloadLink').click(function(e)
                {
                    e.preventDefault();  // stop the links default behavior
                    $('#FeiertagTable').load('/Feiertag/GetFeiertagTable');
                });
            });
        </script>
</head>

Eso agregará un evento en el evento de clic para su enlace de recarga que llamará a un método jquery load (). Este método es una solicitud de obtención ajax simplificada y reemplazará el contenido del div seleccionado (FeiertagTable), con lo que se devuelve.

Nuestra acción del controlador GetFeiertagTable () devolverá la vista parcial, que luego se inserta en ese div.

¡Espero que esto te señale en la dirección correcta!

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top