Submit form not rendering partial view in ASP.NET MVC with Ajax call

Question

My Index controller loads a view with a form that has 3 checkboxes for filtering data in some table. Within the Index view, I have:

<div id="ajax-container">

    <div id="content-loading"><img src="~/Images/preloader4.gif" /></div>
</div>

@section scripts
{
    <script type="text/javascript">
        $(document).ready(function () {
            $("#filter-form").trigger("submit");
        });
    </script>
}

That is, on page load, I submit the form with the default values. This calls a method in my controller that returns a partial view, that looks something like this:

<table id="summaryTable">
    <tr>
       <th>Column1</th>
       <th>Column2</th>
       <th>Column3</th>
    </tr>
    <tr>
       <td>Column1</td>
       <td>Column2</td>
       <td>Column3</td>
    </tr>
</table>

On the initial page load, this works. On each subsequent submit of the form, the views never update. The method that returns the partial view DOES get called and it does get to the return PartialView() but it does not update.

This all was working before trying to implement the AJAX call on document.ready. The differences are that the Index views' first load called @Html.Partial("_summaryTable", Model) (where the ajax-container div now is), and the entire contents of the <div id="ajax-container"> were in the partial view, wrapping the table.

Edit

And the Ajax call is:

$(function () {

var ajaxFormSubmit = function () {
    var $form = $(this);

    $("#content-loading").show();

    var options = {
        url: $form.attr("action"),
        type: $form.attr("method"),
        data: $form.serialize()
    };

    $.ajax(options).done(function (data) {
        var $target = $($form.attr("data-target"));
        var $newHtml = $(data);
        $target.replaceWith($newHtml);
        $("#content-loading").hide();
    });

    return false;
};

And where in your example does this $($form.attr("data-target")); correspond? — Chris Moutray
$($form.attr("data-target")); corresponds to #ajax-container... And yes, I was able to see my alert from the done function. However, that $('#content-loading").show() never happened, visually, that is... — Tom

CrazyCoderz CrazyCoderz · Accepted Answer · 2013-04-29T12:31:06

I do something like this.. Not sure if this helps but your ajax call looks a bit silly. The posted code below will check for your update element. You also want to make sure your event is always available as well

//EVENT BINDING

$(document).on('submit', '#add_site_form', function(e) {
    e.preventDefault();
    postAjaxForm(e.target);

});

HTML:

 @using (Html.BeginForm("AddSite", "Site", new { Area = "Admin" }, FormMethod.Post, new { @id = "add_site_form", @class = "", @UpdateElement = "#middle" }))
{
    <ul>
        <li>
            @Html.LabelFor(x=>x.SiteName)
        </li>
        <li>
            @Html.TextBoxFor(x=>x.SiteName) &nbsp;@Html.ValidationMessageFor(x=>x.SiteName)
        </li>
        <li>
            @Html.LabelFor(x=>x.SiteUrl)
        </li>
        <li>
            @Html.TextBoxFor(x=>x.SiteUrl) &nbsp;@Html.ValidationMessageFor(x=>x.SiteUrl)
        </li>
    </ul>
<input type="submit" />
}

Jquery:

 var postAjaxForm = function (form) {
var updateElement = $(form).attr('UpdateElement');

if (!$(updateElement).length) {
    alert('Unable to find update element');
    return false;
}

if ($(form).valid()) {
    $.ajax({
        type: $(form).attr('method'),
        url: $(form).attr('action'),
        data: $(form).serialize(),
        success: function (response) {

            if (response.redirect) {
                window.location = response.redirectUrl;
            } else {
                $(updateElement).html(response);
                $.validator.unobtrusive.parse($(updateElement).find('form'));
            }
        },
        error: function (xhr, stats, errorMessage) {
            console.log(errorMessage);
        }
    });
}
return true;

};

Submit form not rendering partial view in ASP.NET MVC with Ajax call

1 Answers