我正在使用MVC 5,并且有一个局部视图,该视图呈现了样式化的select:
@model Int16
<div class="select">
<span class="arr"></span>
<select>
<option>2016</option>
</select>
</div>
注意模型。我传递的是一个int,它将改变选择的宽度。这就是我在Index.cshtml和其他视图中呈现局部视图的方式:
@Html.Partial("~/Views/Components/_select.cshtml",(short) 300)
因此,在此示例中,我希望选择的宽度为300px。我在局部视图中添加了以下javascript,因此现在看起来像这样:
@model Int16
<script>
$(function () {
debugger;
var width = '@Model';
if (width !== '') {
$('div.select select').css(width, width + 'px');
}
});
</script>
}
<div class="select">
<span class="arr"></span>
<select>
<option>2016</option>
</select>
</div>
两个问题:
该代码无法正常工作。未调用javascript,因此select的宽度未更改。调试器语句未命中。
我不喜欢javascript处于局部视图内。我将在其中有8种选择的页面上(因此使用可重复使用的html的原因),但是由于javascript位于局部视图中,因此该代码将在该页面上显示8次。效率很低。
首先,如何使javascript在局部视图中触发? (我想回答这个问题,因为我看不到生命为什么不被触发)。
接下来,什么是放置javascript的更好的位置,以便更改部分视图内的selects的宽度?
谢谢
最佳答案
您可以尝试将CSS代码替换为JavaScript代码。实际上,您只是使用代码将css属性添加到html元素。那么,为什么不编写CSS规则呢?
@model Int16
<style>
div.select select { width: @(Model.ToString() + "px") }
</style>
<div class="select">
<span class="arr"></span>
<select>
<option>2016</option>
</select>
</div>
关于javascript - 使用Partial View作为带有变量的可重用html代码,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/37058130/