MVC FormAction Bootstrap 模态确认

Question

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

@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 都会提交 select。

这是 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);
}

MVC FormAction Bootstrap 模态确认

MVC FormAction Bootstrap Modal Confirm

javascript

asp.net-mvc

modal-dialog

twitter-bootstrap