Bootstrap模态框内的部分视图

Question

我希望在模态弹出窗口内显示部分视图。我有一个主页面，在该页面上，我基于Id在按钮单击时调用部分视图。

我的主视图：

<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代码来完成这个任务吗？非常感谢您的帮助。

- Raj

---

你阅读过$.load()方法的定义吗？在隐藏的模态弹窗中，你可能需要使用Html.Partial或Html.RenderPartial，并在search点击事件触发时显示它。 - Tetsuya Yamamoto

@TetsuyaYamamoto，我有不止一个部分视图，并且根据按钮点击的Id，它会显示相应的部分视图。 - Raj

那么你遇到了什么问题？ - user3559349

请展示您在Home控制器中的DisplaySearchResults方法。 - TriV

请在帖子中包含您的操作（DisplaySearchResults）。 - Arjun Prakash

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>

- Arjun Prakash

---

你的问题和你在这里发布的答案有什么区别？两者看起来都一样。请澄清一下。 - Raj

我已经在Visual Studio中测试了上面的代码，它运行正常。我不知道你对你的操作方法做了什么，并且JS代码是否正确编写。 - Arjun Prakash