MVC FormAction Bootstrap 模态确认

Question

我在这里遇到了困难。我想创建一个全局 Javascript 函数，该函数阻止表单按钮提交，直到在模式上选择了一个选项，并且可以在系统中的任何地方使用。我有一个表格，这里是简化的：

@using (Html.BeginForm("UserCreate", "Administration", FormMethod.Post,
                      new { @Id = "user-form", @Style = "color:#595959;" }))
{
    <input name="submit"
           type="submit"
           class="button"
           id="removeAccount"
           value="Remove account" 
           formaction="@Url.Action("DeleteAccount", "Administration",
                         new { userAuthenticationId = Model.UserAuthentication.Id, 
                               userId = Model.UserId })" 
           formmethod="post"
           onclick="return confirmDialog('Are you sure you wish to remove this account?');"/>

    <input name="submit" type="submit" class="button" id="save" value="Create user"/>
}

有一个提交整个表单的按钮，但还有另一个按钮可以向控制器发布一个名为“RemoveAccount”的请求。我想要一个确认模式来阻止 RemoveAccount 提交。我希望它是全局的，所以我可以在<input> 中添加这样的一行，因为系统中有很多这样的实例。我怎样才能做到这一点？使用当前代码，模式会显示，但无论您选择什么，RemoveAccount 都会提交。

这里是confirmDialog函数：

function confirmDialog(message) {

    var fClose = function () {        
        modal.modal("hide");
        return false;
    };

    var onConfirm = function () {
        modal.modal("hide");
        return true;
    };
    
    var modal = $("#confirmModal");
    modal.modal("show");
    $("#confirmMessage").empty().append(message);
    $("#confirmOk").unbind().one('click', onConfirm);
    $("#confirmCancel").unbind().one("click", fClose);
}

还有模态的html：

<!-- Modal -->
<div class="modal fade" id="confirmModal" tabindex="-1" role="dialog" aria-labelledby="confirmModalTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div id="confirmMessage" class="modal-body">
                
            </div>
            <div class="modal-footer">
                <button id="confirmOk" type="button" class="button">Ok</button>
                <button id="confirmCancel" type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
            </div>
        </div>
    </div>
</div>

Answer 1

问题是表单在您确认 javascript 有机会运行之前提交。

一种解决方案是隐藏真实提交并向用户显示虚假提交。当点击虚假提交时，显示模式。并且当模态被确认时触发真正的提交按钮的点击事件处理程序。

为此，请将您的表单更改为此

@using (Html.BeginForm("UserCreate", "Administration", FormMethod.Post,
                      new { @Id = "user-form", @Style = "color:#595959;" }))
{
    <input name="submit" type="submit" class="button" id="removeAccount"
           value="Remove account"
           formaction="@Url.Action("DeleteAccount", "Administration",
                         new { userAuthenticationId = Model.UserAuthentication.Id,
                               userId = Model.UserId })"
           formmethod="post"
           style="display:none;"
            />

    <button type="button" 
            onclick="return confirmDialog(event,'Are you sure you wish to remove this account?');">
            Remove account
    </button>
    <input name="submit" type="submit" class="button" id="save" value="Create user" />
}

和你的javascript到这个

 function confirmDialog(event,message) {
    event.preventDefault();       

    var fClose = function () {
        modal.modal("hide");
        return false;
    };

    var onConfirm = function () {
        modal.modal("hide");
        $("#removeAccount").click();  //trigger the click event handler of the real submit
        return true;
    };

    var modal = $("#confirmModal");
    modal.modal("show");
    $("#confirmMessage").empty().append(message);
    $("#confirmOk").unbind().one('click', onConfirm);
    $("#confirmCancel").unbind().one("click", fClose);
}

编辑 为了使此方法更可重用，您可以将伪造的提交更改为此

<button type="button" 
              onclick="return confirmDialog(event,'#removeAccount','Are you sure you wish to remove this account?');">
       Remove account
</button>

即将您要提交的事物的 id 作为参数传递。然后你可以把 javascript 改成这个

function confirmDialog(event,submitToConfirm,message) {
    event.preventDefault();       

    var fClose = function () {
        modal.modal("hide");
        return false;
    };

    var onConfirm = function () {
        modal.modal("hide");
        $(submitToConfirm).click();
        return true;
    };

    var modal = $("#confirmModal");
    modal.modal("show");
    $("#confirmMessage").empty().append(message);
    $("#confirmOk").unbind().one('click', onConfirm);
    $("#confirmCancel").unbind().one("click", fClose);
}