Bootstrap asp.net 框架初学者
Posted
技术标签:
【中文标题】Bootstrap asp.net 框架初学者【英文标题】：Bootstrap asp.net framework begginer 【发布时间】：2022-01-01 02:35:37 【问题描述】：我对 Bootstrap 和 ASP.Net 都有点陌生。
我正在尝试使用 Bootstrap 主页中的一个非常简单的示例
我只是把它扔到about.cshtml 文件中。
在 ASP.Net 上，Bootstrap 是 3.4.1 版本，我选择了 Bootstrap 示例的第 3 版，但我没有得到任何表格，只有 3 个堆叠的文本彼此相邻。它是错误的版本还是我看不到错误？我做错了什么？
@
ViewBag.Title = "About";
<link href="https://unpkg.com/bootstrap-table@1.19.1/dist/bootstrap-table.min.css" rel="stylesheet">
<script src="https://unpkg.com/bootstrap-table@1.19.1/dist/bootstrap-table.min.js"></script>
<table id="table">
<thead>
<tr>
<th data-field="id">ID</th>
<th data-field="name">Item Name</th>
<th data-field="price">Item Price</th>
</tr>
</thead>
</table>
<script>
var $table = $('#table')
$(function ()
var data = [
'id': 0,
'name': 'Item 0',
'price': '$0'
,
'id': 1,
'name': 'Item 1',
'price': '$1'
,
'id': 2,
'name': 'Item 2',
'price': '$2'
,
'id': 3,
'name': 'Item 3',
'price': '$3'
,
'id': 4,
'name': 'Item 4',
'price': '$4'
,
'id': 5,
'name': 'Item 5',
'price': '$5'
]
$table.bootstrapTable( data: data )
)
</script>
我的_Layout.cshtml
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title - My ASP.NET Application</title>
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
@Html.ActionLink("Application name", "Index", "Home", new area = "" , new @class = "navbar-brand" )
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>@Html.ActionLink("Home", "Index", "Home")</li>
<li>@Html.ActionLink("About", "About", "Home")</li>
<li>@Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>
</div>
</div>
</div>
<div class="container body-content">
@RenderBody()
<hr />
<footer>
<p>© @DateTime.Now.Year - My ASP.NET Application</p>
</footer>
</div>
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)
</body>
</html>
【问题讨论】：
我尝试添加不同的版本等等，但似乎没有任何效果 您是否在布局页面中包含了 jQuery 和 Bootstrap javascript 库？此外，请检查浏览器的开发者控制台是否有错误。 我在编辑中添加了布局，但看不到我缺少什么？ 【参考方案1】：您的脚本标签需要在Scripts 部分内。否则，您将尝试在它们所依赖的库之前加载它们。
@
ViewBag.Title = "About";
<table id="table">
<thead>
<tr>
<th data-field="id">ID</th>
<th data-field="name">Item Name</th>
<th data-field="price">Item Price</th>
</tr>
</thead>
</table>
@section Scripts
<link href="https://unpkg.com/bootstrap-table@1.19.1/dist/bootstrap-table.min.css" rel="stylesheet">
<script src="https://unpkg.com/bootstrap-table@1.19.1/dist/bootstrap-table.min.js"></script>
<script>
var $table = $('#table')
$(function ()
var data = [
'id': 0,
'name': 'Item 0',
'price': '$0'
,
...
]
$table.bootstrapTable( data: data )
)
</script>
如果您在浏览器中使用当前页面检查开发人员控制台，您会看到错误提示您尚未加载 jQuery。
【讨论】：
谢谢你，我也让它与其他一些例子一起工作，谢谢以上是关于Bootstrap asp.net 框架初学者的主要内容，如果未能解决你的问题，请参考以下文章
开源：ASP.NET MVC+EF6+Bootstrap开发框架
求一个BootStrap table 后台获取asp.net数据的例子
(asp.net) Bootstrap 4 导航栏切换器不工作
ASP.NET MVC使用Bootstrap系列——开始使用Bootstrap