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

如何解决如何从同一视图中的模态窗口触发视图中定义的ActionLink控制器方法使用jQuery吗？

我有一个ASP.NET MVC应用，该应用的视图具有窗体，一些按钮和模式弹出窗口。

我的“保存”按钮代码正常工作。我不在下面包含该代码。

我知道我可以使用标准的Windows确认，但我不喜欢该丑陋的确认。

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

所以我想使用外观更好的Bootstrap Modal。

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

单击该按钮时，我会防止发生默认行为，并显示Bootstrap模式弹出窗口以确认取消更改。

现在，从“是”选择中，我要触发默认行为，这是在动作链接中为“取消”按钮定义的控制器动作方法。单击后，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调用的“成功：”中，我将必须删除整个当前视图，然后将其替换为发送回的相同视图。但是，如何删除当前视图，就像删除视图中正在执行的jQuery代码一样？

那么我该如何处理返回整个视图并重新渲染返回视图的操作方法呢？

---

视图（简体）：

@model GbngWebClient.Models.UserProfileForMaintVM

@using (Html.BeginForm("ProcessSaveUserProfile",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">
                    @Html.ActionLink("Cancel Changes",new { 
@class = "btn btn-info cancelButton" })
                </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">
                    <a class="btn btn-info btn-yes13">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
            });

            // Prevent the ActionLink from going to the controller.
            e.preventDefault();
        });
           
        $('.btn-yes13').click(function() {
            // Hide the modal.
            $('#myModal13').modal('hide');

            // CONCERN: HOW TO Now FIRE THE ActionLink TO GO TO THE CONTROLLER METHOD?

            // Return.
            return true;
        });

        $(".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>

解决方法

我有一个可行的解决方案。

我删除了操作链接：

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

并替换为：

<input class="btn btn-info cancelButton" value="Cancel Changes">

在模式的“是”按钮上，我添加了：

href="/UserProfile/GetUserProfile" 

我删除了“是”点击功能。

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

e.preventDefault();

这是最终的解决方案：

@model GbngWebClient.Models.UserProfileForMaintVM

@using (Html.BeginForm("ProcessSaveUserProfile",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>