提交时未发送 MVC 按钮值答案

【问题标题】：MVC button value not sent on submit提交时未发送 MVC 按钮值
【发布时间】：2018-04-17 15:38:02
【问题描述】：

我正在开发一个 MVC 项目，我在其中发布了几个按钮，但具有单独的值，因此控制器知道该怎么做，如下所示。

<input type="submit" value="Reject" name="rejectHighlight" class="icon-cancel-1 btn btn-danger" />
<input type="submit" value="Archive" name="archiveHighlight" class="icon-cancel-1 btn btn-danger" />

在我添加以下 javascript 代码来处理双击之前，这一切都运行良好。

$(document).on('submit', 'form', function () {
    var buttons = $(this).find('[type="submit"]');

    if ($(this).valid()) {
        buttons.each(function (btn) {
            $(buttons[btn]).prop('disabled', true);
        });
    }
    else {
        buttons.each(function (btn) {
            $(buttons[btn]).prop('disabled', false);
        });
    }
});

现在 JavaScript 代码可以完美运行，我无法双击，但是当它发布到控制器时，我现在丢失了按钮值。

我没有使用 JavaScript 的经验，也无法在我的搜索中找到更正此问题的答案。有人可以为我指出如何在提交时再次包含这些值的正确方向吗？

更新为显示视图和控制器方法，如下所示。

下面是视图

@model OperationHighlights.Models.Highlight

@{
    ViewBag.Title = "Edit Highlight";
}

<h2>Edit Highlight</h2>


@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()

    <div class="form-horizontal">
        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        @Html.HiddenFor(model => model.Id)

        @if (ViewBag.Message != null)
        {
            <ul>
                <li class="text-success">@Html.Raw(ViewBag.Message)</li>
            </ul>
        }

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

        <div class="form-group">
            @Html.LabelFor(model => model.OrigGroupId, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.DropDownList("CurrGroupId", null, htmlAttributes: new { @class = "form-control" })
                @Html.ValidationMessageFor(model => model.CurrGroupId, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.ClassificationId, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.DropDownList("ClassificationId", null, htmlAttributes: new { @class = "form-control" })
                @Html.ValidationMessageFor(model => model.ClassificationId, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Description, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.TextAreaFor(model => model.Description, 5, 100, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Description, "", new { @class = "text-danger" })
            </div>
        </div>

        <hr />

        @if (ViewBag.SubmitReview == "Review")
        {
            <div class="form-group">
                @Html.LabelFor(model => model.Comments, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.TextAreaFor(model => model.Comments, 5, 100, new { htmlAttributes = new { @class = "form-control" } })
                </div>
            </div>
            <div class="form-group">
                <div class="col-md-offset-2 col-md-10">
                    <input type="submit" value="Save" class="btn btn-default" />
                    <input type="submit" value="Approve" name="submitHighlight" class="icon-check btn btn-default" />
                    <input type="submit" value="Reject" name="rejectHighlight" class="icon-cancel-1 btn btn-danger" />
                    <input type="submit" value="Archive" name="archiveHighlight" class="icon-cancel-1 btn btn-danger" />
                </div>
            </div>
        }
        else
        {
            <div class="form-group">
                <div class="col-md-offset-2 col-md-10">
                    <input type="submit" value="Save" class="btn btn-default" />
                    <input type="submit" value="Submit" name="submitHighlight" class="btn btn-default" />
                </div>
            </div>
        }
    </div>
}

下面是控制器方法

[HttpPost, ActionName("Edit")]
[ValidateAntiForgeryToken]
public ActionResult EditPost(int? id, string submitHighlight, string rejectHighlight, string archiveHighlight)
{
    if (id == null)
    {
        return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
    }

    Models.Highlight highlightToUpdate = db.Highlights.Find(id);
    if (TryUpdateModel(highlightToUpdate, "", new string[] { "Title", "Description", "ClassificationId", "CurrGroupId", "Comments" }))
    {
        try
        {
            if (!string.IsNullOrEmpty(submitHighlight))
            {
                // Do some work here
            }

            if (!string.IsNullOrEmpty(rejectHighlight))
            {
                // Do some work here
            }

            if (!string.IsNullOrEmpty(archiveHighlight))
            {
                // Do some work here
            }
            db.SaveChanges();
        }
        catch (DataException dex)
        {
            // Log the error
            ExceptionHandling.CreateDataErrorLog(dex, 1);

            // Alert the user
            ModelState.AddModelError("", "Unable to edit highlight. Please try again, and if the problem persists see your system administrator.");
        }
    }

    // Redirect Logic Here

}

【问题讨论】：

您将需要发布完整的 html 表单以及控制器方法。
查看这个答案：stackoverflow.com/a/7357314/1819684 你禁用了按钮，因此它没有按照规范提交它的值。
@gforce301 - 但这让我回到了原来的位置，并允许用户双击或三次单击按钮并导致多次提交。您将如何停止多次点击并能够将数据传递给控制器。
我个人不会使用“提交”类型的输入按钮。我会使用带有点击处理程序的button 元素并通过Ajax 提交表单。这样你就可以控制提交的动作了。
@gforce301 感谢您提供信息。目前，我已经设法通过代码捕获和处理任何可能的多次点击。我希望我只是遗漏了一些东西，并且有一种快速的方法可以在全球范围内捕捉到这一点。正如您在未来版本中描述的那样，我创建了故事来探索更改按钮的选项。

标签： javascript asp.net-mvc

【解决方案1】：

这样做的一种方法是在提交表单时生成隐藏输入：

$(function () {
    // Set up click handlers on each submit button
    $("form").find("input[type='submit']").each(function () {
        $(this).click(function () {
            $(this).closest("form").find("input[type='submit']").removeClass("active");
            $(this).addClass("active");
        });
    });
});

$(document).on('submit', 'form', function (e) {
    // Remove any added inputs (if there are any)
    $('input[name=acceptReject]').remove();
    var buttons = $(this).find('[type="submit"]');
    if ($(this).valid()) {
        // Add hidden input with name acceptReject and value of button clicked value
        $('<input>').attr({
            type: 'hidden',
            name: 'acceptReject',
            value: $(this).find(".active").val()
        }).appendTo('form');

        buttons.each(function (btn) {
            $(buttons[btn]).prop('disabled', true);
        });
    }
    else {
        buttons.each(function (btn) {
            $(buttons[btn]).prop('disabled', false);
        });
    }
});

这将提交一个名为“acceptReject”的隐藏输入，其值为单击的提交按钮（存档或拒绝）。

您必须修改控制器参数和代码以接受具有这些值的string acceptReject，并从提交按钮中删除参数（和代码）。

（如 cmets 中所述，禁用的输入不会与表单一起提交）

【讨论】：