Asp.net mvc 2 form not posting to controller via Ajax

Question

i'm trying to post a form to my controller via ajax so i can render a partial view.

Here is my Ajax Code

 var formCollection = $('#some-form');
 $(function(){ $('#some-form').submit(function(){
      $.ajax({
           type: "POST",
           url: "/Trusk/Index",
           data: formCollection,
           dataType: "html",
           success: function (result) {
               $('#newView').html(result);
           },
           error: function (request, status, error) {
               alert('Oh no!');
           }
     });
});
}); 

Code for my form, i want partial view to be render at ID = newView, The partial view is returned by the controller

  <% using (Html.BeginForm(new { @id = "some-form" }))
           { %>
            <div id="TestDiv">
            <div id="Title">Test</div>                 
                <div id="CheckIn">Check-in:<br />
                <%:Html.TextBox("FromDate", "", new { @id = "DateFrom", @style =  "width:190px" })%></div>
                <div id="CheckOut">Check-out:<br />
                <%:Html.TextBox("ToDate", "", new { @id = "DateTo", @style =  "width:190px" })%><br /></div>
                <div id="newView">  
                </div>
                <input type="submit" value="Search" />        
        </div>
               </div>
        <% } %>

My controller code

 public ActionResult Index(FormCollection post)
    {
        ITruckRepository hotelRep = new TruckRepository();

        IEnumerable<Truck> AvailableTrucks = hotelRep.getTrucks('2012,3,2', '2012,3,5');

       return PartialView("Search", AvailableTrucks );

    }

Do i pass the correct parameter to the controller via Ajax?

Thanks

Answer 1

There are a couple of issues with your code:

• You are using a wrong overload of the Html.BeginForm method. In the overload you used the id is a route value, not HTML attribute
• Inside your .submit callback you are not canceling the default action by returning false and thus when the form is submitted the AJAX call will hardly have any time to execute before the browser redirects away from the page
• In the data parameter of the AJAX call you are passing a jQuery object representing the form called formCollection when you should be serializing the data.
• You have broken markup => there's one closing div that doesn't have a corresponding opening element.

So let's start by fixing the markup first:

<% using (Html.BeginForm(null, null, FormMethod.Post, new { id = "some-form" })) { %>
    <div id="TestDiv">
        <div id="Title">Test</div>                 
        <div id="CheckIn">
            Check-in:<br />
            <%= Html.TextBox("FromDate", "", new { id = "DateFrom", style = "width:190px" }) %>
        </div>
        <div id="CheckOut">
            Check-out:<br />
            <%= Html.TextBox("ToDate", "", new { id = "DateTo", style = "width:190px" }) %>
            <br />
        </div>
        <div id="newView"></div>
        <input type="submit" value="Search" />        
    </div>
<% } %>

and then the script that will AJAXify the form:

$(function () {
    $('#some-form').submit(function () {
        $.ajax({
            type: this.method,
            url: this.action,
            data: $(this).serialize(),
            success: function (result) {
                $('#newView').html(result);
            },
            error: function (request, status, error) {
                alert('Oh no!');
            }
        });
        return false;
    });
}); 

Now you should ensure that the corresponding POST controller action is successfully invoked and the parameters passed correctly. Also ensure that no errors occur inside this controller action and while rendering the partial view. Use a javascript debugging tool such as FireBug to see exactly what request/response are being sent as well as any possible js errors.

Answer 2

You need to call .Serialize() on formCollection - which will encode the form as a string for submission.

var formCollection = $('#some-form'); 
$(function(){ $('#some-form').submit(function(){ 
  $.ajax({ 
       type: "POST", 
       url: "/Trusk/Index", 
       data: formCollection.serialize(), 
       dataType: "html", 
       success: function (result) { 
           $('#newView').html(result); 
       }, 
       error: function (request, status, error) { 
           alert('Oh no!'); 
       } 
 }); 
});
});  

Also, while you have a FormCollection parameter on your controller method - you're not actually using it?