Javascript mvc视图中的独立代码

我有一个视图索引，它是我网站的第一页。 我在页面上有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>

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

<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>

<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>

@if（ViewData.ContainsKey（“makes”））
{
@DropDownList（“makes”，ViewData[“makes”]作为列表，“--Select car--”，new{@class=“dropdown toggle form control”}）
}

<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>

@DropDownList（“models”，new SelectList（string.Empty，“Value”，“Text”），“--Select model--”，new{@class=“dropdown toggle form control”}）

<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>

@DropDownList（“引擎”，新选择列表（string.Empty，“Value”，“Text”），“--Select引擎--”，新{@class=“dropdown toggle form control”}）

<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代码，但下拉列表中没有正确填充数据。

---

只有当我在第一页时，它才能正常工作。你能给我一些提示吗？解决这类问题的最佳方法是什么。谢谢大家!

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

其他页面是否在同一个控制器中？我在其他控制器中有，也许您可以使用ChildAction:and。只需将ViewData逻辑移动到childaction，并在主视图中调用childaction。

<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>