无法提交编辑表单

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

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.

I have gotten it to work. Interestingly I could not keep the script tag in the index view. I had to put it back in the partial view (for some reason it wasn't working before). Here is the updated partial:

@model cStoreMVC.DATA.EF.Publisher

@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" value="Update" type="submit" class="btn btn-primary" />
    </td>
}
@section scripts{
@Scripts.Render("~/bundles/jqueryval")
}
<script>
$('#PublisherEditForm').submit(function (e) {
    var formData = $(this).serializeArray();
    e.preventDefault();
    $('#MessageContent').html("<div class='alert altert-info'>Please Wait...</div>");
    $.ajax({
        url: "@Url.Action("PublisherEdit", "PublishersEF")",
        type: "POST",
    data: formData,
    dataType: "json",
    success: function (data) {
        console.log('it worked');
        $('#MessageContent').html("<div class='alert alert-success'>Your Item Was Updated!!!</div>");
        $('#PublisherEditForm')[0].reset();


        var row =
            "<tr class='newRow'><td>" + data.PublisherName +
            '</td><td>' + data.City +
            '</td><td>' + data.State +
            '</td><td>Refresh to view options </td></tr>';
        $("#Publisher-" + data.PublisherID).replaceWith(row).find('tr.newRow:last');
    },
    error: function (e) {
        console.log(it);
        $('#MessageContent').html("<div class='alert alert-warning'>There was an error. Please try again or contact the site administrator.</div>");
    }
});
});
</script>

I have found out that forms and table rows do not work together nicely(this might be why the form did not submit) if you want it to be horizontal I was told and I can confirm it works use display: flex; justify-content: space-between;. If you want to display it in a table like I did remove all the table data tags from the form itself and wrap the whole form in a table data tag. It doesn't look the best but it works! For those with future issues like this I hope this helps!