PartialView中的下拉控件填充，但其他选项卡中的相同控件不会

Question

我有一个带有引导标签的View，在2个标签中我有一个PartialView，PartialView用于Address，另一个PartialView用于Contact。

地址PartialView看起来像这样..

<script src="~/Scripts/Custom/Common/CommonControlsJS.js"></script>

<div class="form-horizontal">
    <div class="form-group">
        <label for="txtAddress1" class="control-label col-md-2" id="lblAddress1">Line 1</label>
        <div class="col-md-10">
            <input id="txtAddress1" type="text" class="form-control max-size" name="address" placeholder="Line 1" />
        </div>
    </div>
    <div class="form-group">
        <label for="txtAddress2" class="control-label col-md-2" id="lblAddress2">Line 2</label>
        <div class="col-md-10">
            <input id="txtAddress2" type="text" class="form-control max-size" placeholder="Line 2" />
        </div>
    </div>
    <div class="form-group">
        <label for="txtCity" class="control-label col-md-2" id="lblCity">City</label>
        <div class="col-md-10">
            <input id="txtCity" type="text" class="form-control max-size" name="city" placeholder="City" />
        </div>
    </div>
    <div class="form-group">
        <label for="txtState" class="control-label col-md-2" id="lblState">State</label>
        <div class="col-md-4">
            <input id="txtState" type="text" class="form-control" name="state" placeholder="State" />
        </div>
        <label for="txtZip" class="control-label col-md-2" id="lblZip">Zip/Postal</label>
        <div class="col-md-4">
            <input id="txtZip" type="text" class="form-control" name="zip" placeholder="Zip/Postal" />
        </div>
    </div>
    <div class="form-group">
        <label for="acCountries" class="control-label col-md-2" id="lblCountry"><b>Country</b></label>
        <div class="col-md-10">
            <select id="acCountries" class="form-control" name="country"></select>
        </div>
    </div>

</div>

和我的联系人PartialView看起来像这样......

<script src="~/Scripts/Custom/Common/CommonControlsJS.js"></script>
<div class="form-horizontal">

    <div class="form-group">
        <label class="control-label col-md-2" for="txtContactType">Contact&nbsp;Type:</label>
        <div class="col-md-9">
            <input class="form-control fixed-form-control" id="ddContactType" placeholder="ContactType" />
        </div>
    </div>

    <div class="form-group">
        <label class="control-label col-md-2" for="txtContact">Contact:</label>
        <div class="col-md-9">
            <input class="form-control fixed-form-control" id="txtContact" placeholder="Contact" />
        </div>
    </div>

    <div class="form-group">
        <label class="control-label col-md-2" for="txtPhone">Home:</label>
        <div class="col-md-9">
            <input class="form-control fixed-form-control" id="txtPhone" placeholder="Home" />
        </div>
    </div>

    <div class="form-group">
        <label class="control-label col-md-2" for="txtWork">Work:</label>
        <div class="col-md-9">
            <input class="form-control fixed-form-control" id="txtWork" placeholder="Work" />
        </div>
    </div>

    <div class="form-group">
        <label class="control-label col-md-2" for="txtFax">Fax:</label>
        <div class="col-md-9">
            <input class="form-control fixed-form-control" id="txtFax" placeholder="Fax" />
        </div>
    </div>

    <div class="form-group">
        <label class="control-label col-md-2" for="txtMobile">Mobile:</label>
        <div class="col-md-9">
            <input class="form-control fixed-form-control" id="txtMobile" placeholder="Mobile" />
        </div>
    </div>

</div>

在Address PartialView中我有一个名为acCountries的下拉控件，它从我的CommonControlsJS文件填充，这是代码

$(document).ready(function () {
    CommonControlLibrary.GetCountries();
});

var CommonControlLibrary = {
    GetCountries: function () {
        var self = this;
        $.ajax({
            type: "GET",
            url: "/Common/GetCountries?id=" + 21,
            dataType: "JSON",
            contentType: "application/json; charset=utf-8",
            success: function (data, textStatus, jqXHR) {
                self.ShowCountries(data);
            }
        });
    },
    ShowCountries: function (countryData) {
        $("#acCountries").kendoDropDownList({
            dataSource: countryData,
            dataTextField: "dictionaryName",
            dataValueField: "dictionaryItemID",
            animation: false,
            optionLabel: {
                dictionaryName: "-- Select Country --",
                dictionaryItemID: "0"
            }
        })
    }
}

我有一个制造商标签和经销商标签，这些标签中的每一个都包含一个地址部分视图和一个联系人部分视图，我遇到的问题是地址部分视图acCountries下拉列表填充，但是经销商标签中的地址部分视图acCountries下拉列表不会填充，我不知道为什么。

由于这是在Address PartialView中发生的，我知道我将使用Contact PartialView遇到这个问题，因为我将在那里为Contact Type添加一个下拉列表。

一个地址PartialView acCountries下拉列表填充的原因是什么，但不填充第二个地址PartialView acCountries下拉列表？

修改

使用类而不是id

看起来像什么