web-dev-qa-db-fra.com

jquery Ajax call - les paramètres de données ne sont pas transmis à l'action du contrôleur MVC

Je passe deux paramètres de chaîne d'un appel ajax jQuery à une méthode de contrôleur MVC, dans l'attente d'une réponse JSON. Je peux voir que les paramètres sont remplis côté client mais les paramètres correspondants côté serveur sont nuls.

Voici le javascript:

$.ajax({  
  type: "POST",  
  contentType: "application/json; charset=utf-8",  
  url: "List/AddItem",  
  data: "{ ListID: '1', ItemName: 'test' }",  
  dataType: "json",  
  success: function(response) { alert("item added"); },  
  error: function(xhr, ajaxOptions, thrownError) { alert(xhr.responseText); }
});

Voici la méthode du contrôleur:

Function AddItem(ByVal ListID As String, ByVal ItemName As String) As JsonResult
   'code removed for brevity
   'ListID is nothing and ItemName is nothing upon arrival.
   return nothing
End Function

Qu'est-ce que je fais mal?

javascriptjqueryasp.net-mvcajax
32
Grant

J'ai essayé:

<input id="btnTest" type="button" value="button" />

<script type="text/javascript">
    $(document).ready( function() {
      $('#btnTest').click( function() {
        $.ajax({
          type: "POST", 
          url: "/Login/Test",
          data: { ListID: '1', ItemName: 'test' },
          dataType: "json",
          success: function(response) { alert(response); },
          error: function(xhr, ajaxOptions, thrownError) { alert(xhr.responseText); }
        });
      });
    });
</script>

et C#:

[HttpPost]
public ActionResult Test(string ListID, string ItemName)
{
    return Content(ListID + " " + ItemName);
}

Ça a marché. Supprimer contentType et définir data sans les guillemets doubles.

31
LukLed

Si vous rencontrez des problèmes pour mettre en cache ajax, vous pouvez le désactiver:

$.ajaxSetup({cache: false});
2
Mocksy

Vous devez ajouter -> contentType: "application/json; charset = utf-8",

<script type="text/javascript">
    $(document).ready( function() {
      $('#btnTest').click( function() {
        $.ajax({
          type: "POST", 
          url: "/Login/Test",
          data: { ListID: '1', ItemName: 'test' },
          dataType: "json",
          contentType: "application/json; charset=utf-8",
          success: function(response) { alert(response); },
          error: function(xhr, ajaxOptions, thrownError) { alert(xhr.responseText); }
        });
      });
    });
</script>
2
Ahmet Onur
  var json = {"ListID" : "1", "ItemName":"test"};
    $.ajax({
            url: url,
            type: 'POST',        
            data: username, 
            cache:false,
            beforeSend: function(xhr) {  
                xhr.setRequestHeader("Accept", "application/json");  
                xhr.setRequestHeader("Content-Type", "application/json");  
            },       
            success:function(response){
             console.log("Success")
            },
              error : function(xhr, status, error) {
            console.log("error")
            }
);
1
Rakesh Haladi

Dans mon cas, si je supprime la contentType, je reçois le Internal Server Error.

Voici ce que j'ai obtenu après plusieurs tentatives:

var request =  $.ajax({
    type: 'POST',
    url: '/ControllerName/ActionName' ,
    contentType: 'application/json; charset=utf-8',
    data: JSON.stringify({ projId: 1, userId:1 }), //hard-coded value used for simplicity
    dataType: 'json'
});

request.done(function(msg) {
    alert(msg);
});

request.fail(function (jqXHR, textStatus, errorThrown) {
    alert("Request failed: " + jqXHR.responseStart +"-" + textStatus + "-" + errorThrown);
});

Et voici le code du contrôleur:

public JsonResult ActionName(int projId, int userId)
{
    var obj = new ClassName();

    var result = obj.MethodName(projId, userId); // variable used for readability
    return Json(result, JsonRequestBehavior.AllowGet);
}

Veuillez noter que le cas d'ASP.NET est un peu différent, nous devons appliquer JSON.stringify() aux données comme indiqué dans la mise à jour de cette réponse.

0
BiLaL