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

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.