如何從父母送模型孩子

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