Mvc vue partielle recharger ou actualiser

Question

J'ai une vue appelée Index avec 4 vue partielle comme _tab1, _tab2, _tab3 et _tab4, chaque vue partielle a des champs de formulaire, y compris soumettre et annuler le bouton, quand je clique sur le bouton _tab4 annuler je veux recharger la même vue partielle _tab4 avec les données de formulaire effacées.

<ul class="tab"> 
    <li class="active" id="tab1">tab1</li> 
    <li class="" id="tab2">tab2</li> 
    <li class="" id="tab3">tab3</li> 
    <li class="" id="tab4">tab4</li> 
</ul> 


    <div class="tabbody" style="display: block; "> 
     <% Html.RenderPartial("_tab1"); %>   
    </div> 
    <div class="tabbody"style="display: block; "> 

    <% Html.RenderPartial("_tab2"); %>    
    </div> 
    <div class="tabbody"style="display: block; "> 

     <% Html.RenderPartial("_tab3"); %>   
    </div> 
    <div class="tabbody" style="display: block; "> 

     <% Html.RenderPartial("_tab4"); %>   
    </div> 

Chaque vue partielle a présenter et bouton d'annulation

Answer 1

Mark chacun de vos divs avec identifiant unique:

<div id="tab1-content" class="tabbody" style="display: block; "> 
     <% Html.RenderPartial("_tab1"); %>   
</div> 

exécuter du code jQuery sur le bouton annuler la fonction clic:

$("cancelTab1buttonselector").click(function() { 

    $.get("@Html.Action("Tab1")", function(data) { 

     $("#tab1-content").html(data); 
    }); 
}); 

Où "cancelTab1buttonselector" est sélecteur pour bouton d'annulation dans tab1. Faites la même chose pour chaque onglet. Vous devez créer des actions de contrôleur de retour chaque contenu onglet comme PartialViewResult:

public ActionResult Tab1() 
{ 
    var model = ...get model... 
    return PartialView("_tab1", model); 
} 

Answer 2

Essayez simplement charger ur partials à l'enveloppe avec l'attribut de vérification des données

html:

<ul class="tab"> 
    <li class="active tab" id="tab1" data-tabid="tab1">tab1</li> 
    <li class="tab" id="tab2" data-tabid="tab2">tab2</li> 
    <li class="tab" id="tab3" data-tabid="tab3">tab3</li> 
    <li class="tab" id="tab4" data-tabid="tab4">tab4</li> 
</ul> 

<div class="tabbody" style="display: block; "> 
     <% Html.RenderPartial("_tab1"); %>   
    </div> 

jquery:

$(document).on('click','.tab',function(){ 
var tabId = $(this).data('tabid'); 
if(tabId=='tab1'){ 
    $('.tabbody').empty().load('/Controller/_tab1'); 
} 
if(tabId=='tab2'){ 
    $('.tabbody').empty().load('/Controller/_tab2'); 
} 
if(tabId=='tab3'){ 
    $('.tabbody').empty().load('/Controller/_tab3'); 
} 
if(tabId=='tab4'){ 
    $('.tabbody').empty().load('/Controller/_tab4'); 
} 
});