Bootstrap Modal弹出窗口中的局部视图 [英] Partial View inside Bootstrap Modal popup

问题描述

我想在模式弹出窗口中显示部分视图.我有一个主页，我在其中基于单击按钮上的ID调用部分视图.

I want to display partial view inside modal popup. I have one main page where I am calling partial view based on Id on button Click.

我的主视图:

<table id="tblSearch" class="table table-hover">
    <tr>
        <th>
            @Html.DisplayNameFor(m =>m.Name)
        </th>
        <th>
            @Html.DisplayNameFor(m => m.Description)
        </th>
    </tr>
    @foreach (var item in Model)
    {
        <tr>
            <td>
                @Html.DisplayFor(modelItem => item.Name)</span>
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Description)
            </td>
            <td>
                <input class="search btn-default" type="button" value="Search"
                    data-assigned-id="@item.Id" data-toggle="modal" data-target="#exampleModalLong" />
            </td>
        </tr>
    }
</table>

我的JavaScript加载部分视图:

My JavaScript to load Partial View:

$('.search').click(function () {
    var id = $(this).data('assigned-id');
    var route = '@Url.Action("DisplaySearchResults", "Home")?id=' + id;
    $('#partial').load(route);

我的模态是:

<!-- Modal -->
<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">    
                <div id="partial"></div> 
            </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>

有人可以指导我如何编写JavaScript代码吗?任何帮助都将受到高度赞赏.

Can anyone please guide me how to write JavaScript code to do this? Any help is highly appreciated.

推荐答案

下面的代码有效

    <script type="text/javascript">
        $(function () {
            $('.search').click(function () {
                var id = $(this).data('assigned-id');
                var route = '@Url.Action("ViewTest", "Home")?id=' + id;
                $('#partial').load(route);
            });

        });
    </script>


    <table id="tblSearch" class="table table-hover">
        <tr>
           <td>
                <input class="search btn-default" type="button" value="Search"
                       data-assigned-id="1" data-toggle="modal" data-target="#exampleModalLong" />
     </td>
            </tr>

               @* modify as per your code change,  data-assigned-id="1" also *@


    </table>

    <div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div id="partial"></div>
                </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>

控制器

public ActionResult Test()
    {
        //main view

        return View();
    }

    public ActionResult ViewTest(int id)
    {
         //Write your logic here 
        return PartialView("_TestPartial");
    }

局部视图

    <div>

        Sample Partial Views
    </div>

这篇关于Bootstrap Modal弹出窗口中的局部视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！