Jquery 插件布局未应用于选项卡控件上所有选项卡的局部视图
我在一个_unitProduct部分视图中使用bootstrap.multiselect.js插件，因为这个部分视图将用于选项卡控件上的所有选项卡。 加载页面/第一个选项卡后，插件将在第一个选项卡上应用/加载。但它并没有为具有相同局部视图的其他选项卡加载，最终显示为常规视图 dropdownlist没有应用任何插件布局 我已将脚本文件包括在主布局页中，并使用控件id$（“#ProductTypeID”）.multiselect（）进行绑定Jquery 插件布局未应用于选项卡控件上所有选项卡的局部视图,jquery,asp.net-mvc-4,tabs,Jquery,Asp.net Mvc 4,Tabs,我在一个_unitProduct部分视图中使用bootstrap.multiselect.js插件，因为这个部分视图将用于选项卡控件上的所有选项卡。 加载页面/第一个选项卡后，插件将在第一个选项卡上应用/加载。但它并没有为具有相同局部视图的其他选项卡加载，最终显示为常规视图 dropdownlist没有应用任何插件布局 我已将脚本文件包括在主布局页中，并使用控件id$（“#ProductTypeID”）.multiselect（）进行绑定 Included in master layout:
Included in master layout:
<script src="~/Scripts/bootstrap-multiselect.js"></script>
_unitProduct.cshtml (partial view)
<div class="span6">
@Html.LabelFor(Model => Model.ProductTypeID, "Product Type", new { @class = "small" })
<div class="form-group">
@Html.DropDownListFor(Model => Model.ProductTypeID, new SelectList(productTypes, "Key", "Value"))
</div>
</div>
Product.cshtml (main view)
<div class="tab-content">
<div class="tab-pane active" id="tab1">
@{ Html.RenderPartial("_unitProduct", Model.ProductA);}
</div>
<div class="tab-pane primary" id="tab2">
@{ Html.RenderPartial("_unitProduct", Model.ProductB);}
</div>
<div class="tab-pane primary" id="tab3">
@{ Html.RenderPartial("_unitProduct", Model.ProductC);}
</div>
</div>
JavaScript
$(document).ready(function () {
$('#ProductTypeID').multiselect();
});
Rendered HTML
<html lang="en">
<head>
<meta charset="utf-8">
<title>Page3</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0,
maximum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-
awesome.min.css" rel="stylesheet">
<link href="/Content/bootstrap.css" rel="stylesheet">
<link href="/Content/font-awesome/css/font-awesome.css" rel="stylesheet">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
</head>
<body>
<div class="container fixed">
<div class="row-fluid">
<div class="box-generic">
<div class="tabsbar">
<div class="widget-head">
<ul>
<li class="active"><a href="#tab1-2" class="glyphicons" data-toggle="tab"><span>OccupantA</span></a></li>
<li class="primary"><a href="#tab2-2" class="glyphicons" data-toggle="tab"><span>OccupantB</span></a></li>
<li class="primary"><a href="#tab3-2" class="glyphicons" data-toggle="tab"><span>Occupant C</span></a></li>
</ul>
</div>
</div>
</div>
<div class="tab-content">
<!-- Step 1 -->
<div class="tab-pane active" id="tab1-2">
<div class="row-fluid">
<div class="innerwell">
<div class="row-fluid">
<div class="col-sm-1 col-md-2 col-lg-1">
<label class="small" for="PersonTypeID">Person Type</label>
<div class="form-group">
<select id="PersonTypeID" name="PersonTypeID" style="display: none;">
<option value="-">--</option>
<option value="D">D-Driver</option>
<option value="O">O-Occupant</option>
<option value="P">P-Pedestrian</option>
</select><div class="btn-group" style="width: 52px;">
<button type="button" class="multiselect dropdown-toggle btn btn-custom" data-toggle="dropdown" title="--" style="width: 52px; overflow: hidden; text-overflow: ellipsis;"><span class="multiselect-selected-text">-</span> <b class=""></b></button>
<ul class="multiselect-container dropdown-menu" style="max-height: 400px; overflow-y: auto; overflow-x: hidden;">
<li class="active"><a tabindex="0">
<label class="radio">
<input type="radio" value="-">
--</label></a></li>
<li><a tabindex="0">
<label class="radio">
<input type="radio" value="D">
D-Driver</label></a></li>
<li><a tabindex="0">
<label class="radio">
<input type="radio" value="O">
O-Occupant</label></a></li>
<li><a tabindex="0">
<label class="radio">
<input type="radio" value="P">
P-Pedestrian</label></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function () {
BindMultiselect();
});
function BindMultiselect() {
$('#PersonTypeID').multiselect();
}
</script>
</div>
</div>
<!-- Step 2 -->
<div class="tab-pane primary" id="tab2-2">
<div class="row-fluid">
<div class="innerwell">
<div class="row-fluid">
<div class="col-sm-1 col-md-2 col-lg-1">
<label class="small" for="PersonTypeID">Person Type</label>
<div class="form-group">
<select id="PersonTypeID" name="PersonTypeID">
<option value="-">--</option>
<option value="D">D-Driver</option>
<option value="O">O-Occupant</option>
<option value="P">P-Pedestrian</option>
</select>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function () {
BindMultiselect();
});
function BindMultiselect() {
$('#PersonTypeID').multiselect();
}
</script>
</div>
<hr>
</div>
<!-- Step 3 -->
<div class="tab-pane primary" id="tab3-2">
<div class="innerwell">
<div class="row-fluid">
<div class="col-sm-1 col-md-2 col-lg-1">
<label class="small" for="PersonTypeID">Person Type</label>
<div class="form-group">
<select id="PersonTypeID" name="PersonTypeID">
<option value="-">--</option>
<option value="D">D-Driver</option>
<option value="O">O-Occupant</option>
<option value="P">P-Pedestrian</option>
</select>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function () {
BindMultiselect();
});
function BindMultiselect() {
$('#PersonTypeID').multiselect();
}
</script>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function () {
BindMultiselect();
});
function BindMultiselect() {
$('#PersonTypeID').multiselect();
}
</script>
<script src="/Scripts/jquery-1.9.1.js"></script>
<script src="/Scripts/bootstrap.js"></script>
<script src="/Scripts/bootstrap-multiselect.js"></script>
</body>
</html>
：
_unitProduct.cshtml（局部视图）
@LabelFor（Model=>Model.ProductTypeID，“产品类型”，新的{@class=“small”}）
@Html.DropDownListFor（Model=>Model.ProductTypeID，新选择列表（productTypes，“Key”，“Value”））
Product.cshtml（主视图）
@{Html.RenderPartial（“_unitProduct”，Model.ProductA）；}
@{Html.RenderPartial（“_unitProduct”，Model.ProductB）；}
@{Html.RenderPartial（“_unitProduct”，Model.ProductC）；}
JavaScript
$（文档）.ready（函数（）{
$（'#ProductTypeID'）.multiselect（）；
});
呈现HTML
第3页
人型
--
D驱动器
O型居住者
P-行人
-
-
--
-
D驱动器
-
O型居住者
-
P-行人
$（文档）.ready（函数（）{
BindMultiselect（）；
});
函数BindMultiselect（）{
$（“#PersonTypeID”）.multiselect（）；
}
人型
--
D驱动器
O型居住者
P-行人
$（文档）.ready（函数（）{
BindMultiselect（）；
});
函数BindMultiselect（）{
$（“#PersonTypeID”）.multiselect（）；
}
人型
--
D驱动器
O型居住者
P-行人
$（文档）.ready（函数（）{
BindMultiselect（）；
});
函数BindMultiselect（）{
$（“#PersonTypeID”）.multiselect（）；
}
$（文档）.ready（函数（）{
BindMultiselect（）；
});
函数BindMultiselect（）{
$（“#PersonTypeID”）.multiselect（）；
}