C# 如何将动态加载的局部视图与父模型绑定

我目前正在使用局部视图向表中添加动态项

该表包含在中，向导使用knockoutjs绑定数据

当前，已成功添加部分视图。但是，在局部视图中输入的值不会绑定回主模型

我在SO和web上搜索了解决方案，但没有找到任何解决方案

我的部分观点是：

@model Question.Models.LiabilityModel

<tr>
@using (@Html.BeginCollectionItem("Liabilities")) {
    <td>
        @Html.DropDownListFor(model => model.Type, Model.Types, new { @class = "form-control selectpicker", id = "" })
    </td>
    <td>
        @Html.TextBoxFor(model => model.Name, new { @class = "form-control", id = "" })
    </td>
    <td>
        @Html.TextBoxFor(model => model.Balance, new { @class = "form-control auto", id = "" })
    </td>
    <td>
        @Html.TextBoxFor(model => model.Payment, new { @class = "form-control auto", id = "" })
    </td>
    <td>
        @Html.TextBoxFor(model => model.Interest, new { @class = "form-control", id = "", @type = "number" })
    </td>
    <td>
        @Html.TextBoxFor(model => model.Teams, new { @class = "form-control", id = "", @type = "number" })
    </td>
    <td>
        @Html.TextBoxFor(model => model.Tenure, new { @class = "form-control", id = "", @type = "number" })
    </td>
    <td>
        <button class="btn btn-primary remove-button" type="button" data-id="@Model.ID">
            <span class="glyphicon glyphicon-trash"></span>
        </button>
    </td>
}

在邮筒背面

添加功能：

 $('.add-button').click(function () {
        var action = "/QuestionWizard/AddRow";
        $.ajax({
            url: action,
            cache: false,
            success: function (result) {
                $("#LibList").find("tbody").append($(result));
                $("#LibList").find("tbody").find('.selectpicker').last().selectpicker();
            }
        });
    });

添加操作：

 public ActionResult AddRow() {
        LiabilityModel lib = new LiabilityModel();
        try {
            if (LiabilitySessionState.Count == 0) {
                LiabilitySessionState = ((QuestionWizardViewModel)this.ViewModelSessionState).Step3.Liabilities;
            }
            lib.ID = LiabilitySessionState.LastOrDefault().ID + 1;
            LiabilitySessionState.Add(lib);
        } catch (Exception) {
            return Json(null);
        }
        return PartialView("_LibListItem", lib);
    }

我的模型：

public class WizardViewModelThirdStep : ModelBase {


        [Display(Name = "Liabilities")]
        public List<LiabilityModel> Liabilities { get; set; }

        public void getInitialItems() {
            Liabilities = new List<LiabilityModel>();

            //initial item 
            LiabilityModel model = new LiabilityModel();
            model.ID = 1;
            Liabilities.Add(model);
        }

    }
public class LiabilityModel : ModelBase {

    public int ID { get; set; }

    [Display(Name = "Type", Prompt = "Type")]
    public List<SelectListItem> Types { get; set; }

    public LIA Type { get; set; }

    [DisplayFormat(ConvertEmptyStringToNull = false)]
    [Display(Name = "Name of Institution.", Prompt = "Name of Institution.")]
    public string Name { get; set; }

    [Display(Name = "Balance ($).", Prompt = "Balance ($).")]
    [DataType(DataType.Currency)]
    public decimal Balance { get; set; }

    [Display(Name = "Payment ($).", Prompt = "Payment ($).")]
    [DataType(DataType.Currency)]
    public decimal Payment { get; set; }

    [Display(Name = "Interest (%).", Prompt = "Interest (%).")]
    public decimal Interest { get; set; }

    [Display(Name = "Teams", Prompt = "Teams")]
    public decimal Teams { get; set; }

    [Display(Name = "Tenure", Prompt = "Tenure")]
    public decimal Tenure { get; set; }

    public LiabilityModel() {
        ID = 0;
        Types = new List<SelectListItem>();
    }

---

谢谢你的帮助

不应为每个项目渲染部分。您应该为整个列表呈现它，MVC将负责重复它并正确索引输入字段

因此，您应该将PartialView内容移动到EditorTemplate，然后在表单中使用：

<tbody>
    @Html.EditorFor(Model.Step3.Liabilities)   
</tbody>

请记住，您需要为一个项目创建一个模板，并在整个列表上使用此模板，如上所述。

我的最终解决方案：

<tbody data-bind="template: { name: 'LibRowTemplate', foreach: Model.Step3.Liabilities }"></tbody>

添加按钮：

  <button type="button" class="btn btn-primary" data-bind="event:{ click: AddLib }">
                <span class="glyphicon glyphicon-plus"></span> Add New
            </button>

---

谢谢你的插曲！我以前试过这个，但对我正在努力做的事情起了作用这对我来说总是很有用，因为动态列表不绑定到什么？您需要显示发回的控制器方法，以及模型是否包含名为Responsibilities的属性，该属性是一个集合？使用ajax post向表中添加新项后，请参见上面的代码。新项目对负债托收没有约束力。是，该模型包含一个名为Responsibles with is a collection的属性。您尚未包括发回的方法，但请检查生成的html。我认为它会输出，但如果你发回主模型，它需要是是的，html输出guid索引。但是，正如我所提到的，我使用MVC向导1.3.1库，在绑定模型时使用了knockout。在进行了更多的调试之后，我注意到knockout并没有绑定guid。应该是这样的：我想你误解了我的评论。负债[…]之间存在差异。名称和步骤3。负债[…]。名称需要是后者才能绑定到WizardViewModel。

<tbody>
    @Html.EditorFor(Model.Step3.Liabilities)   
</tbody>

<tbody data-bind="template: { name: 'LibRowTemplate', foreach: Model.Step3.Liabilities }"></tbody>

<script type="text/html" id="LibRowTemplate">
<tr>
    <td>
        <select class="form-control selectpicker" data-bind="value: SelectedType, uniqueName: true">
            <option value="NONE">Select a Type</option>
            <option value="Loan">Loan</option>
            <option value="Investment">Investment</option>
            <option value="Others">Others</option>
        </select>
    </td>
    <td>
        <input class="form-control" data-bind="value: Name, uniqueName: true" />
    </td>
    <td>
        <input class="form-control" data-bind="value: Balance, uniqueName: true" />
    </td>
    <td>
        <input class="form-control" data-bind="value: Payment, uniqueName: true" />
    </td>
    <td>
        <input class="form-control" data-bind="value: Interest, uniqueName: true" />
    </td>
    <td>
        <input class="form-control" data-bind="value: Teams, uniqueName: true" />
    </td>
    <td>
        <input class="form-control" data-bind="value: Tenure, uniqueName: true" />
    </td>
    <td>
        <button class="btn btn-primary remove" type="button">
            <span class=" glyphicon glyphicon-trash"></span>
        </button>
    </td>
</tr>

self.AddLib = function () {
            self.Model.CurrentStep().Liabilities.push({ SelectedType: "", Name: "", Balance: "0", Payment: "0", Interest: "0", Teams: "0", Tenure: "0" });
        }

self.DelLib = function (element) {
            self.Model.CurrentStep().Liabilities.remove(element);
        }

 $("#tablelib").delegate(".remove", "click", function () {
        vm.DelLib(ko.dataFor(this));
    });

  <button type="button" class="btn btn-primary" data-bind="event:{ click: AddLib }">
                <span class="glyphicon glyphicon-plus"></span> Add New
            </button>