Question

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

这是我的模特

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：

＆＃13;

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

＆＃13;

这是我的部分视图：

<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控制器总是得到空模型。 Field1 = null，Field2 = null。

我已尝试过数据：$（＆＃39;＃form1＆＃39;）。serialize（），发送我的模型，它不会发送我的详细模型。它只是发送我的Header模型。

有没有办法将我的模型发送到部分视图，并将其发送回我的父视图？

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

谢谢。

Answer 1

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

不起作用，你总是会得到空......

如果您必须发布ajax帖子，则应该这样做以获取值

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

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

如何将模型从父级发送到子级

1 个答案: