Controller post action is not being called from Jquery dialog using ajax

Question

I am trying to call a post action method of my controller from jquery dialog using ajax but unable to do that. I am sure there is something very small but couldn't find anything even after checking my code several times. Can somebody help me to identify the problem?

Javascript in my view:

$('a.actionLinkAttentionButton').click(function () {
            var url = $(this).attr('href');
            var dialogDiv = $('<div id="success" style="display:none;background-color:#efeeef;"></div>').appendTo('body');
            dialogDiv.load(url, {},
                function (responseText, textStatus, XMLHttpRequest) {
                    dialogDiv.dialog({
                        title: "Resolve log issue",
                        close: function (event, ui) {
                            dialogDiv.remove();
                        },
                        width: 600,
                        show: { effect: "blind", duration: 400 },
                        hide: { effect: "blind", duration: 500 },
                        modal: { backdrop: 'static', keyboard: false },
                        buttons: {
                            "Save": function () {
                                $.ajax({
                                    url: '@Url.Action("ResolveLogPost","Attendance")',
                                    type: "POST",
                                    async: false,
                                    data: $('ResolveLogForm', $(this)).serialize()
                                });
                            },
                            "Close": function () {
                                $(this).dialog('close');
                            },
                        },
                        success: function (response) {
                            dialogDiv.dialog('close');
                        },
                        dialogClass: 'no-close success-dialog'
                    });
                });
            return false;
        });

Post action in my controller:

[HttpPost]
        [ValidateAntiForgeryToken]
        public ActionResult ResolveLogPost(BiometricLog model)
        {
            return PartialView();
        }

Partial view:

@using (Html.BeginForm("ResolveLogPost", "Attendance", FormMethod.Post, new { enctype = "multipart/form-data", @id = "ResolveLogForm" }))
{
    @Html.AntiForgeryToken()

    <fieldset>
        <legend>BiometricLogAction</legend>

        <table class="ListTable" style="width:100%">
            @Html.HiddenFor(model => model.EmployeeCode)
            @Html.HiddenFor(model => model.date)
            <tr><td colspan="2" style="background-color:#a6c100;color:white">@Html.Label("Log Details")</td></tr>
            <tr>
                <td style="width:200px;">@Html.LabelFor(model => model.LogDate)</td>
                <td>@Html.DisplayFor(model => model.LogDate)</td>
            </tr>
            <tr>
                <td>@Html.LabelFor(model => model.FinalInTime)</td>
                <td>@Html.DisplayFor(model => model.FinalInTime)</td>
            </tr>
            <tr>
                <td>@Html.LabelFor(model => model.FinalOutTime)</td>
                <td>@Html.DisplayFor(model => model.FinalOutTime)</td>
            </tr>
            <tr>
                <td>@Html.LabelFor(model => model.WorkingTime)</td>
                <td>@Html.DisplayFor(model => model.WorkingTime)</td>
            </tr>
        </table>
        <table>
            <tr>
                <td>@Html.CheckBoxFor(model => model.Accepted, new { @id = "chkprivate" })</td>
                <td>@Html.LabelFor(model => model.Accepted)</td>
            </tr>
        </table>
        <table>
            <tr>
                <td>@Html.LabelFor(model => model.ProofFileName)</td>
                <td>@Html.TextBoxFor(m => m.ProofFileName, new { type="file", name = "file", @id="uploadfile"})</td>
            </tr>
            <tr>
                <td>@Html.LabelFor(model => model.Remarks)</td>
                <td>@Html.TextAreaFor(model => model.Remarks, new { style = "width:300px;" })</td>
            </tr>
        </table>
    </fieldset>
}

Can you not just use `data: $("ResolveLogForm").serialize()`? and also specify what the `dataType` being sent is? (`json`) — Sandman, May 18 '17 at 09:05
What about using `FromBody` attribute on your controller parameter? `public ActionResult ResolveLogPost([FromBody]BiometricLog model)` — Sandman, May 18 '17 at 09:11
Okay, what about sending the data with the name of the parameter expected? `data: { "model": $('ResolveLogForm', $(this)).serialize() }` — Sandman, May 18 '17 at 09:28
Also, has changing this changed the issue? i.e. is the controller not being reached by any of the suggestions? Any errors in console window etc — Sandman, May 18 '17 at 09:28
no there are no errors. I put an alert message just before ajax call which is being displayed. — kashi_rock, May 18 '17 at 09:52
Maybe try [debugging your AJAX call](http://stackoverflow.com/a/21617685/6224482), if you haven't already done so. — Sandman, May 18 '17 at 10:16
@Sandman, while debugging, I got `500 Internal Server Error` — kashi_rock, May 18 '17 at 11:28
if you have the console window open, navigate to the `Network` tab then execute the code which fires your `AJAX` call. Find the name of the `POST` request in the `Name` list, click on it and look at the `Preview` tab which should provide more information on the error. — Sandman, May 18 '17 at 11:58

score 1 · Accepted Answer · answered May 19 '17 at 08:51

Finally its working after couple of changes. Although, I am really not convinced that these were really the root of the cause but still happy that it worked out ;). I made following changes:

Partial view:

Added null route values to use different overload
Changed enctype to @enctype

@using (Html.BeginForm("ResolveLogPost", "Attendance", null, FormMethod.Post, new { @id = "form", @enctype = "multipart/form-data" }))

Controller post action is not being called from Jquery dialog using ajax

1 Answers1