asp.net-mvc - 如何在单击按钮时将部分 View 呈现为模态弹出窗口？

Question

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

我的 Controller 操作OwnerController.cs

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

我的 View 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 将局部 View 呈现为模态弹出窗口的要求，请检查它。

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(Views/Shared 文件夹下的部分 View )

@model Venue

    <h1>Venue Details</h1>

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

测试结果