以下是一个使用ASP.NET Core的示例代码,该代码通过使用下拉列表更新表格行。
首先,在视图中添加下拉列表和表格:
名称
分类
@foreach (var item in Model.Items)
{
@item.Name
@item.Category
}
然后,在JavaScript中添加一个函数来处理下拉列表的更改并更新表格行:
function updateTable() {
var category = document.getElementById("category").value;
var url = "/Home/UpdateTable?category=" + category;
fetch(url)
.then(response => response.json())
.then(data => {
var tbody = document.querySelector("#table tbody");
tbody.innerHTML = "";
data.forEach(item => {
var row = document.createElement("tr");
var nameCell = document.createElement("td");
nameCell.textContent = item.Name;
var categoryCell = document.createElement("td");
categoryCell.textContent = item.Category;
row.appendChild(nameCell);
row.appendChild(categoryCell);
tbody.appendChild(row);
});
});
}
接下来,在控制器中添加一个方法来处理表格的更新:
public IActionResult UpdateTable(string category)
{
var items = GetItemsByCategory(category);
return Json(items);
}
private List- GetItemsByCategory(string category)
{
// 从数据库或其他数据源获取相关项
// 根据分类筛选项并返回结果
return items;
}
最后,在模型中定义项目实体类:
public class Item
{
public string Name { get; set; }
public string Category { get; set; }
}
请注意,上述代码是一个示例,您需要根据您的实际需求进行适当的更改和调整。