I have a requirement where I have to show multiple views inside a single Bootstrap modal popup,
There are links on the side that will allow me to navigate through the views.
So i am trying some code , but it doesnt seem to be working out.
Instead of opening the View on popup div , it loads the view on the main page.
I cannot use an iFrame here.
<!--
<DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>@ViewBag.Title</title>
@Styles.Render("~/Content/bootstrapcss")
</head>
<body>
<div class="container-fluid">
<div style="text-align: center">
<h2>Container View</h2>
</div>
<div class="row-fluid">
<div class="span3">
<div class="well sidebar-nav">
<ul class="nav nav-list">
<li class="nav-header">Navigation</li>
<li>@Ajax.ActionLink("Link 1", "Page1", "Home", new AjaxOptions { UpdateTargetId = "DivMainContainer", HttpMethod = "GET", InsertionMode = InsertionMode.Replace })</li>
<li>@Ajax.ActionLink("Link 2", "Page2", "Home", new AjaxOptions { UpdateTargetId = "DivMainContainer", HttpMethod = "GET", InsertionMode = InsertionMode.Replace })</li>
<li>@Ajax.ActionLink("Link 3", "Page3", "Home", new AjaxOptions { UpdateTargetId = "DivMainContainer", HttpMethod = "GET", InsertionMode = InsertionMode.Replace })</li>
<li>@Html.ActionLink("Link 4", "Page4", "Home", new AjaxOptions { UpdateTargetId = "DivMainContainer", HttpMethod = "GET", InsertionMode = InsertionMode.Replace })</li>
</ul>
</div>
</div>
<div class="span6">
@RenderSection("featured", required: false)
<div class="row-fluid">
<div class="hero-unit">
<div id="DivMainContainer">
@RenderBody()
</div>
</div>
</div>
</div>
<div class="span3">
<div class="row-fluid">
<div class="hero-unit">
<center>Other Links</center>
</div>
</div>
</div>
@* @Html.ActionLink("Home","../", null,new { @class="btn btn-primary btn-large" })*@
</div>
</div>
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryval")
@Scripts.Render("~/bundles/bootstrapjs")
</body>
</html>
The View that opens this popup is shown below:-
@{
ViewBag.Title = "MainPage";
Layout = "~/Views/Shared/_MainLayout.cshtml";
}
<style>
#myModal
{
width: 900px;
margin-top: 100px !important;
margin-left: -350px !important;
}
</style>
<h2>MainPage</h2>
<script src="~/Scripts/jquery-1.7.1.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#SignUpbtn').click(function () {
var url = "/home/index";
$.get(url, function (data) {
$('#myModal').html(data).modal('show');
});
});
});
</script>
<!--
<button id="SignUpbtn" class="btn btn-primary btn-lg" data-url='@Url.Action("Index","Home")' data-toggle="modal" >
Open Modal Popup
</button>
<!--
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
</div>
</div>
Please let me know in case anyone knows solution for it.
Submit an article or tip