Hi friends.
I follow this exmple: Bind Nested Table with Expand Collapse using ADO.Net in ASP.Net Core MVC
Please help me with the following issue: I want to run the second query after click on plus image and fill with the Orders details, because my table contains a lot of data and I would like to load only on clicked plus image.
$("body").on("click", "img[src*='plus.png']
public class Customer
{
public string CustomerID { get; set; }
public string CompanyName { get; set; }
public string City { get; set; }
public List<Order> Orders { get; set; }
}
public class Order
{
public int OrderID { get; set; }
public int CustomerID { get; set; }
public DateTime OrderDate { get; set; }
public DateTime RequiredDate { get; set; }
public string ItemName { get; set; }
public int QTY { get; set; }
}
public ActionResult Index()
{
List<Customer> customers = new List<Customer>();
string conString = @"Server=.\SQL2014;DataBase=Northwind;UID=sa;PWD=pass@123";
using (SqlConnection con = new SqlConnection(conString))
{
string query = "SELECT TOP 10 CustomerID,CompanyName,City FROM Customers";
using (SqlCommand cmd = new SqlCommand(query, con))
{
con.Open();
SqlDataReader sdr = cmd.ExecuteReader();
while (sdr.Read())
{
Customer customer = new Customer();
customer.CustomerID = sdr["CustomerID"].ToString();
customer.CompanyName = sdr["CompanyName"].ToString();
customers.Add(customer);
}
}
con.Close();
}
return View(customers);
}
public JsonResult GetOrderList(int id)
{
List<Order> orders = new List<Order>();
string conString = @"Server =.\SQL2014; DataBase = Northwind; UID = sa; PWD = pass@123";
using (SqlConnection con1 = new SqlConnection(conString))
{
string query1 = "SELECT TOP 5 OrderID, OrderDate FROM Orders WHERE CustomerID = @id";
using (SqlCommand cmd1 = new SqlCommand(query1, con1))
{
con1.Open();
SqlDataReader sdr = cmd1.ExecuteReader();
cmd1.Parameters.AddWithValue("@id", sdr["CustomerID"]);
SqlDataReader sdr1 = cmd1.ExecuteReader();
while (sdr1.Read())
{
Order order = new Order();
order.OrderID = Convert.ToInt32(sdr1["OrderID"]);
order.OrderDate = Convert.ToDateTime(sdr1["OrderDate"]);
orders.Add(order);
}
con1.Close();
}
}
return Json(orders, JsonRequestBehavior.AllowGet);
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
<table cellpadding="0" cellspacing="0" class="Grid">
<tr>
<th></th>
<th>CustomerID</th>
<th>Company Name</th>
</tr>
@foreach (Customer customer in Model)
{
<tr @customer.CustomerID>
<td>
<img src="~/Images/plus.png" />
<div style="display:none">
<table cellpadding="0" cellspacing="0" class="ChildGrid">
<tr>
<th>OrderID</th>
<th>OrderDate</th>
</tr>
@*@foreach (var order in customer.Orders)
{
<tr>
<td>@order.OrderID</td>
<td>@order.OrderDate.Value.ToShortDateString()</td>
</tr>
}*@
</table>
</div>
</td>
<td>@customer.CustomerID</td>
<td>@customer.CompanyName</td>
</tr>
}
</table>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$("body").on("click", "img[src*='plus.png']", function () {
$(this).closest("tr").after("<tr><td></td><td colspan = '999'>" + $(this).next().html() + "</td></tr>");
$(this).attr("src", "/images/minus.png");
});
$("body").on("click", "img[src*='minus.png']", function () {
$(this).attr("src", "/images/plus.png");
$(this).closest("tr").next().remove();
});
</script>
</body>
</html>
In the script I got stuck where I have to pass CustomerID to JSON and fill child table.
Any help appreciated. Thank oyu!
