在ASP.NET MVC中创建动态表单

时间:2015-08-26 15:01:06

标签: c# asp.net asp.net-mvc asp.net-mvc-4 razor

我有一个ASP.NET MVC应用程序,可以通过采购订单跟踪我们公司的供应商。每个PO评级都分配了一个类型。每种类型都可以有多个评级部分,每个评级部分可以有多个类别。这些类看起来像这样:

public class RatingModel{
    /*Fields for the purchase order*/

    public List<RatingSectionModel> RatingSections { get; set; }
}

public class RatingSectionModel {
    /*Fields for the Rating section*/

    public List<RatingCategoryModel > Categories { get; set; }
}

public class RatingCategoryModel {
    /*Fields for the category*/
}

在我的项目中,我试图使用修改后的BeginCollectionItem找到here。 cshtml是:

_RatingModel.cshtml:

@model VendorRating.Models.RatingModel
@Html.HiddenFor(model => model.VendorId)
@Html.HiddenFor(model => model.VendorName)
@Html.HiddenFor(model => model.AwardDate)
@Html.HiddenFor(model => model.AwardValue)
@Html.HiddenFor(model => model.CloseDate)
@Html.HiddenFor(model => model.FinalValue)
@Html.HiddenFor(model => model.ServiceRep)
@Html.HiddenFor(model => model.PoId)

<div style="display:table;margin-bottom:5px;">
    <div style="display:table-row">
        <div style="display:table-cell;vertical-align:top;">
            @Html.LabelFor(model => model.TypeId)
        </div>
        <div style="display:table-cell;vertical-align:top;">
            @Html.DropDownListFor(model => model.TypeId, Model.Types)
        </div>
    </div>
</div>
<table>
    <tr>
        <td class="table-header">@Html.LabelFor(model => model.PoId, htmlAttributes: new { @class = "control-label" })</td>
        <td class="table-header">@Html.LabelFor(model => model.VendorName, htmlAttributes: new { @class = "control-label" })</td>
        <td class="table-header">@Html.LabelFor(model => model.AwardDate, htmlAttributes: new { @class = "control-label" })</td>
        <td class="table-header">@Html.LabelFor(model => model.AwardValue, htmlAttributes: new { @class = "control-label" })</td>
    </tr>
    <tr>
        <td>@Html.DisplayFor(model => model.PoId, new { htmlAttributes = new { @class = "form-control" } })</td>
        <td>@Html.DisplayFor(model => model.VendorName, new { htmlAttributes = new { @class = "form-control" } })</td>
        <td>@Html.DisplayFor(model => model.AwardDate, new { htmlAttributes = new { @class = "form-control" } })</td>
        <td>@Html.DisplayFor(model => model.AwardValue, new { htmlAttributes = new { @class = "form-control" } })</td>
    </tr>
    <tr>
        <td class="table-header">@Html.LabelFor(model => model.CloseDate, htmlAttributes: new { @class = "control-label" })</td>
        <td class="table-header" ">@Html.LabelFor(model => model.FinalValue, htmlAttributes: new { @class = "control-label" })</td>
        <td class="table-header" ">@Html.LabelFor(model => model.ServiceRep, htmlAttributes: new { @class = "control-label" })</td>
    </tr>
    <tr>
        <td>@Html.DisplayFor(model => model.CloseDate, new { htmlAttributes = new { @class = "form-control" } })</td>
        <td>@Html.DisplayFor(model => model.FinalValue, new { htmlAttributes = new { @class = "form-control" } })</td>
        <td>@Html.DisplayFor(model => model.ServiceRep, new { htmlAttributes = new { @class = "form-control" } })</td>
    </tr>
</table>
<div id="sections">
    @{
        if(Model.Sections != null) {
            @Html.EditorFor(model => model.Sections)

        }
    }

RatingSectionModel.cshtml:

@model List<VendorRating.Models.RatingSectionModel>

@{
    var id = "";

    foreach(VendorRating.Models.RatingSectionModel sectionModel in Model) {
        using(Html.BeginCollectionItem("Sections", out id)) {

            <fieldset style="margin-top:10px;">
                <legend style="font-weight:bold;">
                    @sectionModel.SectionName
                    @Html.HiddenFor(model => sectionModel.SectionId)
                </legend>
                <div style="display:table;width:100%">

                    @foreach(VendorRating.Models.RatingCategoryModel c in sectionModel.RatingCategories) {
                        @Html.EditorFor(cat => c);
                    }
                    <div style="display:table-row;width:100%">
                        <div style="display:table-cell;width:70%"></div>
                        <div style="display:table-cell;text-align:right;width:10%"></div>
                        <div style="display:table-cell;text-align:right;width:10%">Total</div>
                        <div style="display:table-cell;text-align:right;width:10%;"><div data-section-total="@sectionModel.SectionId" style="width:50%;border-bottom:solid 1px lightgray;text-align:right;"></div></div>
                    </div>
                </div>
            </fieldset>
            <script>
                function changeTotals() {
                    var totalScore = 0;
                    $('#poForm').find('*[data-section-score="@sectionModel.SectionId"]').each(function () {
                        var val = parseFloat($(this).text());

                        if (!isNaN(val)) {
                            totalScore = totalScore + val;
                        }
                    });

                    $('#poForm').find('*[data-section-total="@sectionModel.SectionId"]').text(totalScore);
                }
            </script>
        }
    }
}

字段生成正确,但是当我检查表单时,每个字段的名称是Sections [ sectionid here ]。sectionModel。 FieldName 。插入到名称中的sectionModel在提交表单时使其与Sections集合无法正确绑定。适当数量的部分将添加到集合中,但它们的所有属性都是空的。我确定我的设置错了,但我不知道它可能是什么。

1 个答案:

答案 0 :(得分:1)

您应该将foreach更改为for,并且绑定将起作用!