Question

我认为这是一个好主意，并尝试实现一个编辑表单，该表单取代表中包含您要编辑的数据的位置。我无法让我的表单提交，而创建表单工作相同并且功能正常，这是我需要帮助的代码。这是编辑表单的局部视图。

@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>
}

以下是我用来尝试提交表单的Ajax：

$('#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>');
            }
        });
    });

我试图在成功和错误中放入一个console.log，但我没有在控制台中看到它们中的任何一个

编辑：这是C＃方法：

[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);
    }

我可以正确确认UnitOfWork功能。所有这个功能都连接到数据库并更新/保存信息。这在以前的版本中有效

Answer 1

我遇到了这样的问题，我解决了这个问题：

按如下方式声明您的按钮：

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

并添加此js函数：

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

    }
});

希望它有所帮助。

Answer 2

我已经开始工作了。有趣的是，我无法在索引视图中保留脚本标记。我不得不把它放回到部分视图中（出于某种原因它之前没有工作）。这是更新的部分：

@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>

我发现表单和表行不能很好地协同工作（这可能就是表单没有提交的原因）如果你希望它是水平的我被告知我可以确认它的工作原理使用display: flex; justify-content: space-between; 。如果你想在表中显示它，就像我从表单本身删除所有表数据标记，并将整个表单包装在表数据标记中。它看起来不是最好但它有效！对于那些有这样未来问题的人，我希望这会有所帮助！

无法提交编辑表单

2 个答案: