如何从同一视图中的模式窗口触发视图中定义的ActionLink（控制器方法）。使用jQuery？

我有一个ASP.NETMVC应用程序，它的视图有表单、一些按钮和模式弹出窗口

我的“保存”按钮代码运行良好。我不包括下面的代码

我知道我可以使用标准的Windows confirm，但我不喜欢那种难看的confirm

@Html.ActionLink("Cancel Changes", "GetUserProfile", "UserProfile", null, new 
{ onclick = "return confirm('Are you sure you wish to continue');"  })  

所以我想使用外观更好的引导模式

我的问题是取消按钮。此按钮允许用户取消更改并将其恢复到原始状态

单击该按钮时，我将阻止默认行为发生，并显示引导模式弹出窗口以确认取消更改

从“是”选项中，我现在想要触发默认行为，即在actionlink中为“取消”按钮定义的控制器操作方法。单击时，action方法再次获取数据，并在进行更改之前返回其原始状态的整个相同视图-因此取消更改

我不认为我可以在yes选择中使用AJAX调用来调用该操作方法，因为该方法重新检索数据并发回整个视图

$.ajax({
   type: 'POST',
   url: '@Url.Action("GetUserProfile", "UserProfile")',        
   success: function (response) {
   // - Do a refresh.  
   // - Re-render the view returned which is itself.

   // 1st - remove the entire current view and then replace it with the same view sent back. 
   // But how can I remove the current view as I would be removing the jQuery 
   // code I am executing as it is part of the view?

   $('div [class=zoneRemove']').remove();

   var view = $("<div>").addClass('zoneRemove);

   // Using the 'response'(the view) returned by the controller.
   view.append(response);
 },
 error: function (xhr, ajaxOptions, thrownError) {
   alert('Critical Error: something is wrong in the call to GetUserProfile for canclel changes! Status: ' + xhr.status + '. Error: ' + thrownError.toString() + '. Response Text: ' + xhr.responseText);            }
 });

$.ajax({
键入：“POST”，
url:'@url.Action（“GetUserProfile”，“UserProfile”），
成功：功能（响应）{
//-刷新一下。
//-重新呈现返回的视图（视图本身）。
//第一个-删除整个当前视图，然后用发送回的相同视图替换它。
//但是如何像删除jQuery一样删除当前视图呢
//我正在执行的代码，因为它是视图的一部分？
$（'div[class=zoneRemove']）。删除（）；
变量视图=$（“”）.addClass（'zoneRemove）；
//使用控制器返回的“响应”（视图）。
视图。追加（响应）；
},
错误：函数（xhr、ajaxOptions、thrownError）{
警报（'严重错误：调用GetUserProfile进行canclel更改时出错！状态：'+xhr.Status+'。错误：'+thrownError.toString（）+'。响应文本：'+xhr.responseText）；}
});

在AJAX调用的“success:”中，我必须删除整个当前视图，然后用发送回的相同视图替换它。但是，如何删除当前视图，就像删除我正在执行的jQuery代码一样，因为它是视图的一部分

那么，我还可以如何处理返回整个视图的操作方法并重新呈现返回的视图呢

---

视图（简化）：

@model GbngWebClient.Models.userprofileformainvm
@使用（Html.BeginForm（“ProcessSaveUserProfile”、“UserProfile”、FormMethod.Post、new{enctype=
“多部分/表单数据”，id=“formId”}）
{
@ActionLink（“取消更改”、“GetUserProfile”、“UserProfile”、空、新{
@class=“btn btn信息取消按钮”}）
}
如果取消，则不会处理任何未保存的更改。
继续？
对
不
@Scripts.Render（“~/bundles/jqueryval”）
@Scripts.Render（“~/bundles/jquery”）
@Scripts.Render（“~/bundles/bootstrap”）
@style.Render（“~/Content/css”）
$（文档）.ready（函数（）{
$（“.cancelButton”）。单击（函数（e）{
//触发（显示）模态。
$（“#myModal13”）.modal({
背景：“静态”，
键盘：错误
});
//防止ActionLink转到控制器。
e、 预防默认值（）；
});
$（'.btn-yes13'）。单击（函数（）{
//隐藏模态。
$（'myModal13'）.modal（'hide'）；
//问题：现在如何启动ActionLink以转到控制器方法？
//返回。
返回true；
});
$（“.btn-no13”）。单击（函数（）{
$（“#myModal13”）.modal（“隐藏”）；
返回false；
});
//一旦模式开关关闭，请将其拆下。
$（“#myModal13”）.on（'hidden.bs.modal'，function（）{
$（“#myModal13”）.remove（）；
}); 
});   

我有一个可行的解决方案

我删除了actionlink：

<div class="col-md-3">
   @Html.ActionLink("Cancel Changes", "GetUserProfile", "UserProfile", null, new { 
   @class = "btn btn-info cancelButton" })
