问题描述
好的,我想知道是否有可能,能够从控制器调用对话框并学习如何操作。
我知道这是通常不推荐的东西,因为控制器相对于视图异步运行,但在这种情况下,我真的需要这样做,因为它会大大简化代码并使我的网页运行速度要慢得多。
自从这样做之后,如果我在控制器中将用户发送到不同的视图,如果满足某些条件,控制器接收到的数据,就像这样:
[HttpPost]
public IActionResult Create(List<Int> list)
{
//does stuff with the data in list and then if X happens:
return View("VIEW RETURNED");
}
所以我想要的是,而不是发生这种情况,如果控制器中满足某些条件,则将用户发送到不同的视图,我希望这使一个对话框出现在视图中,如下所示:
>https://miro.medium.com/max/2048/1*8vxEG0_9CBNboImHBhEP_w.png
对话框会在 html 代码中显示一些信息,如果我按“取消”会发生一些事情,如果我按“接受”会发生其他事情,并且信息会通过一些更改发送回控制器。
真的不可能做到这一点并从控制器管理对话框吗?我已经在互联网上搜索了所有内容,但没有找到任何相关内容。
解决方法
对话框以 html 代码显示一些信息,如果我按“取消” 有些事情发生了,如果我按接受其他事情,它就会发生,并且 信息被发送回控制器,并进行一些更改。
真的不可能做到这一点并从 控制器?我在网上找遍了都没有找到 任何关于它的东西。
根据您的描述,您想使用弹出对话框来设置条件(取消和删除),如果用户选择其中之一,则应在控制器中执行某些操作。如果是这种情况,您可以使用Bootstrap Modal来显示对话框,并使用JQuery Ajax调用action方法并执行操作,代码如下:
Index.cshtml:在Bootstrap Modal中添加两个按钮,使用JQuery捕捉按钮点击事件,然后使用JQuery ajax调用action方法,在Ajax成功函数中做一些事情。
<!-- Button to Open the Modal -->
<button id="btnOpenModal" type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
Open modal
</button>
<!-- The Modal -->
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Modal Heading</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body" id="modalcontent">
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-danger">Yes,delete it</button>
@*<button type="button" class="btn btn-danger" data-dismiss="modal">Yes</button>*@
</div>
</div>
</div>
</div>
@section Scripts{
<script>
$(function () {
$("#btnOpenModal").click(function () {
// call the action method,in the success function add the return data in the Modal content.
$.ajax({
type: "Get",url: "/Home/GetViewContent",//remember change the controller to your owns.
success: function (data) {
console.log(data)
$('#modalcontent').html(data);
},error: function (response) {
console.log(response.responseText);
}
});
});
//Popup Modal's Cancel button click
$("#myModal").on("click",".btn-default",function () {
//since the button element using the data-dismiss attribute,there is no need to close the Modal via jquery.
// code. using jquery ajax do something
alert("Cancel button click");
});
//Popup Modal's delete button click
$("#myModal").on("click",".btn-danger",function () {
// code
alert("Delete button click");
//using the following code to close the popup modal.
$('#myModal').modal('hide') //or $("#myModal").modal('toggle');
//using JQuery Ajax to call the action method.
});
});
</script>
}
HomeController.cs:
public IActionResult Index()
{
return View();
}
public IActionResult GetViewContent()
{
return Ok("You'll lose all responses data. Are you sure you want to delete them?");
}
使用默认的_Layout.cshtml
[注意] 在上面的 Asp.net Core MVC 应用程序中,我使用的是默认模板/布局并且它已经使用了 Bootstrap 引用(JS+CSS),如果您没有使用默认模板/布局,您应该添加相关的 BootStrap 和 JQuery 参考。
截图如下:
更新:
要使用 JQuery ajax 调用使用 [ValidateAntiForgeryToken]
属性的 action 方法,我们应该在请求头中添加 RequestVerificationToken。请检查以下代码:
在Index.cshtml中添加以下代码:
@model WebApplication.Models.Book
<form asp-action="Create">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="form-group">
<label asp-for="BookId" class="control-label"></label>
<input asp-for="BookId" class="form-control" />
<span asp-validation-for="BookId" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="BookName" class="control-label"></label>
<input asp-for="BookName" class="form-control" />
<span asp-validation-for="BookName" class="text-danger"></span>
</div>
</form>
并且,在模态页脚中添加以下创建按钮
<button type="button" class="btn btn-primary btncreate" data-dismiss="modal">Create</button>
Book.cs:
public class Book
{
public int BookId { get; set; }
public string BookName { get; set; }
}
创建动作:
[HttpPost]
[ValidateAntiForgeryToken]
public IActionResult Create(Book book)
{
if (ModelState.IsValid)
{
var data = book;
return Ok("Insert Success");
}
return View();
}
然后,在创建按钮点击事件中,创建一个JS对象并发送给action方法:
//Popup Modal's Create button click
$("#myModal").on("click",".btncreate",function () {
//using JQuery Ajax to call the action method.
var book = {};
book.BookName = $("#BookName").val();
book.BookId = $("#BookId").val();
$.ajax({
url: "/Home/Create",type: "POST",data: book,beforeSend: function (request) {
request.setRequestHeader(
"RequestVerificationToken",$("[name='__RequestVerificationToken']").val());
},success: function (response) {
alert(response);
}
});
});
截图如下: