Question

我想在模态弹出窗口中显示部分视图。我有一个主页面，我根据Id on按钮点击部分视图。

我的主要观点：

<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加载部分视图：

$('.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代码来执行此操作吗？任何帮助都非常感谢。

Answer 1

以下代码正在运作

    <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弹出窗口内的部分视图

1 个答案: