CODEWITHSUNDEEP
javascriptjqueryajaxasp.net-mvcasp.net-ajax
SelrekJohn
SelrekJohn

Reputation: 476

Ajax.BeginForm() not posting back to the controller

I am trying to get paging for a simple list held within a partial to work but the post actionresult never gets called.

During debugging I can see my buttons being activated in the Chrome debugger so I would think the issue is with $('form') but I am not sure why.

Also through the Chrome console I can see that the page number is calculating correctly when clicking next/previous.

I have a break point on the [HttpPost] action method in my controller and it never gets called.

The issue isn't with the C# in the back-end but why the form isn't getting posted in the first place.

Where have I gone wrong with Ajax and POST back?

Index:

@model ViewModel
@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Things</h2>
<div>

    @Html.ActionLink("Create", "Create", "Things", null, new { @class = "modal-link btn btn-sm" })
    <div class="Table">
        <div id="thingsList">
            @Html.Partial("List", Model.ThingList)
        </div>
        @using (Ajax.BeginForm("Index", "Things", FormMethod.Post, new AjaxOptions { HttpMethod = "POST", InsertionMode = InsertionMode.Replace, UpdateTargetId = "thingsList" }))
        {
            <input type="hidden" id="CurrentPage" value="@ViewBag.CurrentPage" />
            <input type="hidden" id="PreviousPage" value="@ViewBag.PreviousPage" />
        }
        <input type="button" onclick="javascript: PrevBtnClick();" class="btn btn-primary" id="PrevBtn" value="Previous" />
        <input type="button" onclick="javascript: NextBtnClick();" class="btn btn-primary" id="NextBtn" value="Next" />
    </div>
</div>
<script type="text/javascript">
    function PrevBtnClick() {
        if (CalculateAndSetPage("Previous")) {
            $('form').submit();
        }
    }
    function NextBtnClick() {
        if (CalculateAndSetPage("Next")) {
            $('form').submit();
        }
    }
    function CalculateAndSetPage(movingType) {
        var current = parseInt($('#CurrentPage').val());
        if (movingType == 'Previous') {
            current--;
        }
        else if (movingType == 'Next') {
            current++;
        }
        else {
            alert('Something has gone wrong');
        }
        $('#CurrentPage').val(current);
    }
</script>

Upvotes: 2

Views: 206

Answers (1)

PurpleSmurph
PurpleSmurph

Reputation: 2107

The reason it's not posting back is because it never gets to $('form') - which should work fine.

Underneath $('#CurrentPage').val(current); add return true; - your javascript function of if (CalculateAndSetPage("Previous/next")) is asking a yes/no (boolean) question, which your current script is not answering. It will only work if true.

Upvotes: 1

Related Questions