使用另一个选项卡模型填充选项卡上的字段答案

【问题标题】：Populate fields on tab using another tabs model使用另一个选项卡模型填充选项卡上的字段
【发布时间】：2019-02-08 07:13:03
【问题描述】：

我想知道是否可以使用单独的选项卡模型填充选项卡？

我有两个带有两个单独模型的选项卡。 Tab 2 的字段需要 Tab 1 中的信息。这可能吗？

标签示例：

tabstrip.Add().Text("Pre-screening")
         .Selected(true)
         .Enabled(true)
         .Content(Html.Partial("~/Views/EyeTestReport/_Prescreening.cshtml", new Website.Models.EyeTestReport.PreScreeningViewModel(Model.VisitID)).ToHtmlString());

tabstrip.Add().Text("Screening")
        .Enabled(true)
        .Content(Html.Partial("~/Views/EyeTestReport/_Screening.cshtml", new Website.Models.EyeTestReport.ScreeningViewModel(Model.VisitID)).ToHtmlString());

在选项卡 1 中使用模型填充的字段：

<div style="margin-right:10px; padding-top:10px;" class="form-field">
     @Html.Kendo().NumericTextBoxFor(model => model.VAL).Format("{0:n2}").HtmlAttributes(new { @class = "k-textboxC reset", id = "LeftVA" })
</div>

标签2中需要填写的字段：

<div style="margin-right:10px; padding-top:10px;" class="form-field">
     @(Html.Kendo().TextBox().Name("LeftVA").Value("").HtmlAttributes(new { @class = "k-textboxC ", @readonly = "readonly" }))
</div>

提前谢谢你。

【问题讨论】：

我认为你可以使用var leftVA = $("#Tab1 > LeftVA").data("kendoNumericTextBox").value()获取数字文本值，然后使用$("#Tab2 > LeftVA").data("kendoTextBox").value(leftVA)进行设置。但是我仍然不确定这应该在服务器端还是客户端执行。
@TetsuyaYamamoto 你的方法也可以，但我刚刚决定采用另一种方法。

标签： asp.net-mvc model-view-controller kendo-ui

【解决方案1】：

我决定简单地将第一个选项卡视图模型嵌套到第二个选项卡视图模型中，然后像这样显式调用它：

public class ScreeningViewModel
{
    public AutoRefracViewModel AutoRefractionDataModel { get; set; }
    public PupillaryDistanceViewModel PupillaryDistanceDataModel { get; set; }
    public IopViewModel IOPDataModel { get; set; }
    public HabitualRxViewModel HabitualRxViewModel { get; set; }
    public PreScreeningViewModel PreScreeningViewModel { get; set; }
    public long VisitID { get; set; }

    public ScreeningViewModel(long ID)
    {
        PreScreeningViewModel = new PreScreeningViewModel(ID); //first tab model

        AutoRefractionDataModel = new AutoRefracViewModel(ID);
        PupillaryDistanceDataModel = new PupillaryDistanceViewModel(ID);
        IOPDataModel = new IopViewModel(ID);
        HabitualRxViewModel = new HabitualRxViewModel(ID);
    }
}

然后在视图上这样调用它：

<div style="margin-right:10px; padding-top:10px;" class="form-field">
     @(Html.Kendo().TextBoxFor(m => m.PreScreeningViewModel.VAL).HtmlAttributes(new { @class = "k-textboxC ", @readonly = "readonly" }))
</div>

【讨论】：