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

时间:2016-02-22 16:14:46

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

所以我有一个类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>

由于一些奇怪的原因,当我最初创建页面时,下拉列表右Way it should be,但当我使用ajax调用将另一个UserDjTypeModel添加到页面时,我收到的html脚本会将下拉列表搞砸。我收到与chrome视图源页面相同的代码,但是当我检查元素时,在页面加载期间创建的标签上有另一个标记。我已经检查过,并且没有运行JSScript。以下是在源页面和通过AJAX返回的html中看到的代码

&#13;
&#13;
<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>
&#13;
&#13;
&#13;

这是返回对象的出现方式 enter image description here正如您所看到的,虽然html代码存在,但两个下拉列表都无法显示

1 个答案:

答案 0 :(得分:1)

叹息我的公司正在使用Materialize显然,在将新的选择列表插入DOM后,Materialize需要进行Js更新调用。请参阅http://materializecss.com/forms.html#select初始化部分