MVC FormAction引导程序模式确认

问题描述

我在这里遇到困难。我想创建一个全局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",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>

解决方法

问题在于，在确认javascript有机会运行之前，表单已提交。

一种解决方案是隐藏真正的提交并向用户显示虚假的提交。单击伪提交后，显示模式。确认模式后，触发实际提交按钮的click事件处理程序。

为此，请将表单更改为此

@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",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',fClose);
}