Question

我正在开发一个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

}

Answer 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”的隐藏输入，其中包含单击的提交按钮的值（存档或拒绝）。

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

（如评论中所述，禁用输入未随表单一起提交）

提交时未发送MVC按钮值

1 个答案: