-Asp.Net- 如何从控制器调用对话框？

如何解决-Asp.Net- 如何从控制器调用对话框？

好的，我想知道是否有可能，能够从控制器调用对话框并学习如何操作。

我知道这是通常不推荐的东西，因为控制器相对于视图异步运行，但在这种情况下，我真的需要这样做，因为它会大大简化代码并使我的网页运行速度要慢得多。

自从这样做之后，如果我在控制器中将用户发送到不同的视图，如果满足某些条件，控制器接收到的数据，就像这样：

[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">&times;</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);
                }
            });
        });

截图如下：