Question

我有一张约有20个字段的表格。我有一个ListBox，在页面加载时从模型填充Customers。一旦用户从ListBox中选择其中一个客户，我想向Controller发送所选客户，获取客户的信息，将其返回到同一视图，并使用客户填写一些字段信息。

这是我现在正在尝试的，但它可能不是最好的方式。此外，onclick会在页面加载时调用，这会导致无限循环。

查看 - CreateUser

@Html.ListBoxFor(x => x.Id,
       Model.Customers.Select(
          x => (new SelectListItem {
              Text = x.Name,
              Value = x.Value.ToString(),
              Selected = x.IsSelected})).OrderBy(x => x.Text),
       htmlAttributes new { 
           onclick = @Html.Action("GetCustomerInfo", "Customer", Model)
       })

控制器 - 客户

[ChildActionOnly]
public ActionResult GetCustomerInfo(CustomerModel Model)
{
   // populate model with customer info 
   return View("CreateUser", Model);
}

此外，如果有更好的解决方案，我很乐意听到任何想法。我试图避免加载所有客户，然后只使用Angular根据选定的客户更改文本字段，因为将有超过1,000个客户，并且最初加载所有客户都会很慢。

Answer 1

@Html.Action()是剃刀代码，在服务器上进行解析，因此在将页面发送到客户端之前调用GetCustomerInfo()。与控件的onclick事件相关联的事实是无关紧要的。无限循环是因为GetCustomerInfo返回的视图与您尝试渲染的视图相同 - 它包含相同的@Html.Action()，因此再次调用GetCustomerInfo，返回具有相同{的{视图} {1}}因此再次调用@Html.Action()等等。

您可以使用ajax使用所选客户详细信息更新DOM。

查看模型

GetCustomerInfo

控制器

public class SelectCustomerVM
{
  [Display(Name="Select customer to display details")]
  public int? CustomerID { get; set; }
  public SelectList CustomerList { get; set; }
}

public class CustomerVM
{
  public int ID { get; set; }
  public string Name { get; set; }
  // other properties of customer
}

Index.cshtml

public ActionResult Index()
{
  SelectCustomerVM model = new SelectCustomerVM();
  model.CustomerList = new SelectList(db.Customers, "ID", "Name");
  return View(model);
}

public ActionResult Details(int ID)
{
  CustomerVM model = new CustomerVM();
  // get customer from database and map properties to CustomerVM
  return PartialView(model);
}

GetCustomer.cshtml（局部视图）

@model SelectCustomerVM
@Html.LabelFor(m => m.CustomerID)
@Html.DropDownListFor(m => m.CustomerID, Model.CustomerList, "--Please select--")
<div id=customerdetails></div>

<script type="text/javascript">
  $('#CustomerID').change(function() {
    var customerID = $(this).val();
    if(customerID) {
      $.get('@Url.Action("Details", "Customer")', { ID: customerID }, function(data) {
        $('#customerdetails').html(data);
      });
    } else {
      $('#customerdetails').empty();
    }
  });
</script>

需要注意的一些最佳做法。不要用代码来污染你的视图来构造@model CustomerVM @DisplayFor(m => m.ID) @DisplayFor(m => m.Name) .... - 这是控制器的责任;并使用Unobtrusive javascript - 不要混淆内容和行为。

基于ListBox值从控制器中检索数据

1 个答案: