视图MVC中的单独代码

Question

我有一个索引视图，这是我网站的首页。 我在页面上有3个层叠下拉菜单，这些下拉菜单是根据前一个下拉列表填充的。 我使用jquery和json来解决这个问题，它工作正常，所有代码都在Index.cshtml 。

现在，我需要在网站的几乎所有页面上显示这些下拉列表。 我创建了一个局部视图，在其中复制了下拉列表，如您在此处看到的：

<div class="col-sm-4">
    <div style="padding-top:15px;">
        <form class="form-control-static">
            <div class="form-group">
                <div class="row">
                    <div class="col-sm-10">
                        @if (ViewData.ContainsKey("makes"))
                        {
                            @Html.DropDownList("makes", ViewData["makes"] as List<SelectListItem>, "--Select car--", new { @class = "dropdown-toggle form-control" })
                        }
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-10">
                        <p></p>
                        @Html.DropDownList("models", new SelectList(string.Empty, "Value", "Text"), "--Select model--", new { @class = "dropdown-toggle form-control" })
                    </div>
                </div>
                <div class="row">
                    <p></p>
                    <div class="col-sm-10">
                        @Html.DropDownList("engines", new SelectList(string.Empty, "Value", "Text"), "--Select engine--", new { @class = "dropdown-toggle form-control" })
                    </div>
                </div>
            </div>

        </form>

    </div>
</div>

<div class="col-sm-4" style="height: 10em;display: flex;align-items: center ; padding-top:25px;">
    <input type="submit" id="btnSearch" class="btn btn-default active" value="Search" disabled="disabled" style="width:150px;" />
</div>

但是填充下拉列表的逻辑仍然在Index.cshtml 。 尽管我尝试在新创建的局部视图中复制javascript代码，但下拉列表未正确填充数据。 仅当我在首页上时，它才能正常工作。 您能给我一些提示是解决此类问题的最佳方法吗？ 谢谢！

Answer 1

您可以将JS代码放在一个外部文件中，并使用script标签在模板的head标签中调用它：