如何根据控制器的响应在视图中显示完全不同的模态？

Question

我的 Asp.Net 核心应用程序上有一个代码，我想通过模式和控制器的响应专门处理它，它根据从视图发送的值而变化。

现在我有以下代码，它所做的是更改 Modal 上 div 中的消息，用于从控制器接收到的响应，以及调用所述 Modal 的按钮。

视图的一般部分：

@model AP.ViewModels.UK1

<div class="container">
    <div class="card level-3">
        <h3>Ac</h3>
        <hr />
        <div class="row">
            <div class="col-md-4">
                <form asp-action="Create">
                    <div class="form-group">
                        <input asp-for="UK2" class="form-control" />
                        <span asp-validation-for="UK2" class="text-danger"></span>
                    </div>

                    <div class="form-group">
                        <input asp-for="UK3" class="form-control" />
                        <span asp-validation-for="UK3" class="text-danger"></span>
                    </div>


                    <div class="form-group">
                        <input type="submit" value="UK5" class="btn btn-primary" /> |
                        <!-- Button to Open the Modal -->
                        <button id="btnOpenModal" type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
                            CALL CONTROLLER / MODAL BUTTON
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

视图上的模态代码：

<!-- 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">CONTROLLER RESPONSE:</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-danger" data-dismiss="modal">CANCEL</button>
                <button type="button" class="btn btn-primary" data-dismiss="modal">OK1</button>
            </div>
        </div>
    </div>
</div>

调用模态并将数据发送到控制器的脚本：

<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="~/css/site.css" />
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script>
    $(function () {
        $("#btnOpenModal").click(function () {
            var uk = {};
            uk.UK2 = $("#UK2").val();
            uk.UK3 = $("#UK3").val();
            $.ajax({
                type: "POST",
                url: "/UK1/GetViewContent",
                data: uk,
                beforeSend: function (request) {
                    request.setRequestHeader(
                        "RequestVerificationToken",
                        $("[name='__RequestVerificationToken']").val());
                },
                success: function (data) {

                    $('#modalcontent').html(data);
                },
                error: function (response) {
                    $("#myModal").modal('toggle')

                }
            });
        });

        $("#myModal").on("click", ".btn-default", function () {
              
                alert("Cancel button click");
            });
        
        $("#myModal").on("click", ".btn-danger", function () {
            // code
            alert("Delete button click");

            $('#myModal').modal('hide') 
        });
    });
</script>

控制器代码：

[HttpPost]
[ValidateAntiForgeryToken]
public IActionResult GetViewContent(UK1 uk)
{

if (uk.UK2 == uk.UK3)
{
                
return Ok("A-CASE 1");
}

if (uk.UK2 >= uk.UK3)
{
                
return Ok("B-CASE 2");
}

if (uk.UK2 <= uk.UK3)
{
                
return Ok("C-CASE 3");
}
            
            
if (uk.UK2 == null)
{
                
return Ok("D-CASE 4");
}
            
if (uk.UK3 == null)
{
                
return Ok("E-CASE 5");
}
            
 }       
         
[HttpPost]
[ValidateAntiForgeryToken]
public async Task<IActionResult> Create(UK1 ukk)
{
            
return View("Home1");
}
        
[HttpPost]
[ValidateAntiForgeryToken]
public async Task<IActionResult> CreateDos(UK1 ukk)
{
            
return View("Home2");
}

现在这就是我想用代码实现的： 我希望我的代码有 5 种可能的模态，一种来自控制器的每种可能响应，并且这些模态中的每一种都有不同的消息，以及不同的按钮，我的问题是，我该怎么做？我有哪些选择？

我首先想到的是 HTML 视图中有 5 个不同模态的代码，根据控制器的响应，代码调用不同的模态，问题是我不知道该怎么做，因为我不知道如何在脚本代码中将控制器响应读取为 'variable'，或者我应该如何放置取决于响应的“Ifs”在脚本中，但我知道这应该放在代码的这一部分中：

                success: function (data) {

                    $('#modalcontent').html(data);
                },
                error: function (response) {
                    $("#myModal").modal('toggle')

                }

无论如何，我想要的 5 个模态与此类似：

1)如果从 Controller 收到的答案是“A-CASE 1”，Modal 应该在 div 上收到“A”消息, 只有取消按钮应该出现在模态框的底部。

2)如果从 Controller 收到的答案是“B-CASE 2”，Modal 应该在 div 上收到“B”消息，并且 Ok 和 Cancel 按钮都应该出现在 Modal 的底部，Ok 按钮应该叫我控制器的 Create 方法。

3)如果从 Controller 收到的答案是“C-CASE 3”，Modal 应该在 div 上收到“C”消息，并且 Ok 和 Cancel 按钮都应该出现在 Modal 的底部，Ok 按钮应该叫我控制器的 CreateDos 方法。

