我已更改我的应用程序以合并前端更改。我现在已经创建了表，在这些表中，我有 @RenderBody()
当我的 webgrid 显示在我的屏幕上时，整个屏幕变得可点击，而不仅仅是 WEBGRID 中的单个行。
这是使用的_InitLayout。请参阅 RenderBody() 部分。它在表内调用。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>@ViewBag.Title</title>
<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/jquery-1.7.2.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-ui-1.8.18.custom.min.js")" type="text/javascript"></script>
<link href="@Url.Content("~/Content/jquery-ui-1.8.18.custom.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<link rel="icon" type="image/png" href='@Url.Content("~/Content/favicon.png")' />
</head>
<body>
<div onload="MM_preloadImages('@Url.Content("~/Content/images/buttons/signup2.jpg")','@Url.Content("~/Content/images/buttons/logon2.jpg")'">
<table width="980" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td class="tdfrontend" colspan="2"><img src='@Url.Content("~/Content/images/interface/header.jpg")' alt="header" width="1000" height="105" /></td>
</tr>
<tr>
<td class="tdfrontend" colspan="2" bgcolor="#FFFFFF">
<table width="1000" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="tdfrontend">
<table width="1000" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="tdfrontend" width="700">
<table width="365" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="tdfrontend" width="18" align="center" valign="middle"> </td>
<td class="tdfrontend" align="center" valign="middle"><span class="style3"><a href="/" style="text-decoration:none">Home</a></span> </td>
<td class="tdfrontend" align="center" valign="middle"><img src='@Url.Content("~/Content/images/interface/lineup.jpg")' alt="linup" width="3" height="22" /></td>
<td class="tdfrontend" align="center" valign="middle"> <span class="style3">@Html.ActionLink("Browse All Projects", "AllProjectsHeaderSR", "Projects", "",new { @style = "text-decoration:none" } )</span> </td>
<td class="tdfrontend" align="center" valign="middle"><img src='@Url.Content("~/Content/images/interface/lineup.jpg")' alt="linup" width="3" height="22" /></td>
<td class="tdfrontend" align="center" valign="middle"> <span class="style3">@Html.ActionLink("Search Projects", "SearchProjectsSR", "Projects", "",new { @style = "text-decoration:none" })</span> </td>
<td class="tdfrontend" align="center" valign="middle"><img src='@Url.Content("~/Content/images/interface/lineup.jpg")' alt="linup" width="3" height="22" /></td>
<td class="tdfrontend" align="center" valign="middle"> <span class="style3">@Html.ActionLink("How It Works", "HowItWorks", "Home", "",new { @style = "text-decoration:none" })</span> </td>
<td class="tdfrontend" align="center" valign="middle"><img src='@Url.Content("~/Content/images/interface/lineup.jpg")' alt="linup" width="3" height="22" /></td>
</tr>
</table></td>
<td class="tdfrontend" width="300" align="right" valign="middle">
<table width="300" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="tdfrontend" width="221" align="right"><a href="@Url.Action("LogOn","Account")" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('logon','','@Url.Content("~/Content/images/buttons/logon2.jpg")',1)"><img src='@Url.Content("~/Content/images/buttons/logon1.jpg")' name="logon" width="80" height="19" border="0" id="logon" /></a></td>
<td class="tdfrontend" width="79" align="right"><a href="@Url.Action("Register", "Account")" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('signup','','@Url.Content("~/Content/images/buttons/signup2.jpg")',1)"><img src='@Url.Content("~/Content/images/buttons/signup1.jpg")' name="signup" width="79" height="19" border="0" id="signup" /></a></td>
</tr>
</table></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="tdfrontend" colspan="2" align="center" valign="top" bgcolor="#FFFFFF"><img src='@Url.Content("~/Content/images/interface/line.jpg")' alt="ling" width="1000" height="4" /></td>
</tr>
</table>
</div>
<div id="container">
<div id="col1">
@RenderSection("SideBar1", required: false)
</div>
<div id="col2outer1">
<div id="col2mid1">
<table width="980" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td class="tdfrontend" width="600" align="left" valign="top" bgcolor="#FFFFFF">
<table width="600" border="0" cellspacing="10" cellpadding="10">
<tr>
<td>
@RenderBody()
</td>
</tr>
</table>
<h2> </h2>
<table width="600" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="tdfrontend" align="left" valign="top"> </td>
</tr>
<tr>
<td class="tdfrontend">
<table width="100%" border="0" cellpadding="3" cellspacing="3" bgcolor="#CCCCCC">
<tr>
<td class="tdfrontend" height="150" align="center" valign="middle"><img src='@Url.Content("~/Content/images/pics/it_pic1.jpg")' alt="it pic1" width="96" height="100" /></td>
<td class="tdfrontend" align="center" valign="middle"><img src='@Url.Content("~/Content/images/pics/it_pic2.jpg")' alt="it pic2" width="158" height="100" /></td>
<td class="tdfrontend" align="center" valign="middle"><img src='@Url.Content("~/Content/images/pics/it_pic3.jpg")' alt="it pic 3" width="157" height="100" /></td>
<td class="tdfrontend" align="center" valign="middle"><img src='@Url.Content("~/Content/images/pics/it_pic4.jpg")' alt="it pic 4" width="131" height="100" /></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td class="tdfrontend" width="400" align="left" valign="top" bgcolor="#FFFFFF"><table width="400" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="tdfrontend"><img src='@Url.Content("~/Content/images/interface/blu_header.jpg")' alt="blu_header" width="400" height="34" /></td>
</tr>
<tr>
<td class="tdfrontend" align="left" valign="top" background='@Url.Content("~/Content/images/interface/blu_bg.jpg")'><table width="400" border="0" cellspacing="15" cellpadding="3">
<tr>
<td class="tdfrontend"><p>populate info hieght controlled </p>
<p>populate info hieght controlled </p>
<p>populate info hieght controlled </p>
<p>populate info hieght controlled </p>
<p>populate info hieght controlled </p>
<p>populate info hieght controlled </p>
<p>populate info hieght controlled </p>
<p>populate info hieght controlled </p>
<p>populate info hieght controlled </p>
<p>populate info hieght controlled </p>
<p>populate info hieght controlled </p>
<p>populate info hieght controlled </p>
<p>populate info hieght controlled </p>
<p>populate info hieght controlled </p>
</td>
</tr>
</table>
<p> </p>
<p> </p></td>
</tr>
<tr>
<td class="tdfrontend"><img src='@Url.Content("~/Content/images/interface/blu_footer.png")' alt="blu_footer" width="400" height="23" /></td>
</tr>
</table></td>
</tr>
<tr>
<td class="tdfrontend" colspan="2" align="center" valign="top" bgcolor="#1780BA">
<table width="980" border="0" cellspacing="0" cellpadding="3">
<tr>
<td class="tdfrontend" width="100" class="news"><span class="footer_text">© Copyright 2012 GrepTech.co.za</span></td>
<td class="tdfrontend" width="466" align="right" valign="middle" class="footer_text">
@Html.ActionLink("Privacy Policy", "PrivacyPolicy", "Home", "", new { style = "color:#FFFFFF", target = "_blank" })
@Html.ActionLink("Terms & Conditions", "TermsConditions", "Home", "", new { style = "color:#FFFFFF", target = "_blank" })
@Html.ActionLink("Advertise", "Advertise", "Home", "", new { style = "color:#FFFFFF" })
@Html.ActionLink("Contact Us", "ContactUs", "Home", "", new { style = "color:#FFFFFF", target = "_blank" })
</td>
</tr>
</table>
</td>
</tr>
</table>
<p> </p>
</div>
<div id="col2side1">
@RenderSection("SideBar2", required: false)
</div>
</div>
<br />
</div>
</body>
</html>
这是我对 WEBGRID 的看法：
@model mvc1.Models.ProjectHeaderModelList
@{
if (ViewBag.userTypeID == null)
{
Layout = "~/Views/Shared/_InitLayout.cshtml";
}
else if (ViewBag.userTypeID == "SP")
{
Layout = "~/Views/Shared/_SPLayout.cshtml";
}
else if (ViewBag.userTypeID == "SR")
{
Layout = "~/Views/Shared/_SRLayout.cshtml";
}
}
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
@{
ViewBag.Title = "All Projects";
}
@section SideBar1 {
<p>
</p>
}
@section SideBar2 {
<p>
</p>
}
@{
if (ViewBag.userName != null)
{
<div align="right"><font color="#000000" size="2">User: @ViewBag.userName is logged in</font></div>
}
}
@{
if (ViewBag.Message != null)
{
<p><font color="red">@ViewBag.Message </font></p>
}
}
@{
var grid = new WebGrid(Model,
rowsPerPage: 5,
defaultSort: "projectStatus");
}
@using (Html.BeginForm())
{
if (ViewBag.userName != null)
{
<br />
}
if (ViewBag.userTypeID == null)
{
<br />
<p> @Html.ActionLink("Log On", "LogOn", "Account") to GrepTech or @Html.ActionLink("Register", "Register", "Account") if you don't have an account.
</p>
}
<fieldset>
<legend>List Of All Projects</legend>
<br />
<div id="grid">
@grid.GetHtml(columns: grid.Columns(
grid.Column("projectCode", "Project Code", canSort: true),
grid.Column("projectName", "Project Name", canSort: true),
grid.Column("projectCreationDate", header: "Created Date", format: @<text>@item.projectCreationDate.ToString("dd-MMM-yyyy")</text>, canSort: true),
grid.Column("projectEndDate", header: "Bidding Expiry Date", format: @<text>@item.projectEndDate.ToString("dd-MMM-yyyy")</text>, canSort: true),
grid.Column("projectStatus", "Project Status", canSort: true),
grid.Column("daysLeft", "Days Remaining", canSort: true)),
tableStyle: "webgrid",
headerStyle: "webgrid-header",
footerStyle: "webgrid-footer",
selectedRowStyle: "webgrid-selected-row",
rowStyle: "webgrid-row-style")
</div>
<script type="text/javascript">
$(function () {
$('tbody tr').on('hover', function () {
$(this).toggleClass('clickable');
}).on('click', function () {
var self = this;
$.ajax(
{
type: "POST",
url: "/Projects/AllProjectsHeaderSR",
data: "projectCode=" + $(this).find('td:first').text(),
success: function (data) {
$('#container').html(data);
$(self).unbind('click');
}
});
});
});
</script>
</fieldset>
}
如您所见，可点击部分是在 Jquery 中为 VIEW() 设置的。但整个屏幕变得可点击。我猜是因为 RenderBody() 在表格内？我不确定。
我如何才能仅在 webgrid 中获取可单击的行？
解决方案：
改变：
$('tbody tr').on('hover', function () {
至：
$('#grid tbody tr').on('hover', function () {