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