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

Question

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?

Why do you say: What I am doing doesn't seem like the right way to do it...? — Lorenzo
– Lorenzo, Commented Dec 18, 2010 at 0:52
Change "right" to "intended". I feel like I should be using Ajax.Form or something. — Jason
– Jason, Commented Dec 20, 2010 at 14:02

Darin Dimitrov · Accepted Answer · 2010-12-18 09:16:17Z

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.

Brian Mains · Accepted Answer · 2010-12-18 01:14:17Z

0

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.

answered Dec 18, 2010 at 1:14

Brian Mains

50.8k35 gold badges155 silver badges260 bronze badges

Collectives™ on Stack Overflow

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

My Question

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

My Question

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related