Question

显示父实体（DropDownFor / ListBoxFor）及其子（razor foreach）的技术方法是什么？

enter image description here

我应该使用内部父母和子女的剃刀代码创建一个Index.cshtml吗？

只是旁注：我正在使用带有ViewModel的EF，并且在检索客户时孩子们并不急于加载。我在选择客户时明确加载订单。

我找不到任何关于正确方法的教程或信息似乎没有人用Razor做这件事？

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

asp.net mvc中父子关系视图的一般方法

1 个答案: