Click here to Skip to main content
15,352,679 members
Articles / Web Development / HTML
Posted 6 Oct 2014


30 bookmarked

Bootstrap Modal Dialog - Loading Content from MVC Partial View

Rate me:
Please Sign up or sign in to vote.
4.86/5 (36 votes)
6 Oct 2014CPOL3 min read
Display Bootstrap Modal Dialog using Version Bootstrap v3.2.0 and v3.0.0 - issue


I will show a simple way to display the content of partial view in a bootstrap dialog. I will also show how to fix the dialog doesn't appear issue after 3.1.0 version. There is no need to write additional Ajax calls - this is handled internally by Bootstrap.


When you have a list - table of data and want to add a record, it's one of the better ideas to use a modal dialog - just because there will be no need to go to another page. Also for the deletion of records - confirmation could be done using bootstrap modal dialogs. There are many other places where you can use modal dialogs.

I saw online many different ways to create modal dialogs... many bad ways like:

  1. Creating all dialogs on the page and then just show or hide them using JavaScript. This means adding partial views to a page - render all the information and then if the user needs to see the dialog - it will appear.
  2. Making Ajax calls to display the content. This means for every dialog a call .... not effective. It is better to use a library for that.

The question now is how to do it in a nice and simple way?

  1. On the main layout, you need to have a modal container - the place where the dialogs will be loaded.
    <div id="modal-container" class="modal fade" 
    tabindex="-1" role="dialog">
       <div class="modal-content">

    If you are using bootstrap v 3.0.0, then remove:

    <div class="modal-content"></div>

    After version 3.1.0, this should be included - this is how the changing of the versions affected my implementation.

  2. Set some styles - I have put that in the main layout just for the example, but you can put it in the correct place in your project.
         .modal-content {
             width: 600px !important;
             margin: 30px auto !important;
  3. Add JavaScript - this will make an Ajax call internally and will inject the partialview content into the modal container.
    <script type="text/javascript">
            $(function () {
                // Initialize numeric spinner input boxes
                // Initialize modal dialog
                // attach modal-container bootstrap attributes to links with .modal-link class.
                // when a link is clicked with these attributes, bootstrap will display the href content in a modal dialog.
                $('body').on('click', '.modal-link', function (e) {
                    $(this).attr('data-target', '#modal-container');
                    $(this).attr('data-toggle', 'modal');
                // Attach listener to .modal-close-btn's so that when the button is pressed the modal dialog disappears
                $('body').on('click', '.modal-close-btn', function () {
                //clear modal cache, so that new content can be loaded
                $('#modal-container').on('', function () {
                $('#CancelModal').on('click', function () {
                    return false;
  4. Create a Controller Action, that will return partial view.
     public ActionResult ViewLyubomir()
         return PartialView("_Lyubomir");
  5. Create an action that will process the result of the post occurring in the partial view.
    public ActionResult Lyubomir()
        return RedirectToAction("Index");
  6. Create a partial view:
    <div class="modal-body">
        <div class="alert alert-warning">
            <span class="glyphicon glyphicon-warning-sign"></span>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
            Donec consequat nisl a nibh tincidunt condimentum. 
            Nullam in augue vitae augue dictum eleifend. 
            Nunc porta fermentum metus, quis efficitur lectus scelerisque ac. 
            Quisque egestas sit amet nunc in interdum. 
            Etiam malesuada maximus nisi, id tempus metus. 
            Vivamus at sapien ut metus aliquet sodales sed id magna. 
            Integer in auctor ex. Phasellus tempor, est vel placerat dapibus, 
            nulla dui tempor ligula, at pulvinar libero nunc gravida metus. 
            Proin non feugiat felis. Proin ut ultrices ex. Morbi aliquet lacinia elit at bibendum. 
            Nunc facilisis, neque a finibus dignissim, turpis felis vulputate diam, 
            a tristique tellus nibh nec nulla. Suspendisse eget augue non turpis 
            dignissim euismod eget eget odio. Donec sit amet nibh cursus, efficitur 
            nibh in, sodales arcu. Pellentesque pulvinar consequat lacus ac porttitor.
        @using (Html.BeginForm("Lyubomir", "Home", FormMethod.Post))
            <div class="row">
            <div class="row">
                <div class="col-md-4 col-md-offset-4">
                    <button type="button" class="btn btn-default" 
                    <button type="submit" id="approve-btn" 
                    class="btn btn-danger">Save</button>
    <script type="text/javascript">
        $(function () {
            $('#approve-btn').click(function () {
  7. The last step is to create an action link with specific attributes.
    @Html.ActionLink("Lyubomir ", "ViewLyubomir", "Home", 
    null, new { @class = "modal-link btn btn-success" })

How Does It Work?

On point 7 when the user clicks on the link, based on the attribute - modal-link we have an attached click event for all the links with that attribute - point 3. On point 3, the default action of a link will be prevented and the content to where this link points to will be injected into the model-container div point 1. When the user posts in the modal dialog - point 6, the data will be processed in the corresponding controller - point 5.

When you open the project - Home view has a link button - Lyubomir. Click on that and you will see the magic happening.

Points of Interest

As you can see - nice and simple, no direct Ajax calls to display the content - everything is handled by Bootstrap. Just remember the changing of the versions and how this affects the example. You can search online for that but, it seems a cosmetic issue but it took me quite some time to figure out where to apply it.


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Lyubomir Rumenov Velchev
Software Developer (Senior) Softopia
United Kingdom United Kingdom
No Biography provided

Comments and Discussions

QuestionNo MDF included in this package Pin
MSDEVTECHNIK7-Apr-20 19:44
MemberMSDEVTECHNIK7-Apr-20 19:44 
QuestionRAR file Pin
MemberMSDEVTECHNIK7-Apr-20 8:57 
QuestionDo not use jquery and JavaScript. It is 2018! There are better ways - Angular/React Pin
Lyubomir Rumenov Velchev16-Nov-18 2:59
MemberLyubomir Rumenov Velchev16-Nov-18 2:59 
QuestionNot successful to load partial view in modal Pin
umairsaeed3-Jul-18 20:31
Memberumairsaeed3-Jul-18 20:31 
QuestionAny idea why this modal injection breaks MVC unobtrusive validation? Pin
Member 1358566013-Feb-18 1:12
MemberMember 1358566013-Feb-18 1:12 
QuestionInjects to #modal-container, not .modal-content? Pin
Member 1358566019-Dec-17 16:39
MemberMember 1358566019-Dec-17 16:39 
QuestionSlow loading Pin
Ejaz Qadir18-Feb-17 23:24
MemberEjaz Qadir18-Feb-17 23:24 
QuestionremoveData Pin
Špeko19-Jan-17 8:11
MemberŠpeko19-Jan-17 8:11 
Questionredirect to log in page if the session expired Pin
Aleh Papok27-Dec-16 0:54
MemberAleh Papok27-Dec-16 0:54 
Questionmodal not themed correctly - needed to add modal-dialog Pin
browndog7-Dec-16 9:22
Memberbrowndog7-Dec-16 9:22 
QuestionShow and vanish (solved) and usage of multiple partial views Pin
Laurentiu LAZAR7-Sep-16 5:10
MemberLaurentiu LAZAR7-Sep-16 5:10 
QuestionRefresh? Pin
andrewh197331-May-16 0:48
Memberandrewh197331-May-16 0:48 
QuestionArchivo genérico Pin
camilo jaramillo21-Jan-16 3:11
Membercamilo jaramillo21-Jan-16 3:11 
QuestionNice & Easy - Thanks!! Pin
John DMC18-Jan-16 10:18
MemberJohn DMC18-Jan-16 10:18 
QuestionGreat Article - Thank you Pin
Brownie2413-Dec-15 18:14
professionalBrownie2413-Dec-15 18:14 
QuestionHow to show the modal view on submit post Pin
g54wyg34w5gft25-Sep-15 22:03
Memberg54wyg34w5gft25-Sep-15 22:03 
AnswerRe: How to show the modal view on submit post Pin
ramaluciano27-Dec-16 7:43
Memberramaluciano27-Dec-16 7:43 
SuggestionBootstrap versions Pin
Anatoli C.23-Sep-15 3:43
MemberAnatoli C.23-Sep-15 3:43 
Questionmy partial view not generate as per require Pin
Member 1196828823-Sep-15 2:10
MemberMember 1196828823-Sep-15 2:10 
QuestionAny way to tie to change event? Pin
Member 1197462916-Sep-15 6:48
MemberMember 1197462916-Sep-15 6:48 
QuestionIf modelstate is invalid. Page opening full. Pin
BuzGibi1-Jul-15 13:22
MemberBuzGibi1-Jul-15 13:22 
AnswerRe: If modelstate is invalid. Page opening full. Pin
Paul Chu22-Jul-17 7:05
MemberPaul Chu22-Jul-17 7:05 
GeneralRe: If modelstate is invalid. Page opening full. Pin
Member 1358566024-Dec-17 12:18
MemberMember 1358566024-Dec-17 12:18 
QuestionThe Modal view opens by milliseconds and closes! Pin
Member 117425934-Jun-15 10:08
MemberMember 117425934-Jun-15 10:08 
AnswerRe: The Modal view opens by milliseconds and closes! Pin
Gronscij6-Apr-17 8:36
MemberGronscij6-Apr-17 8:36 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.