Retrieving Data From Controller Based On ListBox Value - angularjs

Question

I have a form with about 20 fields. I have a ListBox that is populated with Customers from the Model when the page loads. Once the user picks one of those Customers from the ListBox, I want to post to the Controller the selected Customer, get customer's info, return it to same view, and populate some of the fields with the Customer's info.
Here is what I am trying now, but it might not be the best way. Also, the onclick gets called on page load, which causes an infinite loop.
View - 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)
})
Controller - Customer
[ChildActionOnly]
public ActionResult GetCustomerInfo(CustomerModel Model)
{
// populate model with customer info
return View("CreateUser", Model);
}
Also, if there is a better way for this solution, I would love to hear any ideas. I am trying to avoid loading all Customers and then just using Angular to change the text fields based on selected Customer, since there is going to be over 1,000 customers and it would be slow to initially load all of them.

Answer 1

#Html.Action() is razor code and is parsed on the server so GetCustomerInfo() is called before the page is sent to the client. The fact its associated with the onclick event of a control is irrelevant. The infinite loop is because the view returned by GetCustomerInfo is the same view your trying to render - it contains the same #Html.Action() so GetCustomerInfo is called again, which returns a view with the same #Html.Action() so GetCustomerInfo is called again and so on.
You can use ajax to update the DOM with the selected customers details.
View models
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
}
Controller
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);
}
Index.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>
GetCustomer.cshtml (partial view)
#model CustomerVM
#DisplayFor(m => m.ID)
#DisplayFor(m => m.Name)
....
Some best practices to note. Don't pollute your view with code to construct SelectList's - that's the responsibility of the controller; and use Unobtrusive javascript - don't mix content and behavior.