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

Question

I'm currently using a Partial view to add dynamic items to a table.

The table is contained in a Wizard , the wizard uses knockoutjs to bind data.

Currently, the partial view added successfully. However, the values entered in the Partial view are not binding back to the main Model.

I have search SO and the web for solutions, but could not found any.

My Partial View:

@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>
}

Table:

 <table id="LibList" class="table table-responsive table-condensed table-striped">
            <thead>
                <tr>
                    <th style="width: 150px;">
                        @Html.DisplayNameFor(model => model.Step3.Liabilities[0].Types)
                    </th>
                    <th>
                        @Html.DisplayNameFor(model => model.Step3.Liabilities[0].Name)
                    </th>
                    <th>
                        @Html.DisplayNameFor(model => model.Step3.Liabilities[0].Balance)
                    </th>
                    <th>
                        @Html.DisplayNameFor(model => model.Step3.Liabilities[0].Payment)
                    </th>
                    <th>
                        @Html.DisplayNameFor(model => model.Step3.Liabilities[0].Interest)
                    </th>
                    <th>
                        @Html.DisplayNameFor(model => model.Step3.Liabilities[0].Teams)
                    </th>
                    <th>
                        @Html.DisplayNameFor(model => model.Step3.Liabilities[0].Tenure)
                    </th>
                    <th>
                        Delete
                    </th>
                </tr>
            </thead>
            <tbody>
                @for (var i = 0; i < Model.Step3.Liabilities.Count; i++) {
                    Html.RenderPartial("_LibListItem", Model.Step3.Liabilities[i]);
                }
            </tbody>
        </table>

Existing items are added when the page loads for the first time. Then the user can later add more items which are dynamically added to the table.

Has items are added to the table, I want the new items add to:

Model.Step3.Liabilities

On post back.

Add Function:

 $('.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();
            }
        });
    });

Add Action:

 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);
    }

My Model:

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>();
    }

}

These are the post back methods:

protected override void ProcessToNext(WizardViewModel model) {
        ((QuestionWizardViewModel)model).PageTitle = GetDisplayName(typeof(QuestionWizardViewModel), "Step" + model.StepIndex); 
    }

    protected override void ProcessToPrevious(WizardViewModel model) {
        ((QuestionWizardViewModel)model).PageTitle = GetDisplayName(typeof(QuestionWizardViewModel), "Step" + model.StepIndex);
    }

Thanks for the help!

Answer 1

You should not render partial for each item. You should render it for whole list and MVC will take care of repeating it and indexing input fields correctly.

So you should move your PartialView contents to EditorTemplate and then in your form use:

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

Remember that you need to create a template for one item and use this template on whole list (like above).

Answer 2

My final solution:

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

Template:

<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>

knockout ModelView:

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));
    });

Add Button:

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