</div>

我删除了“是”单击功能

从.cancelButton函数中，我删除了：

e.preventDefault();

以下是最终解决方案：

@model GbngWebClient.Models.UserProfileForMaintVM

@using (Html.BeginForm("ProcessSaveUserProfile", "UserProfile", FormMethod.Post, new { 
enctype = "multipart/form-data", id = "formId" }))
{
    <div class="panel-body">
        <div class="row">
            <div class="form-group">
                <div class="col-md-3">
                     <input type="submit" value="Save" class="btn btn-primary saveButton" />
                </div>
                <div class="col-md-3">
                    <input class="btn btn-info cancelButton" value="Cancel Changes">
                </div>
            </div>
        </div>
    </div>
}

<div class="modal fade" id="myModal13" role="dialog" display="none">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body" style="padding:10px;">
                <h4 class="text-center">Any unsaved changes will not be processed if you cancel.   Continue ?</h4>
                <div class="text-center">
                    @* Goes to the Controller. No need for AJAX. *@
                    <a class="btn btn-info btn-yes13" href="/UserProfile/GetUserProfile">Yes</a>
                    <a class="btn btn-default btn-no13">No</a>
                </div>
            </div>
        </div>
    </div>
</div>

@Scripts.Render("~/bundles/jqueryval")
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@Styles.Render("~/Content/css")

<script type="text/javascript">
    $(document).ready(function () {
        $(".cancelButton").click(function (e) {
            // Trigger(show) the modal.
            $("#myModal13").modal({
                backdrop: 'static',
                keyboard: false
            });
        });

        $(".btn-no13").click(function () {
            $("#myModal13").modal("hide");

            return false;
        });

        // Remove the modal once it is closed.
        $("#myModal13").on('hidden.bs.modal', function () {
            $("#myModal13").remove();
        });
   });
</script>

@model GbngWebClient.Models.userprofileformainvm
@使用（Html.BeginForm（“ProcessSaveUserProfile”，“UserProfile”，FormMethod.Post，new{
enctype=“多部分/表单数据”，id=“formId”}）
{
}
如果取消，则不会处理任何未保存的更改。继续？
@*转到控制器。不需要AJAX*@
不
@Scripts.Render（“~/bundles/jqueryval”）
@Scripts.Render（“~/bundles/jquery”）
@Scripts.Render（“~/bundles/bootstrap”）
@style.Render（“~/Content/css”）
$（文档）.ready（函数（）{
$（“.cancelButton”）。单击（函数（e）{
//触发（显示）模态。
$（“#myModal13”）.modal({
背景：“静态”，
键盘：错误
});
});
$（“.btn-no13”）。单击（函数（）{
$（“#myModal13”）.modal（“隐藏”）；
返回false；
});
//一旦模式开关关闭，请将其拆下。
$（“#myModal13”）.on（'hidden.bs.modal'，function（）{
$（“#myModal13”）.remove（）；
});
});

尝试下面的方法，并告诉我是否有效。

href="/UserProfile/GetUserProfile" 

e.preventDefault();

@model GbngWebClient.Models.UserProfileForMaintVM

@using (Html.BeginForm("ProcessSaveUserProfile", "UserProfile", FormMethod.Post, new { 
enctype = "multipart/form-data", id = "formId" }))
{
    <div class="panel-body">
        <div class="row">
            <div class="form-group">
                <div class="col-md-3">
                     <input type="submit" value="Save" class="btn btn-primary saveButton" />
                </div>
                <div class="col-md-3">
                    <input class="btn btn-info cancelButton" value="Cancel Changes">
                </div>
            </div>
        </div>
    </div>
}

<div class="modal fade" id="myModal13" role="dialog" display="none">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body" style="padding:10px;">
                <h4 class="text-center">Any unsaved changes will not be processed if you cancel.   Continue ?</h4>
                <div class="text-center">
                    @* Goes to the Controller. No need for AJAX. *@
                    <a class="btn btn-info btn-yes13" href="/UserProfile/GetUserProfile">Yes</a>
                    <a class="btn btn-default btn-no13">No</a>
                </div>
            </div>
        </div>
    </div>
</div>

@Scripts.Render("~/bundles/jqueryval")
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@Styles.Render("~/Content/css")

<script type="text/javascript">
    $(document).ready(function () {
        $(".cancelButton").click(function (e) {
            // Trigger(show) the modal.
            $("#myModal13").modal({
                backdrop: 'static',
                keyboard: false
            });
        });

        $(".btn-no13").click(function () {
            $("#myModal13").modal("hide");

            return false;
        });

        // Remove the modal once it is closed.
        $("#myModal13").on('hidden.bs.modal', function () {
            $("#myModal13").remove();
        });
   });
</script>