我只是想建立一个连接租户和房产的基本网站，我正在讨论一些可折叠的网格问题。这个javascript来自一个教程，已经重新调整它以适合我的任务。问题是我的javascript似乎没有运行。在下面找到我的cshtml以及我的共享布局。
CSHTML
@model IEnumerable<HousingProject.Models.Property>
@{
ViewBag.Title = "Index";
WebGrid grid = new WebGrid(source: Model, canSort: false);
}
<style type="text/css">
th, td {
padding: 5px;
}
th {
background-color: rgb(248, 248, 248);
}
#gridT, #gridT tr {
border: 1px solid #0D857B;
}
#subT, #subT tr {
border: 1px solid #f3f3f3;
}
#subT {
margin: 0px 0px 0px 10px;
padding: 5px;
width: 95%;
}
#subT th {
font-size: 12px;
}
.hoverEff {
cursor: pointer;
}
.hoverEff:hover {
background-color: rgb(248, 242, 242);
}
.expand {
background-image: url(/Content/themes/base/images/pm.png);
background-position: -22px;
background-repeat: no-repeat;
}
.collapse {
background-image: url(/Content/themes/base/images/pm.png);
background-position: -2px;
background-repeat: no-repeat;
}
</style>
<h2>Index</h2>
<p>
@using (Html.BeginForm("Index", "Property", FormMethod.Get))
{
@Html.TextBox("filter")
<input type="submit" value="Search" />
}
</p>
<p>
@Html.ActionLink("Create New", "Create")
</p>
<table class="table">
<tr>
<th>
@Html.DisplayNameFor(model => model.HouseNumber)
</th>
<th>
@Html.DisplayNameFor(model => model.StreetName)
</th>
<th>
@Html.DisplayNameFor(model => model.Town)
</th>
<th>
@Html.DisplayNameFor(model => model.City)
</th>
<th>
@Html.DisplayNameFor(model => model.Postcode)
</th>
<th>
@Html.DisplayNameFor(model => model.MaxOccupancy)
</th>
<th></th>
</tr>
@foreach (var item in Model) {
<tr>
<td>
@Html.DisplayFor(modelItem => item.HouseNumber)
</td>
<td>
@Html.DisplayFor(modelItem => item.StreetName)
</td>
<td>
@Html.DisplayFor(modelItem => item.Town)
</td>
<td>
@Html.DisplayFor(modelItem => item.City)
</td>
<td>
@Html.DisplayFor(modelItem => item.Postcode)
</td>
<td>
@Html.DisplayFor(modelItem => item.MaxOccupancy)
</td>
<td>
@Html.ActionLink("Edit", "Edit", new { id=item.ID }) |
@Html.ActionLink("Details", "Details", new { id=item.ID }) |
@Html.ActionLink("Delete", "Delete", new { id=item.ID })
</td>
</tr>
}
</table>
<div id="main" style="padding:25px; background-color:white;">
@grid.GetHtml(
htmlAttributes: new { id = "gridT", width = "700px" },
columns: grid.Columns(
grid.Column("HouseNumber", "House Number"),
grid.Column("StreetName","Street Name"),
grid.Column("Town", "Town"),
grid.Column("City", "City"),
grid.Column("Postcode", "Postcode"),
grid.Column("MaxOccupancy", "Max Occupancy"),
grid.Column("CurrentOccupancy", "Current Occupancy"),
grid.Column(format: (item) =>
{
WebGrid subGrid = new WebGrid(source: item.CurrentTenants);
return subGrid.GetHtml(
htmlAttributes: new { id = "subT" },
columns: subGrid.Columns(
subGrid.Column("FirstName", "First Name"),
subGrid.Column("Surname", "Surname"),
subGrid.Column("Age", "Age"),
subGrid.Column("Employer", "Employer")
)
);
})
)
)
</div>
<script type="text/javascript">
$(document).ready(function () {
var size = $("#main #gridT > thead > tr >th").size(); // get total column
$("#main #gridT > thead > tr >th").last().remove(); // remove last column
$("#main #gridT > thead > tr").prepend("<th></th>"); // add one column at first for collapsible column
$("#main #gridT > tbody > tr").each(function (i, el) {
$(this).prepend(
$("<td></td>")
.addClass("expand")
.addClass("hoverEff")
.attr('title', "click for show/hide")
//.attr('onclick', 'toggleWebGrid()')
);
//Now get sub table from last column and add this to the next new added row
var table = $("table", this).parent().html();
//add new row with this subtable
$(this).after("<tr><td></td><td style='padding:5px; margin:0px;' colspan='" + (size - 1) + "'>" + table + "</td></tr>");
$("table", this).parent().remove();
});
//by default make all subgrid in collapse mode
$("#main #gridT > tbody > tr td.expand").each(function (i, el) {
$(this).toggleClass("expand collapse");
$(this).parent().closest("tr").next().slideToggle(100);
});
});
//toggle expand and collapse
$(function () {
$("#main #gridT > tbody > tr td.collapse").on('click', function () {
alert('test');
$(this).toggleClass("expand collapse");
$(this).parent().closest("tr").next().slideToggle(100);
});
});
</script>
共享布局
<!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", null, 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>
<li>@Html.ActionLink("Properties","Index","Property")</li>
</ul>
@Html.Partial("_LoginPartial")
</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>
我相信你们会弄明白的，现在已经敲了一会儿，甚至不能让调试人员进入它，所以我确定它的配置错误，而不是javascript。请注意页面的表格部分只是遗留物，我不想拼命删除它，直到这个新的webgrid工作。 TA
答案 0 :(得分：0)
我只需要移动
@Scripts.Render("~/bundles/jquery")
@RenderSection("scripts", required: false)
到sharedLayout的head部分。不知道为什么MVC默认它们处于底部。似乎无益。