將動態添加的控件添加到ViewModel

Question

我有以下ViewModel，其中填充了一些預定義的數據。 該預定義數據之一是ApplicationParameter ViewModels列表，該列表設置為最初顯示n個ApplicationParameters。

我想要實現的是允許用戶在單擊按鈕時添加更多數量的ApplicationParameters ViewModel，這是通過使用ApplicationParameter代碼調用PartialView實現的。 正如預期的那樣，控件確實會自動添加，但是由於它們的名稱不正確（因為它們是嵌套的），因此在ViewModel中無法識別它們。

如何使動態添加的控件對POST返回的ViewModel可見。

的ViewModels

public class ApplicationVM
{

    public int idApplication { get; set; }
    public int idCompany { get; set; }
    public string Company { get; set; }
    public string Name { get; set; }
    public string Description { get; set; }
    public string Link { get; set; }
    public string Photo { get; set; }

    public List<ApplicationParameterVM> ApplicationParameters { get; set; }
}

public class ApplicationParameterVM
{
    public string Name { get; set; }
    public bool Keep { get; set; }
}

動作視圖（代碼段）

 <tbody id="editorRows">
     @for (int i = 0; i < Model.ApplicationParameters.Count(); i++)
         {
            <tr>
                <td>
                    @Html.TextBoxFor(m => Model.ApplicationParameters[i].Name, new { @class = "form-control" })
                     @Html.CheckBoxFor(m => Model.ApplicationParameters[i].Keep)
                  </td>
              </tr>
           }
   </tbody>

用於添加ApplicationParameterVM的操作視圖

   @model AccessMarketmind.Areas.Administration.ViewModels.ApplicationParameterVM
   @{
        Layout = null;
    }

<tr class="application-parameters">
     <td>
         @Html.TextBoxFor(m => Model.Name, new { @class = "form-control" })
         @Html.CheckBoxFor(m => Model.Keep)
     </td>
</tr>

我知道這看起來很瑣碎，可以使用Javascript輕松完成，但事實是我有更復雜的ViewModel（閱讀：大量嵌套），其中Javascript不可選。

Answer 1

這些動態表單的基本技巧是要發布的表單數據應與屬性名稱匹配。

例如：動態控件數組的最終屬性名稱應該是。 ApplicationParameters [0]。名稱和ApplicationParameters [0]。保留和
ApplicationParameters [1]。名稱和ApplicationParameters [1]。保持.....

為此，請僅使用松散耦合的幫助器Html.TextBox（）。

Answer 2

經過有用的回答后，我能夠按照我想要的方式正常工作。 我所做的是服務器和客戶端代碼的組合，其想法是基本上在ViewModel中添加一個附加屬性，我將其命名為ControlName，類型為字符串。 這樣做的好處在於，如果ViewModel發生更改，您可以輕松地將代碼調整為當前需求，而不必擔心太多，更不用說只需將ControlName屬性添加到每個ViewModel子級別即可輕松進入多個層次。

注意：以下示例不是OP中提到的示例

首先，您需要某種包裝器（在我的情況下是一個表）和一個鏈接，該鏈接使您可以創建新的控件行：

        @Html.ActionLink("Add attribute", "AddProductCategoryAttribute", null, new { id = "addProductCategoryAttribute" })
        <table class="table table-condensed table-striped">
            <thead>
                <tr>
                    <th>

                    </th>
                    <th>
                        Attribute
                    </th>
                    <th>
                        Measure
                    </th>
                </tr>
            </thead>
            <tbody id="productCategoryAttributes"></tbody>
        </table>

在客戶端，您需要這樣的東西

    <script type="text/javascript">
    $("#addProductCategoryAttribute").click(function () {
        elementCount = $(".productCategoryAttribute").length;

        $.ajax({
            url: this.href + "?elementCount=" + elementCount,
            cache: false,
            success: function (html) {
                $("#productCategoryAttributes").append(html);
            }
        });
        return false;
    })
</script>

注意鏈接上附加的elementCount-此查詢字符串用於讓Action方法知道已經存在多少個元素。 在談論Action方法時，現在是這樣。

    public ActionResult AddProductCategoryAttribute(int elementCount)
    {
        ProductCategoryOverview.ProductCategoryAttributeVM productCategoryAttributeVM = new ProductCategoryOverview.ProductCategoryAttributeVM();
        productCategoryAttributeVM.ControlName = "ChangeThisNameToWhateverIsNeeded[" + elementCount.ToString() + "].";
        productCategoryAttributeVM.Keep = true;

        return View(productCategoryAttributeVM);
    }