4)如果从 Controller 收到的答案是“D-CASE 4”，Modal 应该在 div 上收到“D”消息, 只有取消按钮应该出现在模态框的底部。

5)如果从 Controller 收到的答案是“E-CASE 5”，Modal 应该在 div 上收到一条“E”消息, 只有取消按钮应该出现在模态框的底部。

无论如何，感谢您阅读所有内容并提前感谢，所有这一切只是因为我尝试学习如何让模态脚本做不同的事情，并考虑不同的情况，具体取决于发送的响应是什么Controller，因为我了解到问题的复杂性出现在Script环境的变量与View的变量存在的时间不同，我不知道在多大程度上可以处理'response' 由控制器作为变量发送，但如果可能的话，我想学习如何做，我想了解这一切。

Answer 1

这是一个工作演示：

英国1：

public class UK1
    {
        public string UK2 { get; set; }
        public string UK3 { get; set; }

    }

UK1控制器：

//UK2 and UK3 are string,so that they can be null.When comparing them,we need to change them to int

[HttpPost]
        [ValidateAntiForgeryToken]
        public string GetViewContent(UK1 uk)
        {
            
            if (Convert.ToInt32(uk.UK2) == Convert.ToInt32(uk.UK3))
            {

                return "A-CASE 1";
            }

            if (Convert.ToInt32(uk.UK2) >= Convert.ToInt32(uk.UK3))
            {

                return "B-CASE 2";
            }

            if (Convert.ToInt32(uk.UK2) <= Convert.ToInt32(uk.UK3))
            {

                return "C-CASE 3";
            }
            if (uk.UK2 == null)
            {

                return "D-CASE 4";
            }

            if (uk.UK3 == null)
            {

                return "E-CASE 5";
            }


            return "";

        }
        public IActionResult ShowUK1()
        {
            return View();
        }
        public IActionResult Create()
        {
            return Ok();
        }
        public IActionResult CreateDos()
        {
            return Ok();
        }

ShowUK1 视图（我将 OK1 按钮更改为 <a> 标签，并将 id 添加到 Ok1 并取消）：

<div class="container">
    <div class="card level-3">
        <h3>Ac</h3>
        <hr />
        <div class="row">
            <div class="col-md-4">
                <form asp-action="Create">
                    <div class="form-group">
                        <input asp-for="UK2" class="form-control" />
                        <span asp-validation-for="UK2" class="text-danger"></span>
                    </div>

                    <div class="form-group">
                        <input asp-for="UK3" class="form-control" />
                        <span asp-validation-for="UK3" class="text-danger"></span>
                    </div>


                    <div class="form-group">
                        <input type="submit" value="UK5" class="btn btn-primary" /> |
                        <!-- Button to Open the Modal -->
                        <button id="btnOpenModal" type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
                            CALL CONTROLLER / MODAL BUTTON
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<!-- 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">CONTROLLER RESPONSE:</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 id="cancel" type="button" class="btn btn-danger" data-dismiss="modal">CANCEL</button>
                <a id="ok1" class="btn btn-primary" >OK1</a>
                
            </div>
        </div>
    </div>
</div>
<script>
    $(function () {
        $("#btnOpenModal").click(function () {
            var uk = {};
            uk.UK2 = $("#UK2").val();
            uk.UK3 = $("#UK3").val();
            $.ajax({
                type: "POST",
                url: "GetViewContent",
                data: uk,
                beforeSend: function (request) {
                    request.setRequestHeader(
                        "RequestVerificationToken",
                        $("[name='__RequestVerificationToken']").val());
                },
                success: function (data) {
                    switch (data) {
                        case "A-CASE 1":
                            $("#ok1").attr("hidden", "hidden");
                            $('#modalcontent').html("A");
                            break;
                        case "B-CASE 2":
                            $("#ok1").removeAttr("hidden");
                            $("#ok1").attr("href", "Create");
                            $('#modalcontent').html("B");
                            break;
                        case "C-CASE 3":
                            $("#ok1").removeAttr("hidden");
                            $("#ok1").attr("href", "CreateDos");
                            $('#modalcontent').html("C");
                            break;
                        case "D-CASE 4":
                            $("#ok1").attr("hidden", "hidden");
                            $('#modalcontent').html("D");
                            break;
                        case "E-CASE 5":
                            $("#ok1").attr("hidden", "hidden");
                            $('#modalcontent').html("E");
                            break;
                        default:
                            break;

                    }

                },
                error: function (response) {
                    $("#myModal").modal('toggle')

                }
            });
        });
    });
    </script>

结果：

如何根据控制器的响应在视图中显示完全不同的模态？

How can I make a completely different Modal appear in the View, depending on the response from the Controller?

javascript

jquery

modal-dialog

razor

asp.net-core