So the way I choose to do it is via jquery utilizing bootstrap. In my view I'll have a link/button and a click event tied to it. Also, in this click event is an ajax call to load the partial and populate it into the body of the modal window.
@*Lets call this index.cshtml and references a partial called MyModalWindow*@
<script type="text/javascript">
$(function(){
$("#btn-show-modal").click(function(){
$.ajax({
cache: false,
url: '/Controller/ActionToLoadPartial',
contentType: 'application/html; charset=utf-8',
type: 'GET',
dataType: 'html',
data: { param: yourParamToKnowWhatToLoad }
}).success(function (data) {
$("#modal-window .modal-body").html(data);
$("#modal-window").modal("show");
}).error(function () {
});
});
});
</script>
<a href="javascript:void(0);" id="btn-show-modal">Open</a>
@Html.Partial("MyModalWindow")
Then I'll have a partial containing the modal window itself
@*This would be MyModalWindow.cshtml *@
<script type="text/javascript">
$(function () {
$("#modal-window").on("click", "#btn-close", function () {
$("#modal-window").modal("hide");
});
});
</script>
<div id="modal-window" style="display:none;" title="Your Title HEre" class="modal fade">
<div class="modal-dialog" style="width: 50%;">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Title</h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" id="btn-close" class="btn btn-default">Close</button>
</div>
</div><!--
</div><!--
</div>
Then in your controller you'll have an action to load the partial (see the first block of code using .ajax. In this example, I have a partial view called _ModalWindowEditTemplate
public ActionResult ActionToLoadPartial(string id, string mode)
{
try
{
}
catch (Exception ex)
{
}
return PartialView("_ModalWindowEditTemplate");
}
This is the way I've chosen to do it as I maintain a lot of control over what happens/how things happen. There are many ways to achieve what you are trying to do so if this doesn't work, keep looking on google because this is an extremely common functionality that isn't very unique.