无法提交编辑表单

Question

I thought it would be a good idea and try to implement an edit form that takes place of the spot in the table with the data you are trying to edit. I have not been able to get my form to submit while the create form works the same and functions properly, here is the code that I need help with. This is the partial view of the edit form.

@using (Html.BeginForm("", "", FormMethod.Post, new { id = "PublisherEditForm" }))
{
@Html.AntiForgeryToken()

    @Html.ValidationSummary(true, "", new { @class = "text-danger" })
    @Html.HiddenFor(model => model.PublisherID)
    @*@Html.LabelFor(model => model.PublisherName, htmlAttributes: new { @class = "control-label col-md-2" })*@
    <td>
        @Html.EditorFor(model => model.PublisherName, new { htmlAttributes = new { @class = "form-control" } })
        @Html.ValidationMessageFor(model => model.PublisherName, "", new { @class = "text-danger" })
    </td>

    @*@Html.LabelFor(model => model.City, htmlAttributes: new { @class = "control-label col-md-2" })*@
    <td>
        @Html.EditorFor(model => model.City, new { htmlAttributes = new { @class = "form-control" } })
        @Html.ValidationMessageFor(model => model.City, "", new { @class = "text-danger" })
    </td>

    @*@Html.LabelFor(model => model.State, htmlAttributes: new { @class = "control-label col-md-2" })*@
    <td>
        @Html.EditorFor(model => model.State, new { htmlAttributes = new { @class = "form-control" } })
        @Html.ValidationMessageFor(model => model.State, "", new { @class = "text-danger" })
    </td>

    <td>
        <input id="saveUpdate" type="submit" value="Update Publisher" class="btn btn-primary" />
    </td>
}

Here is the Ajax that I am using to try and submit the form:

$('#PublisherEditForm').submit(function (e) {
        var formData = $(this).serializeArray();
        e.preventDefault();
        $('MessageContent').
        html("<div class='alert alert-info'>Please Wait...</div>");
        $.ajax({
            url: "@Url.Action("AjaxEdit", "PublishersEF")",
            type: "POST",
            data: formData,
            dataType: "json",
            success: function (data) {
                $('#MessageContent').html("<div class='alert alert-success'>Your record was updated!</div>");
                $('#PublisherEditForm')[0].reset();
                var row =
                    '<tr><td>' + data.PublisherName +
                    '</td><td>' + data.City +
                    '</td><td>' + data.State +
                    '</td><td> <a href="@Url.Action("Index", "PublishersEF")">Refresh View</a></td></tr>';
                $('#Publisher' + data.PublisherID).replaceWith(row);
                console.log('success');
                $('PublisherEdit').hide();
                $('#MessageContent').html('<div class="alert alert-warning">There was an error processing your update, please try again or contact the site administrator</div>');
            },
            error: function (e) {
                console.log('error');
                $('#MessageContent').html('<div class="alert alert-warning">There was an error processing your update, please try again or contact the site administrator</div>');
            }
        });
    });

I have tried to put a console.log inside both the success and error and I did not see either of them in the console

EDIT: here is the C# method:

[HttpGet]
    public PartialViewResult PublisherEdit(int id)
    {
        Publisher publisher = UnitOfWork.PublisherRepository.Find(id);
        return PartialView(publisher);
    }

    [HttpPost]
    [ValidateAntiForgeryToken]
    public JsonResult PublisherEdit(Publisher publisher)
    {
        UnitOfWork.PublisherRepository.Update(publisher);
        UnitOfWork.Save();
        return Json(publisher);
    }

I can confirm the UnitOfWork functions correctly. All this function does is connect to the database and updates/saves the information. This has worked in previous versions

Answer 1

I've face that kind of issues, and I resolved it doing this:

Declare your button as follows:

<input id="saveUpdate" value="Update Publisher" type="button" class="btn btn-primary" />

And add this js function:

$("#saveUpdate").on('click', function() {
    try {
        var currentForm = $("#PublisherEditForm");
        currentForm.append("<input type='hidden' name='flagButton' 
        id='flagButton' value='Publish' >");
        $(currentForm).submit();
    } catch (e) {

    }
});

Hope it helps.