javascript - 如何在 MVC 中显示带有详细行的表格
问题描述
我正在尝试在 MVC 视图中从 sql 数据库中查看表上的数据。该表应包含（项目）的行和（子项目）的子行首先，我从控制器读取表记录作为 json 并将结果发送到视图中的数据表。项目已出现在表中，但子项目未出现。谁能帮我！
我的控制器代码：
using Budget_system.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Data.SqlClient;
using System.Data;
using Sitecore.FakeDb;
using System.IO;
using Newtonsoft.Json;
using System.Web.Helpers;
namespace Budget_system.Controllers
{
public class BudgetSystemController : Controller
{
private List<ItemsData> Data = new List<ItemsData>();
private List<ItemsData> Data1 = new List<ItemsData>();
public object SubItems { get; private set; }
public ActionResult Items()
{
SqlConnection cn = new SqlConnection();
SqlCommand cmd = new SqlCommand();
cn.ConnectionString = "Data Source=.;Initial Catalog=Budget System;Integrated Security=SSPI";
cmd.Connection = cn;
cmd.Connection.Open();
cmd.CommandText = "select ID,_Name,_Department,_Type,_OpenAmmount from Items where _year='" + 2019 + "'";
SqlDataReader dr = cmd.ExecuteReader();
while (dr.Read())
{
Data.Add(new ItemsData() { ID = int.Parse(dr[0].ToString()), Name = dr[1].ToString(), Department = dr[2].ToString(), Type = (dr[3].ToString()), ItemOpenAmmount = float.Parse((dr[4].ToString())) });
}
return View("Items",Data);
}
public ActionResult Create(ItemsData itemsData)
{
using (SqlConnection connection = new SqlConnection("data source =.; database = Budget System; integrated security = SSPI; "))
{
try
{
connection.Open();
SqlCommand command = new SqlCommand("select ID,_Name,_Department,_Type,_OpenAmmount from Items where YEAR='" + DateTime.Now.Year.ToString() + "' ", connection);
int numOfRows = command.ExecuteNonQuery();
command = new SqlCommand("SELECT TOP 1 * FROM Items ORDER BY ID DESC", connection);
int ID = (int)command.ExecuteScalar();
if (itemsData.SubItems != null)
{
for (int i = 0; i < itemsData.OpenAmmount.Count; i++)
{
if (itemsData.OpenAmmount[i].ToString() != "" && itemsData.SubItems[i] != "")
{
command = new SqlCommand("insert into SubItems values('" + ID + "','" + itemsData.SubItems[i] + "','" + itemsData.OpenAmmount[i].ToString() + "');", connection);
command.ExecuteNonQuery();
}
}
}
}
catch (Exception ex)
{
ViewData["Error"] = ex.Message;
}
finally
{
connection.Close();
}
}
return View("Create");
}
public ActionResult collectData(ItemsData itemsData)
{
using (SqlConnection connection = new SqlConnection("data source =.; database = Budget System; integrated security = SSPI; "))
{
try
{
connection.Open();
SqlCommand command = new SqlCommand("insert into Items values('" + itemsData.Name + "','" + itemsData.Year + "','" + itemsData.Department + "','" + itemsData.Divistions + "','" + itemsData.Type + "','" + itemsData.ItemOpenAmmount + "') ", connection);
command.ExecuteNonQuery();
command = new SqlCommand("SELECT TOP 1 * FROM Items ORDER BY ID DESC", connection);
int ID = (int)command.ExecuteScalar();
if (itemsData.SubItems!= null)
{
for (int i=0;i<itemsData.OpenAmmount.Count;i++)
{
if (itemsData.OpenAmmount[i].ToString() != ""&&itemsData.SubItems[i]!="")
{
command = new SqlCommand("insert into SubItems values('" + ID + "','"+itemsData.SubItems[i]+"','" + itemsData.OpenAmmount[i].ToString() + "');", connection);
command.ExecuteNonQuery();
}
}
}
}
catch (Exception ex)
{
ViewData["Error"] = ex.Message;
}
finally
{
connection.Close();
}
}
return View("Create");
}
public JsonResult GetDetail(int id)
{
SqlConnection cn = new SqlConnection();
SqlCommand cmd = new SqlCommand();
cn.ConnectionString = "Data Source=.;Initial Catalog=Budget System;Integrated Security=SSPI";
cmd.Connection = cn;
cmd.Connection.Open();
cmd.CommandText = "select _subID,_Name,_OpenAmmount from SubItems where _subID='" + id + "'";
SqlDataReader dr = cmd.ExecuteReader();
while (dr.Read())
{
Data1.Add(new ItemsData() { subItemID = int.Parse(dr[0].ToString()), SubItems = ((List<string>)dr[1]), OpenAmmount = (List<float>)dr[2] });
}
return Json((from c in Data1
where c.ID == id
select c.Name).First(), JsonRequestBehavior.AllowGet);
}
}
}
我的模型课：
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace Budget_system.Models
{
public class ItemsData
{
public int ID { get; set; }
public string Name { get; set; }
public List<string> SubItems { get; set; }
public int subItemID { get; set; }
public string Year { get; set; }
public string Department { get; set; }
public string Divistions { get; set; }
public string Type { get; set; }
public List<float> OpenAmmount { get; set; }
public float ItemOpenAmmount { get; set; }
}
}
我的观点：
@model IEnumerable<Budget_system.Models.ItemsData>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="~/Scripts/jquery-3.4.1.js"></script>
@{
ViewBag.Title = "Items";
Layout = "~/Views/Shared/_LayoutPage1.cshtml";
}
<script>
var colCount;
$(document).ready(function () {
colCount = $(".tbl tr:first").children().length;
$("tr:odd").css("background-color", "#f0f3f4");
$(".pm").click(function () {
if ($(this).hasClass("plus")) {
$(this).removeClass("plus").addClass("minus");
if (!$(this).closest("tr").next().hasClass("detail")) {
getDetail($(this).closest("tr"));
}
else
$(this).closest("tr").next().show();
}
else {
if ($(this).closest("tr").next().hasClass("detail"))
$(this).closest("tr").next().hide();
$(this).removeClass("minus").addClass("plus");
}
});
});
function getDetail(row) {
var rowNew = $("<tr class='detail'><td colspan=" + colCount + "></td></tr>");
$.ajax({
timeout: 30000,
data: "id=" + row.find("td:eq(1)").html(),
url: '@Url.Action("GetDetail")',
dataType: "json",
contentType: "application/json; charset=utf-8",
success: function (result) {
rowNew.find("td").append("<b>Address </b>: " + result.ID);
rowNew.find("td").append("<b>Sex </b>: " + result.ID);
rowNew.find("td").append("<b>Nationality </b>: " + result.ID);
row.after(rowNew);
},
error: function (a, b, c) {
debugger;
}
});
}
</script>
<h2>Index</h2>
<style>
.tbl {
border: 1px solid gray;
}
.tbl td {
padding: 5px 10px 5px 10px;
}
.tbl th {
padding: 5px 10px 5px 10px;
background-color: Gray;
color: White
}
.pm {
cursor: pointer;
}
.plus {
background: url('http://www.quimicasuiza.com/images/extras/plus-minus.gif') 0 -16px;
display: block;
width: 16px;
height: 16px;
}
.minus {
background: url('http://www.quimicasuiza.com/images/extras/plus-minus.gif') 0 0;
display: block;
width: 16px;
height: 16px;
}
.detail {
background-color: #d4d0d8;
padding: 7px;
}
</style>
<table class="tbl" cellpadding="0" cellspacing="0">
<tr><th> </th><th>Id</th><th>Name</th><th>Department</th></tr>
@foreach (var row in Model)
{
<tr><td><span class="pm plus"></span></td><td>@row.ID</td><td>@row.Name</td><td>@row.Department</td></tr>
}
</table>
解决方案
推荐阅读
- javascript - 未捕获的类型错误：$.browser 未定义
- apache - secrule modsecurity 随机数和地址 ip post 方法
- javascript - 如何在某个类 (JS) 中操作元素的样式
- file - 是否有简短的语法可以在提交消息中添加指向当前存储库中文件的链接？
- dataframe - 火花数据框
- python - 如何组合来自两个单独的 for 语句的打印数据？
- python - 如何使用 Seaborn 在 x 轴上绘制月份和在 y 轴上绘制降雨量？
- python - Django 数据库重复
- laravel - Eloquent (Laravel) 作为独立的 - 1215 无法添加外键约束
- react-native - 在未安装的组件上反应状态更新