CODEWITHSUNDEEP
c#asp.netajaxasp.net-mvc-2
Jason
Jason

Reputation: 11615

Submit a Form via AJAX and Return a Partial View - MVC2

Seems like there are a lot of ways to solve this problem.

Currently I make a partial view with a form like so:

<div id="container">
    <form id="some-form">
        <input id="some-text" type="text">
        <input id="some-submit" type="submit">
    </form>
</div>

then I hijack the submit with JQuery and do an ajax post and replace the form with another partial view:

$(function()
{
    $('#some-form').submit(function(){
          $.ajax({
               type: "POST",
               url: "/Controller/Action",
               data: {someVal: $('#some-text').val()},
               dataType: "html",
               success: function (result) {
                   $('#container').html(result);
               },
               error: function (request, status, error) {
                   alert('Oh no!');
               }
         });
    });
});

The controller would be like:

    [HttpPost]
    public ActionResult SomeAction(string someVal)
    {
        //Do something with text
        return PartialView("SubmitSuccess");
    }

My Question

What are other ways to accomplish the same thing and what are the pros and cons vs what I am doing?

Is Ajax.Form useful?

Upvotes: 1

Views: 3506

Answers (2)

Darin Dimitrov
Darin Dimitrov

Reputation: 1038720

Personally I use the jquery form plugin. It will make your code shorter. Also assign the action parameter to your form to avoid hardcoding it in your scripts.

<div id="container">
    <% using (Html.BeginForm("action", "controller", FormMethod.Post, 
        new { id = "some-form" })) { %>
        <input id="some-text" type="text">
        <input id="some-submit" type="submit">
    <% } %>
</div>

And then attach the plugin to this form to AJAXify it:

$(function() {
    $('#some-form').ajaxForm({
        success: function(result) { 
            $('#container').html(result);
        },
        error: function(request, status, error) {
            alert('Oh no!');
        }
    });
});

The plugin will automatically send an AJAX request to the action, using the verb specified in the method parameter and serializing the values of all input fields in the request.

Upvotes: 3

Brian Mains
Brian Mains

Reputation: 50728

What's wrong with the way that you are doing? I've done it that way, and it works out for me. It depends how reusable you need to make the process; you could use a DIV with a css class, and then create a JQuery plugin or widget if you need reusability.

HTH.

Upvotes: 0

Related Questions