MVC5 Ajax mise à jour

J'ai une liste déroulante avec l'ID de sélection StaffId. Ce que je fais, c'est qu'une fois un élément est sélectionné, je veux passer le StaffId au contrôleur pour récupérer les enregistrements dans une base de données en utilisant le staffId. Cela donne une erreur sur le chargement de la page sans passer le StaffId au contrôleur. ci-dessous est l'extraitMVC5 Ajax mise à jour

contrôleur

[HttpPost] 
      public PartialViewResult GetStaffPosts(int? id) 
      { 

       var sPost = db.StaffPosts.Where(a => a.StaffId == id.Value); 
       return PartialView(sPost.ToList()); 

      } 

    <div id="divPartialView"> 
    @{Html.RenderPartial("GetStaffPosts");} 
    </div> 

<script type="text/javascript"> 
    $(document).ready(function() { 
     $("#StaffId").change(function (event) { 
      var options = {}; 
       options.url= "/StaffPost/GetStaffPosts/" + $(this).val(), 
       options.data= { id: $(this).val() }, 
       options.cache= false, 
       optionstype= "POST", 
       options.dataType= "html", 

       options.success= function (data, textStatus, XMLHttpRequest) { 
        $("#divPartialView").html(data); // HTML DOM replace 
        $.ajax(options); 
       } 
      }); 
     }); 

</script>

Source

2017-06-28 Diin

Pouvez-vous ajouter votre code de contrôleur ici? – hasan

Pourquoi utilisez-vous HttpPost au lieu de HttpGet, Vous essayez d'obtenir des données à partir de DB, dans ce cas vous devriez utiliser [HttpGet]. et je recommanderais d'utiliser la méthode jquery load pour analyser votre vue partielle avec les données db dans l'élément html cible – hasan

Votre code actuel est pas faire réellement un appel ajax sur l'événement change parce que vous invoquez l'$.ajax(options); appel à l'intérieur du rappel de succès des options objet. Vous n'appelez pas la méthode $ .ajax sur l'événement change!

Cela devrait fonctionner (en supposant que votre code de contrôleur retourne une réponse 200).

$("#StaffId").change(function (event) { 
     var options = {}; 
     options.url= "/StaffPost/GetStaffPosts/" + $(this).val(), 
     options.data= { id: $(this).val() }, 
     options.cache= false, 
     options.type= "POST", 
     options.dataType= "html", 
     options.success= function (data, textStatus, XMLHttpRequest) { 
       $("#divPartialView").html(data); // HTML DOM replace 

     } 
     $.ajax(options); 
});

Vous pouvez également simplifier votre code en utilisant la méthode $.post.

$("#StaffId").change(function() { 

    $.post("/StaffPost/GetStaffPosts/",{ id: $(this).val() } ,function (data) { 
      $("#divPartialView").html(data); 
    }); 

});

ou même en utilisant la méthode $.load et une doublure

$("#StaffId").change(function(event) { 

    $("#divPartialView").load("/StaffPost/GetStaffPosts/", { id: $(this).val() }); 

});

Source

2017-06-28 20:30:37 Shyju

Cela a fonctionné mais j'ai décidé d'utiliser json – Diin

Salut vient de mettre votre appel ajax en dehors de la fonction de réussite et de faire une url comme le code ci-dessous et essayez à nouveau

Votre code changé:

<script type="text/javascript"> 
    $(document).ready(function() { 
     $("#StaffId").change(function (event) { 
      var options = {}; 


       options.url= "../StaffPost/GetStaffPosts, 


       options.data= { id: $(this).val() }, 
       options.cache= false, 
       optionstype= "POST", 
       options.dataType= "html", 
       options.success= function (data, textStatus, XMLHttpRequest) 
       { 
        $("#divPartialView").html(data); // HTML DOM replace 

       } 


       $.ajax(options); 


      }); 
     }); 

</script>

Source

2017-06-29 01:16:47

MVC5 Ajax mise à jour

Répondre

Questions connexes