ビューにサイド バーを配置します。項目をクリックすると、対応するビューが部分ビューとしてメイン ビューに読み込まれます。私の部分的なビューでは、jquery プラグイン (fixedHeaderTable) を使用してテーブルをレンダリングします。ビューをロードすると、最初のサイド メニュー項目ビューがデフォルトでロードされます。これは正常に動作します。しかし、別のサイド メニューに移動して最初のサイド メニュー項目をクリックすると、ビューがレンダリングされますが、jquery プラグイン メソッドにアクセスできないと表示されます。
部分ビューをロードするメイン ビュー。Chrome からページを調べると、jquery プラグインが読み込まれていることがわかりました。
@model App.Core.DataAccess.ViewModel.TimeTrackerViewModel
@{
ViewBag.Title = "Reports";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<script type="text/javascript" >
function onSideMenuClick(selectedItem) {
if (selectedItem.id === 'timetracker') {
$.get("@Url.Action("TimeTracker", "Reports")", function (data) {
$('#divProduct').html(data);
});
$('#TimeTracker').fixedHeaderTable({
altClass: 'odd',
fixedColumns: 1,
autoResize: true,
create: function () {
$(".fht-fixed-body>.fht-tbody").niceScroll({ styler: "fb", cursorcolor: "#7e7d7d" });
}
});
}
else if (selectedItem.id === 'tabPatientFlowSummary') {
$.get("@Url.Action("PatientFlowSummary", "Reports")", function (data) {
$('#divProduct').html(data);
});
$('#PatientFlowSummary').fixedHeaderTable('destroy');
$('#PatientFlowSummary').fixedHeaderTable({
altClass: 'odd',
fixedColumns: 1,
autoResize: true
});
}
else if (selectedItem.id === 'tabProductionCollectionSummary') {
$.get("@Url.Action("Index", "ProductionCollectionSummary")", function (data) {
$('#divProduct').html(data);
});
}
else if (selectedItem.id === 'tabInpurReport') {
$.get("@Url.Action("DailyCollection", "Reports")", function (data) {
$('#divProduct').html(data);
});
}
else if (selectedItem.id === 'tabMidYearReport') {
$.get("@Url.Action("MidYearReport", "Reports")", function (data) {
$('#divProduct').html(data);
});
}
else {
$.get("@Url.Action("AnnualReport", "Reports")", function (data) {
$('#divProduct').html(data);
});
}
}
</script>
@section SideBar{
<section class="sidebar">
<a href="#" id="sidebarToggle">Sidebar Toggle</a>
<div class="sidebar-content">
<ul class="sidebar-menu">
<li><a href="#" onclick="onSideMenuClick(this);" id="timetracker" class="active" ><i class="icon-patient_flow_summary"></i>Time Tracker</a></li>
<li><a href="#" onclick="onSideMenuClick(this);" id="tabPatientFlowSummary" ><i class="icon-patient_flow_summary"></i>Patient Flow Summary </a></li>
<li><a href="#" onclick="onSideMenuClick(this);" id="tabProductionCollectionSummary" >Production Collection Summary</a></li>
<li><a href="#" onclick="onSideMenuClick(this);" id="tabInpurReport"><i class="icon-daily-collection"></i>Daily Collection </a></li>
<li><a href="#" onclick="onSideMenuClick(this);" id="tabMidYearReport"><i class="icon-mid_year_report" ></i>Mid Year Report </a></li>
<li><a href="#" onclick="onSideMenuClick(this);" id="tabAnnualReport"><i class="icon-annual_report"></i>Annual Report</a></li>
</ul>
</div>
</section>
}
<div id="divProduct" class="main-content-area-wap width-sidebar clearfix">@Html.Action("TimeTracker","Reports")</div>
私のコントロールは次のとおりです
public PartialViewResult TimeTracker()
{
DateTime dt = DateTime.Now;
if (timetrackerViewModel == null)
{
timetrackerViewModel = new TimeTrackerViewModel();
}
timetrackerViewModel.lstHrsAval = new List<decimal>();
timetrackerViewModel.HoursWorked = new List<decimal>();
timetrackerViewModel.NoOfVisits = new List<decimal>();
for (int i = 1; i <= 10; i++)
{
timetrackerViewModel.lstHrsAval.Add(i);
timetrackerViewModel.HoursWorked.Add(i);
timetrackerViewModel.NoOfVisits.Add(i);
}
return PartialView("_TimeTrackerPartial", timetrackerViewModel);
}
すべてのスクリプト ファイル、jquery、jquery プラグインを _layout ビューにロードしています。