如何从父母送模型孩子

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：

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

我试过数据：$（“＃Form1的”）序列化（），送我的模型，它不会把我的详细模型。它只是发送我的头模型。

有什么办法送我的模型局部视图，并发送回我父母的看法？

请帮助我，我还没有找到任何解决办法呢。

谢谢。

Answer 1

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

将无法​​正常工作，你总是会得到空...

如果你必须做出阿贾克斯后，你应该这样做，以获取值

的文本框的值给他们的ID和设置您的json

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