javascript 在ASP.NETMVC中从控制器返回数据时如何调用模态

nzkunb0c  于 2023-03-11  发布在  Java
关注(0)|答案(2)|浏览(128)

我有一个控制器,我在其中返回局部视图中的数据,我想调用一个模态,它是如何做到的?
我离开你我的控制器的细节,并在下面查看.
主计长

[HttpPost]
 public async Task<ActionResult> Items(List<string> items)

  {
             
   var dto = new ItemsDetails();
   dto.item = items;

  return PartialView($"~/Views/Items/ItemDetails.cshtml", dto);
  (Here I want to call a modal)

}

这就是我想要调用的模态。

<!-- Modal -->

@model Application.ItemsDetails

<div class="modal fade" id="items" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
      
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
ztmd8pv5

ztmd8pv51#

用javascript打开模态。
这应该是一个引导模式。
为了方便地选择模态,您应该像这样给予它一个id

<div class="modal fade" id="myModal">

然后将此脚本放在文件的底部

<script type="text/javascript">
    $('#myModal').modal('show');
</script>

要使JQuery和Bootstrap工作,必须先加载.css和.js文件。如果这些文件在页面底部加载,则需要延迟脚本调用,直到页面完全加载。
更多信息可在此处找到:https://getbootstrap.com/docs/4.0/components/modal
如果它不工作,请检查浏览器控制台是否有错误(F12)

qf9go6mv

qf9go6mv2#

OP提出的解决方案似乎严重依赖于后端。
你也可以从前端着手解决这个问题(Charles提出了部分建议)。
在ASP .NETMVC中,你可以将你的模态完全作为一个局部视图,然后将任何数据传递给模型中的模态。

// My View
@model MyApp.Models.MyModel.SomeViewModel // From any controller

@Html.Partial("~/Views/Home/MyModalFolder/_MyModal.cshtml", Model)
// You can pass any kind of model, even an object property from the model; this could be another view model inside the model. For example: Model.InnerViewModel

然后,用来自后端的数据加载表单(例如)内的模型,或者/和使用jQuery AJAX 调用后端加载附加数据。
假设您单击调用以下函数的按钮:它从后端获取数据并打开模态。

// My script
function GetFile(inputOne, inputTwo) {

    var data = {
        id: inputOne,
        name: inputTwo
    }

    $.ajax({
        url: '../File/Edit', // Any method in the controller is called here
        dataType: "json",
        async: true,
        data: data,
        method: "POST", // The button is posting, or sending a request
        success: function (response) {

            /* Response processing */
            // For example, place the response values inside the form using
            
            $("#AgeFieldId").val(response['AgeData']);
            $("#ProffesionFieldId").val(response['ProffesionData']);

            // Then show the modal
            $('#modalAddOriginalFile').modal('show');
        },
        error: function (ex) {
            console.error(ex.responseText);
        },
    });
}

相关问题