我正在使用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的宽度?

谢谢

最佳答案

您可以尝试将CS​​S代码替换为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/

10-12 13:00