Bootstrap Modal弹出窗口中的局部视图

Question

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.

My Main View:

<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>

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);

My Modal is:

<!-- 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>

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

Answer 1

The below code is working

    <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>

Controller

public ActionResult Test()
    {
        //main view

        return View();
    }

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

Partial View

    <div>

        Sample Partial Views
    </div>