3 Simple steps to show all your details information (from your model) in your MVC project with modal popup and jquery
If you want to show more elegant the detail record in your current MVC project, one good reason to change to use the modal popup is that you don't need to re-write the index and the detail page for each view controller. The other good reason to show the data using this way is because you don't need to save the previous URL to return to the previous page with the previous content and context, especially when we have filters on the previous screen. For example:
My recommendation is to follow the next 3 steps and you will improve the user interface in your current project.
The first step is to include the following jquery script in the "_layout.cshtml" share view or in each "index.cshtml" partial view:
And add the Modal <div> section in the "index.cshtml" partial view
Basically, we'll call the detail page using the ajax get function and we'll to show and to render the detail view content in the popup section. But this function needs the url parameter. For this reason, we replaced the actionlink button for a new call to the javascript function rebuilding the url route like the example:
2) The step two is simple. to prevent to use the layout page in the modal popup view, we'll change the return view result in the action method to call only the partial view:
3) The step three is to prepare the detail view to close correctly the modal popup. For example the button and sections.
And finally... The testings:
