Come posso ricaricare un div con un PartialView in ASP.NET MVC usando jQuery?

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

Domanda

Ho un div con un parziale all'interno da qualche parte nella pagina. Ho un evento su un pulsante. Come potrei scrivere un Javascript che prende il div e lo ricarica e ricarica anche la vista parziale.

Ho questo in un'altra vista. Ma non posso farlo ora. Ma ho bisogno che accada la stessa cosa solo eseguendo un jQuery non direttamente nella pagina. Posso eseguire forse un codice Ajax simulato nello script jQuery perché anche il suo javascript non è vero? 

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

Vorrei aiutarmi se potessi eseguire lo script sopra avviando un evento click o qualcosa del genere

È stato utile?

Soluzione

Iniziamo con alcune azioni di base del controller: 

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);
    }

}

Quindi, EditFeiertag () viene utilizzato per eseguire il rendering dell'intera pagina di modifica e tale pagina chiamerà GetFeiertagTable () quando desidera eseguire il rendering asincrono della vista parziale.

Ora, a tuo avviso, diciamo che hai qualcosa del tipo: 

<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>

Funziona bene e caricherà il tuo tavolo una volta. Ma vuoi far ricaricare la tabella Feiertag se fai clic su un determinato elemento (nel nostro caso il #ReloadLink).

Aggiungi quanto segue a parte della tua pagina: 

<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>

Questo aggiungerà quindi un evento sull'evento click per il tuo link di ricarica che chiamerà un metodo jquery load (). Questo metodo è una richiesta get ajax semplificata e sostituirà il contenuto del div selezionato (FeiertagTable), con ciò che viene restituito.

La nostra azione controller GetFeiertagTable () restituirà la vista parziale, che viene quindi inserita in quella div.

Spero che questo ti spinga nella giusta direzione!

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top