Render MVC partial view inside bootstrap modal 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.

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.

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

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

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

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.

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.

Hope this helped you as it helped me!

Happy Coding!