Render MVC partial view inside bootstrap modal dialog

In this article, I am going to show you how to create a modal dialog using bootstrap and then load a MVC partial view in the dialog.

The steps are explained below with screenshots.

1. We need to have a modal container in the main layout page. All the dialogs will be loaded inside this container. I have hardcoded the styles for now. It is recommended that all the styles be put in a separate stylesheet file.

11

2. Now, we need to add the needed javascript. This script will make an internal Ajax call and will inject the content of the partial view inside the modal container div.

22

3. Create a partial view that you want to load in a modal dialog. The css classes used are from bootstrap.

44

4. Create an action that will return the partial view.

55

5. We need another action that will process the result of POST request that occurs in the partial view.

66

6. Now, create the action link that will show the modal dialog when it is clicked. Please note that the link should have “modal-link” as one of its css class. In step 2, we have javascript that will add the attributes “data-target” and “data-toggle” on click of any link has “modal-link” class.

77

So when this link is clicked, its default action will be prevented. The content specified in the link will be loaded into the modal dialog. When the user posts back from the modal, the corresponding action method will be executed and the data will be processed by that controller. Here is the dialog that appears on clicking the above-mentioned link.

33

Hope this helped you as it helped me!

Happy Coding! 🙂

Advertisements

9 thoughts on “Render MVC partial view inside bootstrap modal dialog

  1. I’ve tried the exact same code as yours but I don’t know why the modal dialog in my case doesn’t have a white background and whenever I try to put in a html.textboxfor or something similar inside the form in the partial view there is nothing being displayed on the modal dialog and it is completely blank. My modal dialog is occupying the whole page instead of a small dialog when I click the link.

      • I have used the exact same code as yours. But I did find out as you said the modal-link css class is missing in the bootstrap.css. I am using Bootstrap version 3.0.1. Here is the code of my view

        ×
        Close

        Add Adjustment Code

        @using (Html.BeginForm(“CreateAdjustmentCode”, “AdjustmentCodes”, FormMethod.Post))
        {

        Adjustment Code

        @Html.TextBoxFor(m => m.AdjustmentCode, new {@class = “form-control”,@id = “Adjustmentcode”})

        Adjustment Description

        @Html.TextBoxFor(m => m.AdjustmentDescription, new {@class = “form-control”,@id = “AdjustmentDescription”})

        Save
        Cancel

        }

        The rest of the code is same as yours. The first div class in the view is empty. Could you tell me why?

  2. The reason you are getting the view in the full page instead of the modal dialog should be due to missing “modal-link” css class as I commented before. This “modal-link” is not a Bootstrap related class. This is the css class that should be specified in the “Button” or “Link” which triggers the modal dialog. For example,

    @Html.ActionLink(“Open Dialog”, “AddAdjustment”, “AdjustmentController”, null, new { @class=”modal-link”} )

    Please check the link or button that you are using to open the modal dialog and ensure that you have “modal-link” css class specified in that button or link.

    Also, you can open your application in Chrome and using Developer Tools, please check if the attributes “data-target” and “data-toggle” are added to the link or button while trying to open the modal dialog. When the link or button is clicked, these attributes should be added to your link or button. If not, please check if you have added the javascript script specified in step 2 in this blog post.

    If this too fails, please post your entire code so that I could try to troubleshoot the issue. I hope this helps.

  3. Hi Jamatyaa,

    I’m trying to put two @Html.ActionLink on the same page, but the underlying controller is called only once. To be clear, when I click on the button for the first time the controller is invoked (I checked it with a breakpoint); any subsequent click will soon display the pop-up without re-invoking the controller, even though the controller is different. If I remove the modal-link declaration fron the Actionlink(s) everything works fine (no popup, but the controller is invoked every time the button is clicked)-

    Any suggestion?

    Thank you

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s