如何使用asp.net MVC在bootstrap模式弹出窗口中显示多个视图 [英] How to show multiple views inside a bootstrap modal popup with asp.net MVC
本文介绍了如何使用asp.net MVC在bootstrap模式弹出窗口中显示多个视图的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个要求，我必须在单个Bootstrap模式弹出窗口中显示多个视图，
侧面有链接，允许我浏览视图。
所以我正在尝试一些代码，但它似乎没有成功。
而不是在弹出窗口上打开视图，它会加载视图主页。
我不能在这里使用iFrame。
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.
<!--<span class="hiddenSpellError" pre=""-->
<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 = $(this).data('url');
var url = "/home/index";
//alert(url);
$.get(url, function (data) {
//$('#modal-content').html(data);
//$('#modal-content').modal('show');
$('#myModal').html(data).modal('show');
//$('#myModal').modal('show');
});
});
});
</script>
<!-- Button trigger modal data-target="#myModal" -->
<button id="SignUpbtn" class="btn btn-primary btn-lg" data-url='@Url.Action("Index","Home")' data-toggle="modal" >
Open Modal Popup
</button>
<!-- Modal -->
<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.
推荐答案
（ document ）。ready（ function （）{
(document).ready(function () {
（' ＃SignUpbtn'）。点击（ function （）{
// var url =
('#SignUpbtn').click(function () { //var url =
（this）.data（'url '）;
var url = /家/索引;
// alert（url）;
(this).data('url'); var url = "/home/index"; //alert(url);
这篇关于如何使用asp.net MVC在bootstrap模式弹出窗口中显示多个视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
