从多级动态集合中添加下拉列表

我有这些模型。

项目视图模型

public class ProjectViewModel
    {
        //some properties..

        public IList<ScopeOfWorkViewModel> ScopeOfWork { get; set; }
    }

工作范围视图模型

public class ScopeOfWorkViewModel
    {
        //some properties
        public IList<MaterialsViewModel> Materials { get; set; }
    }

材料视图模型

 public class MaterialsViewModel
        {
            public int MaterialId { get; set; }
            [Display(Name = "Material")]
            public string MaterialName { get; set; }
            public int? Quantity { get; set; }
            public double? Cost { get; set; }
            public int? ScopeOfWorkId { get; set; }

            // should be a drop down list and get its data from database
            public IEnumerable<SelectListItem> CategoryList { get; set; }
        }

类别模型

 public partial class tblCategory
    {
        public tblCategory()
        {
            this.tblMaterials = new HashSet<tblMaterial>();
        }

        public int CategoryId { get; set; }
        public string CategoryName { get; set; }

        public virtual ICollection<tblMaterial> tblMaterials { get; set; }
    }

这是我的观点

@model MigratingDB.Models.ProjectViewModel
<script src="~/Scripts/jquery-1.10.2.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.js"></script>
@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()

    <div class="form-horizontal" id="ProjectForm">
        <h4>ProjectViewModel</h4>
        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })

        Dynamically add ScopeOfWork and Materials<br />
        <a href="javascript:void(0)" id="addScope">Add Scope of Work</a>
        <div id="scopes">
            <div class="scope">
                <div class="materials">
                    <div class="material">
                    </div>
                </div>
            </div>
        </div>

        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Create" class="btn btn-default" />
            </div>
        </div>
    </div>
}

<div>
    @Html.ActionLink("Back to List", "Index")
</div>


<div id="newScope" style="display:none">
    <div class="scope">
        <h3>Scope</h3>
        <div class="form-group">
            <label for="_#__ScopeOfWorkName" class="control-label col-md-2">Scope Of Work</label>
            <div class="col-md-10">
                <input class="form-control" type="text" id="_#__ScopeOfWorkName" name="ScopeOfWork[#].ScopeOfWorkName" value="">
            </div>
        </div>
        <input type="hidden" class="scopeindex" name="ScopeOfWork.Index" value="#" />

        <div class="materials">
            <h4>Material</h4>
            <a href="javascript:void(0)" class="addmaterial">Add Material</a>
        </div>
    </div>
</div>

<div id="newMaterial" style="display:none">
    <div class="form-group">
        <label for="_#__Materials_%__MaterialName" class="control-label col-md-2">Material</label>
        <div class="col-md-2">
            <input class="form-control" type="text" id="_#__Materials_%__MaterialName" name="ScopeOfWork[#].Materials[%].MaterialName" value="">
        </div>
    </div>

    <div class="form-group">
        <label for="_#__Materials_%__Quantity" class="control-label col-md-2">Quantity</label>
        <div class="col-md-1">
            <input class="form-control" type="text" id="_#__Materials_%__Quantity" name="ScopeOfWork[#].Materials[%].Quantity" value="">
        </div>
    </div>

    <div class="form-group">
        <label for="_#__Materials_%__Cost" class="control-label col-md-2">Cost</label>
        <div class="col-md-1">
            <input class="form-control" type="text" id="_#__Materials_%__Cost" name="ScopeOfWork[#].Materials[%].Cost" value="">
        </div>
    </div>

//build a category drop down list here

    <input type="hidden" class="materialindex" name="ScopeOfWork[#].Materials.Index" value="%" />
</div>

<script>
    var form = $('form');
    var scope = $('#newScope');
    var material = $('#newMaterial');

    form.on('click', '.addmaterial', function () {
        var clone = material.clone();
        var scopeIndex = $(this).closest('.scope').find('.scopeindex').val();
        clone.html($(clone).html().replace(/#/g, scopeIndex));

        var materialIndex = new Date().getTime();
        clone.html($(clone).html().replace(/%/g, materialIndex));
        $(this).closest('.materials').append(clone.html());
        form.data('validator', null);
        $.validator.unobtrusive.parse(form);
    });

    $('#addScope').click(function () {
        var clone = scope.clone();
        var scopeIndex = new Date().getTime();
        clone.html($(clone).html().replace(/#/g, scopeIndex));
        $('#scopes').append(clone.html());
        form.data('validator', null);
        $.validator.unobtrusive.parse(form);
    });
</script>

每次创建 MaterialViewModel 对象并将其发布到我的数据库时，请帮助我为该类别构建一个下拉列表。我有一个类别表，我想在其中传递其值以生成下拉列表。我更喜欢使用强类型模型而不是使用 ViewBag