Invoking an action using jquery ajax

Question

I am using ASP.NET MVC 2. I have a modal dialog (done through jquery UI) that contains two text boxes and a button. All the controls are inside a form.

I would like to invoke, when the user click the button, a controller action that do some operations on the passed data contained in the two text boxes and then return an integer value and a string message to the user.

Could anybody provide an example for doing this with jquery?

Thanks so much!

Answer 1

You may take a look at the documentation about how you could implement a dialog that contains form fields. And when the confirm button is clicked you could simply send an AJAX request.

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

And your controller action:

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

Answer 2

suppose you have the following form :

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

using 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.');
                }
        });

}); 

});

Accessing Your Data in the Action Method.

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

another way is to use Microsoft Ajax

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

        <fieldset>

             // Form Elements Here.            

        </fieldset>

<% } %>

UpdateTargetId is the id of the html element to be targeted. The InsertionMode option has three values Replace, InsertAfter, InsertBefore

Hope that was helpful

Update : you don't have to return a Json result in your action method you can simply return a partial view or any HTML code as the response object and then insert it using jQuery.