下拉列表的生成方式与同一模板不同答案

【问题标题】：Dropdownlist being generated differently from same template下拉列表的生成方式与同一模板不同
【发布时间】：2016-06-04 04:00:09
【问题描述】：

所以我有一个类 ProfileViewModel，它有一个使用以下模板的 DJTypeModel 列表

@using DigitalDjPool.Website.Domain.Profiles
@model DigitalDJPool.Website.UI.Models.ProfileWizard.UserDJTypeModel

<div class="row no-margin">
    <div class="input-field col m4 s12"><h5>What type of DJ are you?</h5>
    </div>
    @Html.HiddenFor(m => m.UserMemberTypeId)
    <div class="input-field col m4 s12">
        @Html.DropDownListFor(m => m.SelectedMemberType, ((IEnumerable<MemberType>)Model.MemberTypesList)
            .Select(t => new SelectListItem { Value = t.Id.ToString(), Text = t.Name, Selected = t.Id.ToString().CompareTo(Model.SelectedMemberType) == 0 }), new { @class = "editprofile-info-ddl" })
    </div>
    <div class="input-field col m4 s12">
        @Html.TextBoxFor(m => m.MemberTypeInfo)
        @Html.ValidationMessageFor(m=> m.MemberTypeInfo)
    </div>
</div>
<div class="row no-margin">
    <div class="input-field col m4 s12"><h5> What is your typical audience size? </h5></div>
<div class="input-field col m4 s12">
    @Html.DropDownListFor(m => m.AudienceSize, new List<string> {"1-50", "50-499", "500+"}.Select(t => new SelectListItem {Value = t, Text = t, Selected = t == Model.AudienceSize}))
</div>
    </div>

由于某些奇怪的原因，当我最初创建页面时，下拉列表正确出现但是当我使用 ajax 调用将另一个 UserDjTypeModel 添加到页面时，我收到的 html 脚本会破坏下拉列表。我收到的代码与 chrome 视图源页面中的代码相同，但是当我检查元素时，在页面加载期间创建的元素上还有另一个标签。我已经检查过，没有运行 JSScript。以下是在源页面和通过 AJAX 返回的 html 中看到的代码

<div class="row no-margin UserDjTypeModelObj">
    <div class="input-field col m4 s12"><h5>What type of DJ are you?</h5>
    </div>
    <input id="UserDJTypeModel_0__UserMemberTypeId" name="UserDJTypeModel[0].UserMemberTypeId" type="hidden" value="2ad4c348-0120-4eeb-b031-a5b0008d0d43" />
    <div class="input-field col m4 s12">
        <select class="editprofile-info-ddl" id="UserDJTypeModel_0__SelectedMemberType" name="UserDJTypeModel[0].SelectedMemberType"><option value="f4579c21-8509-49df-9329-00fc33bd3344">College Radio</option>
<option selected="selected" value="8f670bf6-1a95-4c30-abac-2acac6fd3e05">FM Radio</option>
<option value="b9b14aca-81d2-49a1-9393-3c2e6552ff71">Mobile DJ</option>
<option value="d2744e05-8f19-4c80-915c-60f7582792d0">Tour DJ</option>
<option value="c7aa4e2a-0b77-4ce1-af51-7683e50c3b8f">Internet Radio</option>
<option value="8e4e882a-c650-4841-beb7-c18105b929ad">Satellite Radio</option>
<option value="561dcbec-e6d6-4f28-ae64-c50be123e64e">Bedroom DJ</option>
</select>
    </div>
    <div class="input-field col m4 s12">
        <input id="UserDJTypeModel_0__MemberTypeInfo" name="UserDJTypeModel[0].MemberTypeInfo" type="text" value="98.7" />
        <span class="field-validation-valid" data-valmsg-for="UserDJTypeModel[0].MemberTypeInfo" data-valmsg-replace="true"></span>
    </div>
</div>
<div class="row no-margin">
    <div class="input-field col m4 s12"><h5> What is your typical audience size? </h5></div>
<div class="input-field col m4 s12">
    <select id="UserDJTypeModel_0__AudienceSize" name="UserDJTypeModel[0].AudienceSize"><option value="1-50">1-50</option>
<option value="50-499">50-499</option>
<option selected="selected" value="500+">500+</option>
</select>
</div>

这就是返回对象的输出方式如您所见，尽管有 html 代码，但两个下拉列表都无法显示

【问题讨论】：

澄清一下，您是从 ajax 调用还是 html 代码中返回模型？
我将模型的部分视图（作为 html）返回给将 html 插入 dom 的 ajax
局部视图在ajax调用之前已经在页面中，还是之后加载？编辑：我的意思是你加载它两次？
它是这些模型列表的部分视图，因此我在进行 ajax 调用时替换现有代码
我能看到 ajax 代码的 onSuccess 部分吗？

标签： c# html asp.net ajax asp.net-mvc-4

【解决方案1】：

sigh 我的公司显然正在使用 Materialize，Materialize 在将新的选择列表插入 DOM 后需要一个 Js 更新调用。见http://materializecss.com/forms.html#select初始化部分

【讨论】：

Dang，希望这对某人有所帮助。