简体   繁体   English

当我从 ASP.NET MVC 中的 controller 返回数据时如何调用模态

[英]How to call a modal when I return data a partial view from the controller in ASP.NET MVC

I have a controller where I return data in a partial view and I would like to call a modal, how can it be done?我有一个 controller,我在局部视图中返回数据,我想调用模态,如何完成?

I leave you the details of my controller and view below.我给你留下了我的 controller 的详细信息,并在下面查看。

Controller Controller

 [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)

}
           
 

View That is the modal that I want to call. View 这是我想调用的模态。

<!-- 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>

You open the modal with javascript.您使用 javascript 打开模式。
That should be a bootstrap modal.那应该是一个引导模式。

To select your modal easily you should give it an id like this: select 你的模式很容易你应该给它一个像这样的id

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

Then put this script at the bottom of your File然后将此脚本放在文件的底部

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

For this to work JQuery and Bootstrap.css and.js files have to be loaded before.为此,必须先加载 JQuery 和 Bootstrap.css 以及 .js 文件。 If those are loaded at the bottom of your page you will need to delay your script call until the page is fully loaded.如果这些加载到页面底部,您将需要延迟脚本调用,直到页面完全加载。

More Info can be found here: https://getbootstrap.com/docs/4.0/components/modal更多信息可以在这里找到: https://getbootstrap.com/docs/4.0/components/modal

If it's not working check the browser console for errors (F12)如果它不起作用,请检查浏览器控制台是否有错误 (F12)

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM