javascript - Partial View inside Bootstrap Modal popup - Stack Overflow

admin管理员组

文章数量:1357707

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.

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.

• javascript
• jquery
• asp-mvc

Share Improve this question Follow edited Dec 15, 2017 at 12:28 Brian Mains 50.7k3535 gold badges155155 silver badges260260 bronze badges asked Dec 15, 2017 at 1:17 RajRaj 55511 gold badge1313 silver badges3232 bronze badges 5

• Have you read definition of $.load() method? What you may need is Html.Partial or Html.RenderPartial in hidden modal popup and show it when search click event fired. – Tetsuya Yamamoto Commented Dec 15, 2017 at 1:33
• @TetsuyaYamamoto, I have more than one partial view and based on Id from button click, it displays the partial view. – Raj Commented Dec 15, 2017 at 1:44
• 2 So what problem are you having? – user3559349 Commented Dec 15, 2017 at 2:57
• And show us your DisplaySearchResults method in Home controller – TriV Commented Dec 15, 2017 at 3:07
• Please include your action (DisplaySearchResults) in the post. – Arjun Prakash Commented Dec 15, 2017 at 4:27

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

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>

本文标签： javascriptPartial View inside Bootstrap Modal popupStack Overflow