我在我的项目中的一个部分视图中放置了一些jquery选项卡。我注意到,在调试期间,通过Visual Studio的“解决方案资源管理器”,每次我点击一个新选项卡时,都会生成一个新的动态JScript脚本块。
即使我在选项卡的“show”事件中放置了“$('#mytabs .ui-tabs-hide').children().remove();”和“$(".ui-tabs-hide").empty();”,这种情况仍然会发生。脚本块包含我放置在被选项卡调用的部分视图中的JavaScript代码,因此每次我单击以前单击过的选项卡时,都会出现一个新的JScript块:很明显,这会导致稳定性或内存泄漏问题...例如,我已经注意到,加载两次选项卡后,某些计时器和绑定不能正常工作。
我不知道问题是否是由于调用包含脚本的部分视图的方式引起的。请注意我如何设置控制器操作(例如Index)。
这是我的环境:jquery 1.6.4 - jquery-ui 1.8.16 - IE 8.0.7601 我无法使用其他浏览器进行调试,因为Visual Studio似乎没有连接它们的进程,并且不显示动态数据...
控制器
以下是由选项卡调用的一个示例操作
以下是我对视图和脚本的一些看法和代码:
_Layout.cshtml
我尝试将脚本放在div id中,也许这很傻,但我想看看DOM中的脚本是否被删除了...但是没有任何效果。
Index.cshtml
Note: 该文件是一个部分视图,其中包含了重复的 JavaScript 对象,用于处理问题。
即使我在选项卡的“show”事件中放置了“$('#mytabs .ui-tabs-hide').children().remove();”和“$(".ui-tabs-hide").empty();”,这种情况仍然会发生。脚本块包含我放置在被选项卡调用的部分视图中的JavaScript代码,因此每次我单击以前单击过的选项卡时,都会出现一个新的JScript块:很明显,这会导致稳定性或内存泄漏问题...例如,我已经注意到,加载两次选项卡后,某些计时器和绑定不能正常工作。
我不知道问题是否是由于调用包含脚本的部分视图的方式引起的。请注意我如何设置控制器操作(例如Index)。
这是我的环境:jquery 1.6.4 - jquery-ui 1.8.16 - IE 8.0.7601 我无法使用其他浏览器进行调试,因为Visual Studio似乎没有连接它们的进程,并且不显示动态数据...
控制器
以下是由选项卡调用的一个示例操作
public ActionResult Index()
{
if (Request.IsAjaxRequest())
return PartialView("_Index");
return View();
}
以下是我对视图和脚本的一些看法和代码:
_Layout.cshtml
....
<div id="body">
@Html.Partial("_TabsMenu");
</div>
....
_TabsMenu.cshtml(包含选项卡菜单的部分视图)
<div id="menutabs" class="content-wrapper">
<ul >
<li>@Html.ActionLink("Home", "Index", "Home")</li>
<li>@Html.ActionLink("Test", "Index", "Test")</li>
...
</ul>
</div>
<script type="text/javascript">
$(function () {
$('#menutabs').tabs({
cache: false,
show: function (event, ui) {
$('#menutabs .ui-tabs-hide').children().remove(); // the content is removed , but the script is still in memory
$(".ui-tabs-hide").empty(); // the content is removed, but the script is still in memory
},
select: function (event, ui) {
$(window).unbind();
}
});
});
我尝试将脚本放在div id中,也许这很傻,但我想看看DOM中的脚本是否被删除了...但是没有任何效果。
Index.cshtml
@{Html.RenderPartial("_Index");}
_Index.cshtml(包含问题重复的jscript对象的部分视图)
Note: 该文件是一个部分视图,其中包含了重复的 JavaScript 对象,用于处理问题。
<table id="list4"></table>
<jQuery("#list4").jqGrid({
datatype: "local",
height: 250,
colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
colModel:[
{name:'id',index:'id', width:60, sorttype:"int"},
{name:'invdate',index:'invdate', width:90, sorttype:"date"},
{name:'name',index:'name', width:100},
{name:'amount',index:'amount', width:80, align:"right",sorttype:"float"},
{name:'tax',index:'tax', width:80, align:"right",sorttype:"float"},
{name:'total',index:'total', width:80,align:"right",sorttype:"float"},
{name:'note',index:'note', width:150, sortable:false}
],
multiselect: true,
caption: "Manipulating Array Data"});
var mydata = [
{id:"1",invdate:"2007-10-01",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"2",invdate:"2007-10-02",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"3",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
{id:"4",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"5",invdate:"2007-10-05",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"6",invdate:"2007-09-06",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
{id:"7",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"8",invdate:"2007-10-03",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"9",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"}
];
for(var i=0;i<=mydata.length;i++)
jQuery("#list4").jqGrid('addRowData',i+1,mydata[i]);
更新
JScript - 脚本块 1..N // 在调试期间,我在每个 JScript - 脚本块中看到的内容... 我正在测试 jqgrid。这是来自 Trirand 网站的演示。
<jQuery("#list4").jqGrid({
datatype: "local",
height: 250,
colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
colModel:[
{name:'id',index:'id', width:60, sorttype:"int"},
{name:'invdate',index:'invdate', width:90, sorttype:"date"},
{name:'name',index:'name', width:100},
{name:'amount',index:'amount', width:80, align:"right",sorttype:"float"},
{name:'tax',index:'tax', width:80, align:"right",sorttype:"float"},
{name:'total',index:'total', width:80,align:"right",sorttype:"float"},
{name:'note',index:'note', width:150, sortable:false}
],
multiselect: true,
caption: "Manipulating Array Data"});
var mydata = [
{id:"1",invdate:"2007-10-01",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"2",invdate:"2007-10-02",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"3",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
{id:"4",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"5",invdate:"2007-10-05",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"6",invdate:"2007-09-06",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
{id:"7",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"8",invdate:"2007-10-03",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"9",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"}
];
for(var i=0;i<=mydata.length;i++)
jQuery("#list4").jqGrid('addRowData',i+1,mydata[i]);