Question

我使用的是MVC 5，我有一个部分视图呈现样式选择：

  @model Int16
  <div class="select">
    <span class="arr"></span>
    <select>
        <option>2016</option>
    </select>
  </div>

注意模型。我传入的int会改变select的宽度。这是我在Index.cshtml和其他视图中渲染局部视图的方式：

   @Html.Partial("~/Views/Components/_select.cshtml",(short) 300)

所以在这个例子中，我希望select的宽度为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以便更改部分视图内部选区的宽度会更好吗？

由于

Answer 1

您可以尝试使用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>

Answer 2

在你的情况下，我认为你甚至不需要javascript - 直接在select元素上使用Razer。

@model Int16
<div class="select">
  <span class="arr"></span>
  <select style="width: @string.Format("{0}px", Model)">
    <option>2016</option>
  </select>
</div>

Answer 3

一个脚本结束标记就在你的函数中。

<script>
    $(function () {
        debugger;
        var width = '@Model';
        if (width !== '') {
            $('div.select select').css(width, width + 'px');
        }
    });
 }
</script>

至于在视图中直接使用javascript，您可以在单独的文件中获取代码，并在部分视图中仅放置引用src。比如这个：

<script type="text/javascript" src="~/exemple.js")"></script>

使用PartialView作为带有变量的可重复使用的html代码

3 个答案: