如何在单击按钮时将部分视图呈现为模式弹出窗口? [英] How can i render partial view as modal popup on button click?

问题描述

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

I am trying to render partial view from controller on button click event to view the details. But unfortunately its not working.

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

推荐答案

以下示例应帮助您满足使用jQuery Ajax将部分视图呈现为模式弹出窗口的要求，请进行检查.

The following example should help achieve your requirement of rendering partial view as modal popup using jQuery Ajax, please check it.

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(视图"/共享"文件夹下的部分视图)

@model Venue

    <h1>Venue Details</h1>

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

测试结果

这篇关于如何在单击按钮时将部分视图呈现为模式弹出窗口?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！