问题描述
我有一个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>