asp.net中父子關係視圖的一般方法mvc

Question

顯示父實體（DropDownFor/ListBoxFor）及其子項（剃鬚刀foreach）的技術方法是什麼？

我應該建立ONE Index.cshtml與家長和孩子裏面的剃刀代碼？

只是一個旁註：我使用EF與ViewModels，並且當檢索到客戶時，孩子們並不急於加載。我在選擇客戶時明確加載訂單。

我找不到任何教程或有關正確方法的信息，似乎沒有人用剃刀做這些事情？

Answer 1

一種方法是：在DDL的更改事件中，使用JSON加載數據。

$('#CustomerDDL').change(function (e) { 
      url = '@Url.Action("GetCustomerDetails", "Customer")'; 
      var data = { id: this.value }; 
      $.post(url, data, function (result) { 
       if (result.success) { 
        var detailsList = result.detailsList; 
        var table = "<table>"; 
        for (var i = 0; i < detailsList.length; i++) 
        { 
         table += "<tr>" + 
           "<td> detailsList[i].invoice_number + "</td>" + 
           "<td> detailsList[i].quantity + "</td>" + 
           //etc... 
           "</tr>"; 
        } 
        table += "</table>"; 
       } 
       else { 
        var table = "<table> no data </table>"; 
       } 

       $('#DivForShowDetails').html(table); 
      }); 
     }); 

而且在Customer控制器在LoadCustomerDetails行動：

public ActionResult GetCustomerDetails(int id) 
    { 
     var result = _ServiceOrRepo.LoadCustomerDetailsById(id); 
     if (result != null && result.Count() > 0) 
     { 
      List<object> detailsList = new List<object>(); 
      foreach (var item in result) 
      { 
       detailsList.Add(new 
       { 
        id = item.Id, 
        invoice_number = item.invoice_number, 
        quantity = item.quantity, 
        // etc... 
       }); 
      } 

      return Json(new { detailsList = detailsList, success = true }, JsonRequestBehavior.AllowGet); 
     } 
     else 
      return Json(new { success = false }, JsonRequestBehavior.AllowGet); 
    } 

編輯：

您可以使用另一種方式這樣。主視圖，例如Index.cshtml包含這些：

@using (Ajax.BeginForm("GetDetails", "Customer", new AjaxOptions { UpdateTargetId = "getDetailsResult" }, new { id = "customersForm" })) 
{ 
     @Html.DropDownList("Customer", ViewBag.Customers as IEnumerable<SelectListItem>, new { @onchange="CustomerChanged(this.value);" }) 

     <input type="hidden" id="hiddencustomer" name="customerId" /> 

     <noscript> 
     //this button will not shown 
     <input type="submit" value="" /> 
     </noscript>     
} 

//results will shown here after form submit. 
<div class="detailsSection" id="getDetailsResult"> 
     @Html.Partial("Selected_Customer_Details", Model) 
</div> 

<script> 
     function CustomerChanged(cId) 
     { 
      //take selected customer 
      $('#hiddencustomer').val(cId); 

      //submit form 
      $('#customersForm').submit(); 
     } 
</script> 

而且Selected_Customer_Details.cshtml局部視圖：

@model DetailsModel 
<h2>@Model.Title/h2> 
<table> 
    <tr>//your details displaying code goes here... </tr> 
<table 

而且在控制你有一個Index的行動，包括客戶名單：

public ActionResult Index() 
{ 
    ViewBag.Customers = new SelectList(_ServiceOrRepo.LoadCustomers(), "Id", "Name"); 

    return View(); 
} 

和GetDetails行動返回Selected_Customer_Details.cshtml局部視圖：

public ActionResult GetDetails(int id) 
{ 
    DetailsModel model = _ServiceOrRepo.LoadCustomerDetailsById(id); 
    return PartialView("Selected_Customer_Details", model); 
}