如何将模型从父母发送给孩子

Question

我对如何使用局部视图和花式框将模型从父级发送到子级有疑问。

这是我的模型

public class SampleHeaderViewModels
{
    [Display(Name = "ID")]
    public int intID { get; set; }

    [Display(Name = "Field 1")]
    public string txtField1 { get; set; }

    [Display(Name = "Field 2")]
    public string txtField2 { get; set; }
}

public class SampleDetailViewModels
{
    [Display(Name = "ID")]
    public int intID { get; set; }

    [Display(Name = "Line")]
    public int intLine { get; set; }

    [Display(Name = "Detail 1")]
    public string txtDetail1 { get; set; }
}

public class SampleViewModels
{
    public SampleHeaderViewModels Header { get; set; }
    public List<SampleDetailViewModels> Detail { get; set; }
    public SampleDetailViewModels OneDetai { get; set; }

    public SampleViewModels()
    {
        Header = new SampleHeaderViewModels();
        Detail = new List<SampleDetailViewModels>();
        OneDetai = new SampleDetailViewModels();
    }
}

这是我的索引视图：

<div class="row">
    <div class="block">
        <div class="block-content controls">
            <div class="col-md-6">
                <div class="row-form">
                    <div class="col-md-4">
                        @Html.LabelFor(m => m.Header.txtField1, htmlAttributes: new { @class = "control-label" })
                    </div>
                    <div class="col-md-8">
                        @Html.HiddenFor(m => m.Header.intID)
                        @Html.TextBoxFor(m => m.Header.txtField1, htmlAttributes: new { @class = "form-control" })
                    </div>
                </div>
                <div class="row-form">
                    <div class="col-md-4">
                        @Html.LabelFor(m => m.Header.txtField2, htmlAttributes: new { @class = "control-label" })
                    </div>
                    <div class="col-md-8">
                        @Html.TextBoxFor(m => m.Header.txtField2, htmlAttributes: new { @class = "form-control" })
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class="block">
        <div class="block-content controls">
            <div class="col-md-12">
                <div class="row-form">
                    <table id="tbDataTable" class="table table-bordered">
                        <thead>
                            <tr>
                                <td>
                                    @Html.LabelFor(m => m.Detail.FirstOrDefault().intLine)
                                </td>
                                <td>
                                    @Html.LabelFor(m => m.Detail.FirstOrDefault().txtDetail1)
                                </td>
                            </tr>
                        </thead>
                        <tbody>
                            @if (Model.Detail != null)
                            {
                                foreach (var item in Model.Detail)
                                {
                                    <tr>
                                        <td>
                                            @Html.DisplayFor(m => item.intLine)
                                        </td>
                                        <td>
                                            @Html.DisplayFor(m => item.txtDetail1)
                                        </td>
                                    </tr>
                                }
                            }
                    </table>
                </div>
                <div class="row-form">
                    <div class="col-md-2">
                        <button type="button" id="btnAddDetail" class="btn btn-info">Add Detail</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

我的索引有 javascript：

<script>
    $("#btnAddDetail").click(function () {
        debugger;
        var model = @Html.Raw(Json.Encode(Model));
        $.ajax({
            type: 'POST',
            contentType: 'application/json',
            url: '/Sample/ViewDetail',
            //data:  $('#form1').serialize(),
            data: JSON.stringify(model),
            contentType: "application/json; charset=utf-8",
            datatype: 'JSON',
            success: function (data) {
                // on success, post returned data in fancybox
                $.fancybox.open(data,
                    {
                        closeClickOutside: false,
                        iframe: {
                            preload: true
                        }
                    }
                    ); // fancybox
            },
            error: function (data) {
                console.log(data);
            }
        });
    });
</script>

这是我的部分观点：

<div class="col-md-6">
    <div class="row-form">
        <div class="col-md-4">
            @Html.LabelFor(m => m.OneDetai.intLine, htmlAttributes: new { @class = "control-label" })
        </div>
        <div class="col-md-8">
            @Html.TextBoxFor(m => m.OneDetai.intLine, htmlAttributes: new { @class = "form-control" })
        </div>
    </div>
    <div class="row-form">
        <div class="col-md-4">
            @Html.LabelFor(m => m.OneDetai.txtDetail1, htmlAttributes: new { @class = "control-label" })
        </div>
        <div class="col-md-8">
            @Html.TextBoxFor(m => m.OneDetai.txtDetail1, htmlAttributes: new { @class = "form-control" })
        </div>
    </div>
</div>
<div class="row-form">
    <div class="col-md-2">
        <button type="submit" id="btnAddLine" class="btn btn-info">Add Detail</button>
    </div>
</div>

这是我的控制器

public ActionResult Index()
    {
        return View(new SampleViewModels());
    }

    [HttpPost]
    public ActionResult ViewDetail(SampleViewModels obj)
    {
        return PartialView("AddDetail", obj);
    }

    public ActionResult AddDetail(SampleViewModels obj)
    {
        obj.Detail.Add(obj.OneDetail);

        return View("Index", obj);
    }

这个想法是：为了添加新的细节，我必须点击 btnAddDetail。它会打开弹出窗口。我必须填写弹出窗口并单击子表单中的 btnAddLine。并且数据将出现在数据表中。

问题是，如何使用 ajax 将父模型发送到子模型？ 当索引中的按钮 btnAddDetail 触发时，我尝试以 JSON 格式发送我的模型，但它总是发送我的模型的第一个状态。如果我在字段 1 和字段 2 中设置值，然后按 btnAddDetail，我的 ViewDetail 控制器总是得到空模型。字段 1 = null，字段 2 = null。

我已经尝试使用 data: $('#form1').serialize() 来发送我的模型，它不会发送我的详细模型。它只是发送我的 Header 模型。

有什么方法可以将我的模型发送到局部视图，然后将其发送回我的父视图？

请帮帮我，我还没有找到任何解决方案。

谢谢。

Answer 1

var model = @Html.Raw(Json.Encode(Model));

不会工作，你总是会得到 null...

如果你必须做 ajax 帖子，你应该这样做来获取值

对于文本框值，给它们 id 并设置你的 json

      var model = { 
                    "Header": {
                    "intID": 0,
                     "txtField1": $("#id-textField1").val(),
                     "txtField2": $("#id-textField2").val(),
                    },
                     "Detail": [],
                     "OneDetai": {
                                   "intID": 0,
                                    "intLine": 0,
                                    "txtDetail1": null
                                  }
                    }