如何使用 MVC4 动态 Html 输入

Question

我是 MVC 新手并使用 MVC4。我有一系列级联下拉列表，我用 AJAX 调用填充这些下拉列表。 Customer > Family > Assembly - 组件决定了我需要用户填写多少 Balun（具有属性的对象），Balun 对象的数量取决于该组件的要求。

我为每个项目创建了一个单独的对象，并为此视图创建了一个视图模型。然后，我将 listOfBaluns 传递给一个局部视图，以循环并为需要的多个视图创建 HTML。

当我提交表单时，我总是只看到第一个 Balun 对象的属性。根据我的理解，我正确地使用了局部视图来遍历 Balun 对象列表，但是这些对象并没有出现在 FormCollection 或 Request.Form 的 Post 中。

在我包含的代码中，我只是在测试是否可以让 2 个 balun 工作，这应该可以解释为什么我要明确地将 2 个 balunrecord 添加到视图模型的列表中。

任何帮助将不胜感激。

这里是视图 -

@model Nortech_Intranet.ViewModels.BalunTuningEntryViewModel
@using Nortech_Intranet.Models.BalunModels

@using (Html.BeginForm()) {
    @Html.AntiForgeryToken()
    @Html.ValidationSummary(true)

    <div class="whiteBodyContainer">
        @*Text Entry fields*@
        <table style="margin: auto;">
            <tr>
                <th>
                    @Html.LabelFor(model => model.balunTuningRecord.Start_Timestamp)
                </th>
                <td>
                    @Html.TextBoxFor(model => model.balunTuningRecord.Start_Timestamp, new { @Value = @System.DateTime.Now } )
                </td>
                <th>
                    @Html.LabelFor(model => model.balunTuningRecord.Work_Order)
                </th>
                <td>
                    @Html.TextBoxFor(model => model.balunTuningRecord.Work_Order)
                </td>
                <th>
                    @Html.LabelFor(model => model.balunTuningRecord.Serial_Number)
                </th>
                <td>
                    @Html.TextBoxFor(model => model.balunTuningRecord.Serial_Number)
                </td>
            </tr>
        </table>
        <hr />    

        <table style="margin: auto;">
            <tr>
                @Html.Partial("_RenderBalun", Model.balunList)
            </tr>
        </table>
    </div>

    <p>
        <input type="submit" value="Create Tuning Record" />
    </p>
}

ViewModel -

using Nortech_Intranet.Models.BalunModels;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace Nortech_Intranet.ViewModels
{
    public class BalunTuningEntryViewModel
    {
        public List<Customer> customerList { get; set; }
        public List<Family> familyList { get; set; }
        public List<Assembly> assemblyList { get; set; }
        public List<NWAnalyzerModel> nwAnalyzerModelList { get; set; }
        public List<NWAnalyzerCAL_ID> nwAnalyzerCAL_IDList { get; set; }
        public List<TestUser> testUserList { get; set; }
        public List<BalunRecord> balunList { get; set; }

        public BalunTuningRecord balunTuningRecord { get; set; }

        public BalunTuningEntryViewModel() : base ()
        {
            balunList = new List<BalunRecord>();

            BalunRecord newRecord = new BalunRecord();
            balunList.Add(newRecord);
            BalunRecord newRecord2 = new BalunRecord();
            balunList.Add(newRecord2);
        }

        public BalunTuningEntryViewModel(int i)
        {
            balunList = new List<BalunRecord>();

            for (int counter = 0; counter < i; counter++)
            {
                BalunRecord newRecord = new BalunRecord();
                balunList.Add(newRecord);
            }
        }
    }
}

局部视图 -

@model IEnumerable<Nortech_Intranet.Models.BalunModels.BalunRecord>
@using Nortech_Intranet.Models.BalunModels

@{
    int counter = 1;
    foreach(BalunRecord record in Model)
    {
    <td>
        <table id="@("tblBalun"+@counter)"  style="border: 2px solid gray; visibility: collapse;">
            <tr>
                <th colspan="2" style="text-align: center;"><label>Balun #@counter</label></th>
            </tr>
            <tr>
                <th>
                    @Html.LabelFor(model => record.Tuning_Cap_1)
                </th>
                <td>
                    @Html.TextBoxFor(model => record.Tuning_Cap_1, new { id = "ddlBalun" + @counter + "Cap" + "1" })
                </td>
            </tr>
            <tr>
                <th>
                    @Html.LabelFor(model => record.Tuning_Cap_2)
                </th>
                <td>
                    @Html.TextBoxFor(model => record.Tuning_Cap_2, new { id = "ddlBalun" + @counter + "Cap" + "2" })
                </td>
            </tr>
        </table>
    </td>       

        counter = counter + 1;
    }
}

Answer 1

我想通了，解决方案是循环并使用模型的索引。这是解决问题的视图中的新部分 -

@{
    var counter = 1;
    for (int i = 0; i < Model.balunList.Count; i++)
    {
    <td>
    <table id="@("tblBalun" + @counter)"  style="border: 2px solid gray; visibility: collapse;">
        <tr>
            <th colspan="2" style="text-align: center;"><label>Balun #@counter</label></th>
        </tr>
        <tr>
            <th>
                @Html.LabelFor(model => model.balunList[i].Tuning_Cap_1)
            </th>
            <td>
                @Html.TextBoxFor(model => model.balunList[i].Tuning_Cap_1, new { id = "ddlBalun" + @counter + "Cap" + "1" })
            </td>
        </tr>
        <tr>
            <th>
                @Html.LabelFor(model => model.balunList[i].Tuning_Cap_2)
            </th>
            <td>
                @Html.TextBoxFor(model => model.balunList[i].Tuning_Cap_2, new { id = "ddlBalun" + @counter + "Cap" + "2" })
            </td>
        </tr>
    </table>
    </td>
        counter++;
    }   
}