How can I solve this complex problem of Dialogs/Modals and Scripts which includes communication with the BackEnd?
Question
-
User483634116 posted
I have a code similar to this on the View from my Asp.Net Core 5.0.1 App, which at the end includes a Script code which open a Modal, which is called by the button which has the label Check, and in the JavaScript/Script/JQuery code is stored the values written in the view for the variables 'Ac1' and 'Ac2' of the model, on the variable 'AC' from the Script, which is sent to the Controller, to a method which this Modal calls:
@model Cm.ViewModels.Ac <div class="container"> <div class="card level-3"> <h3>Ac</h3> <hr /> <div class="row"> <div class="col-md-12"> <form asp-action="Create"> <div class="form-group"> <div>Ac1</div> <input asp-for="Ac1" type="time" class="form-control" /> <span asp-validation-for="Ac1" class="text-danger"></span> </div> <div class="form-group"> <div>Ac2</div> <input asp-for="Ac2" type="time" class="form-control" /> <span asp-validation-for="Ac2" class="text-danger"></span> </div> <div class="form-group"> <input type="submit" value="SAVE" class="btn btn-primary" /> | <!-- Button to Open the Modal --> <button id="btnOpenModal" type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal"> CHECK </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">CHECK AC:</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-danger" data-dismiss="modal">CANCEL</button> <button type="button" class="btn btn-primary" data-dismiss="modal">OK</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 AC = {}; AC.Ac1 = $("#Ac1").val(); AC.Ac2 = $("#Ac2").val(); $.ajax({ type: "POST", url: "/AC/GetViewContent", data: AC, 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>Controller Code:
[HttpPost] [ValidateAntiForgeryToken] public IActionResult GetViewContent(Ac ACM) { if (ACM.Ac1 == null || ACM.Ac2 == null) { return Ok("10."); } if (ACM.Ac1 >= ACM.Ac2) { return Ok("11"); } if (ACM.Ac1 <= ACM.Ac2) { return Ok("12."); } if (ACM.Ac1 == ACM.Ac2) { return Ok("44."); } } [HttpPost] [ValidateAntiForgeryToken] public async Task<IActionResult> Create(Ac ACP) {
return View("YES"); }Right now, all that the code does is that it loads me a different message in the Modal, depending on whether Ac1 or Ac2 are null, if Ac1 is greater than Ac2, if Ac2 is equal to Ac2, etc.
Now the really complex part of the problem:
The behavior of the code is far from what I would really like to do with it, and what I post now is just a test.
What I would really like the code to do is show me on the View a completely different Modal depending on the value returned by the Controller, instead of just changing the message which the Modal shows in just one Div depending on that answer, the way I wanted to do this originally, is to find how to copy the message that the controller returns, in some variable of the View, and make this change what is shown in the View, through Ifs in the Modal that depended on that local variable, but I had to learn that doing that is technically impossible, since Script variables and View variables exist in completely different environments and times, which don't communicate directly with each other, ok.
So, how about this?:
How about, if I have 4 different Modals in my view code, and depending on whether the controller response is "10." , "11", "12." or "44." the Script calls me to a different Modal, and opens the Modal corresponding to that answer? Is it possible to do that, and if so, how can it be done??
How in this part of the code:success: function (data) { $('#modalcontent').html(data); }, error: function (response) { $("#myModal").modal('toggle') }how in that part of the code, Can I access the controller's response, as a 'Variable' and put Ifs here which do different things depending on what the response is?? Can I for example have access to the controller's response, as a String, and call a different Modal depending on which is the second Character of that String ?? ( '0', '1', '2', '4' being the conditioning actions ).
And these questions lead me to a possible second way to solve this (which I don't know how to implement either), and the explanation of why I want to do this:
1)If the Controller response is "10.", I would like the Modal to have an 'X' message, and that just the Cancel button appears below.
2)If the Controller response is "11", I would like the Modal to have an 'Y' message, and that just the Cancel button appears below.
3)If the Controller response is "12.", I would like the Modal to have an 'Z' message, and both the Cancel and OK button appears below, BUT the OK button calls me the Controller's Create method, like the form's Submit button.
4)If the Controller response is "44.", I would like the Modal to have an 'W' message, and both the Cancel and OK button appears below, BUT the OK button calls A DIFFERENT METHOD from the Controllers OR that I call the Create method the same as the Previous button, but sending a different Id-Path variable?, so that I can put an If inside the Create method of the Controller, which makes the code act different if I am calling this method from Modal3 or Modal4.
I will try to illustrate the situation in case it wasn't clear, with an picture:
That said, this leads me to another possible solution, that perhaps, instead of put code for 4 Modals in the View and try to call them individually (although the good thing about doing that is that I can control the Html code of each Modal individually, but well If that is complicated to implement and unnecessary, changing the message and buttons is enough), maybe what the Script could do is simply alter or modify the buttons in the modal, even hiding them? Is it possible to do that? Can the Script hide buttons from me, and change them, in addition to changing the message of the Div, depending on which is the response it receives from the Controller 'GetViewContent' method? How can I do it???
All this problem comes basically, because I want to learn how to completely change the content of a Modal, depending on the response which is received from the BackEnd, or how to use that response as a variable in the Script code part, my actual code is more complex than this of course, and I really need a code that works like this because I need to show a different Modal, for each possible case.
Can anybody help me?
By the way, as a separate question in the middle of all this, the Script works for me with a small bug now, since if I deactivate the Modal the screen stays stuck, and I can only avoid that using 'data-dismiss', It would also be good to know how to solve that.
Anyway, thank you very much for reading, in advance.
