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

Question

我正在尝试通过按钮单击事件从控制器呈现部分视图以查看详细信息。但不幸的是，它无法正常工作。

我的控制器动作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>

Answer 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 action

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（“视图” /“共享”文件夹下的局部视图）

@model Venue

    <h1>Venue Details</h1>

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

测试结果