如何在按钮单击时将部分视图呈现为模式弹出窗口？

Posted 2023-02-26

【中文标题】如何在按钮单击时将部分视图呈现为模式弹出窗口？

【英文标题】：How can i render partial view as modal popup on button click?

【发布时间】：2020-03-11 09:40:05

【问题描述】：

我正在尝试在按钮单击事件上从控制器呈现部分视图以查看详细信息。但不幸的是它不起作用。

我的控制器动作 OwnerController.cs

public IActionResult ShowpopUp(int id) 
    var venue = _context.Venues.FirstOrDefault(x=>x.Id==id);
    return PartialView(venue);
    

我的看法All.cshtml

@model List<Venue>
<table class="table table-hover">
 <thead>
     <th> Property Name </th>
     <th colspan="2">Action</th>
 </thead>
 <tbody>
     @foreach(var x in Model)
     
     <tr>
         <td>
            @x.Name
         </td>
       <td>
       <a class="btn btn-default btn-sm" id="@x.Id" onclick="Details(this.id)">Show</a>
      </td>
      </tr>
     
   </tbody>
</table>

<script>
           function Details(id)
           
               $.get("@Url.Action("ShowpopUp","Owner")/"+id,
               function(data) $('.modal-body').html(data);)
                $("#myModal").modal("show");
           
           $('#myModal').on('hidden.bs.modal', function(e)
               $('.modal-body').html("");
           )

           
       </script>

myModal

<div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">

      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Details</h4>
        </div>
        <div class="modal-body">
       </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>

    </div>
  </div>

【问题讨论】：

你能解释一下“不工作”吗？

这可能会有所帮助：codeproject.com/Articles/1191769/…

【参考方案1】：

以下示例应该有助于实现您使用 jQuery Ajax 将部分视图呈现为模式弹出窗口的要求，请检查它。

All.cshtml

@model IEnumerable<Venue>

@
    ViewData["Title"] = "All";


<h1>All</h1>

<table class="table table-hover">
    <thead>
    <th> Property Name </th>
    <th colspan="2">Action</th>
    </thead>
    <tbody>
        @foreach (var x in Model)
        
            <tr>
                <td>
                    @x.Name
                </td>
                <td>
                    <a class="btn btn-default btn-sm" id="@x.Id" onclick="Details(this.id)">Show</a>
                </td>
            </tr>
        
    </tbody>
</table>

<div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">

        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Details</h4>
            </div>
            <div class="modal-body">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

@section scripts
    <script>
        function Details(id) 
            $.get("@Url.Action("ShowpopUp","Owner")/" + id,
                function (data) 
                    $('.modal-body').html(data);
                );

                $("#myModal").modal("show");
        
    </script>

ShowpopUp动作

public IActionResult ShowpopUp(int id)

    var venue = _context.Venues.FirstOrDefault(x => x.Id == id);

    //specify the name or path of the partial view
    return PartialView("_VenueDetail", venue);

_VenueDetail.cshtml（Views/Shared 文件夹下的部分视图）

@model Venue

    <h1>Venue Details</h1>

<h2>Id: @Model.Id</h2>
<h2>Name: @Model.Name</h2>

测试结果