Appel d'une action à l'aide de jquery ajax

Question

J'utilise ASP.NET MVC 2. J'ai une boîte de dialogue modale (réalisée via jquery UI) qui contient deux zones de texte et un bouton. Tous les contrôles sont à l'intérieur d'un formulaire.

Je voudrais appeler, lorsque l'utilisateur clique sur le bouton, une action du contrôleur qui effectue certaines opérations sur les données transmises contenues dans les deux zones de texte, puis renvoie une valeur entière et un message de chaîne à l'utilisateur.

Quelqu'un pourrait-il donner un exemple pour faire cela avec jquery?

Merci beaucoup!

Answer 1

supposons que vous avez la forme suivante:

<form id="ajax-form"> 
    <fieldset> 
     <input type="text" id="firstname" name="firstname" /> 
     <input type="text" id="lastname" name="lastname" /> 
     <input type="submit" value="send" /> 
    </fieldset> 
</form> 

utilisant jQuery

$(document).ready(function(){ 
$("#ajax-form").submit(function(){ 

    $.ajax({ 
      type: "POST", 
      url: "Person/Add", 
      data: $("#ajax-form").serialize(), 
      success: function (response) { 
       // whatever you want to happen on success 
      }, 
      error: function (response) { 
        alert('There was an error.'); 
       } 
     }); 

}); 

});

Accès à vos données dans la méthode Action.

public ActionResult Add(FormCollection form) 
{ 
    string firstname = form["firstname"]; 
    string firstname = form["lastname"]; 
    // do whatever you want here 
    // then return something to the view 
    return Json(/*some object*/); 
} 

une autre façon est d'utiliser Microsoft Ajax

<% using (Ajax.BeginForm("Add", "Person", 
      new AjaxOptions() { 
           UpdateTargetId = "formDiv", 
           InsertionMode = InsertionMode.Replace, 
           HttpMethod = "Post" })) {%> 

     <fieldset> 

      // Form Elements Here.    

     </fieldset> 

<% } %> 

UpdateTargetId est l'id de l'élément HTML à cibler. L'option InsertionMode a trois valeurs Replace, InsertAfter, InsertBefore

Espoir qui a été utile

Mise à jour: vous ne devez pas retourner un résultat JSON dans votre méthode d'action, vous pouvez simplement retourner une vue partielle ou n'importe quel code HTML en tant qu'objet de réponse, puis insérez-le en utilisant jQuery.

Answer 2

Vous pouvez jeter un oeil à la documentation sur la façon dont vous pourriez implémenter une boîte de dialogue qui contient des champs de formulaire. Et lorsque vous cliquez sur le bouton confirm, vous pouvez simplement envoyer une requête AJAX.

buttons: { 
    Confirm: function() { 
     // read the value in the textbox 
     var name = $('#name').val(); 

     // send an AJAX request to an action that will return JSON: 
     $.getJSON('/home/foo', { name: name }, function(result) { 
      // read the returned value 
      alert(result.Value); 
     }); 
    }, 
    Cancel: function() { 
     $(this).dialog('close'); 
    } 
} 

Et votre action de contrôleur:

public ActionResult Foo(string name) 
{ 
    return Json(new { Value = '123' }, JsonRequestBehavior.AllowGet); 
}