MVC DateTable 直接显示在页面上

最新推荐文章于 2024-08-14 17:48:46 发布

原创最新推荐文章于 2024-08-14 17:48:46 发布 · 810 阅读

1 ·

CC 4.0 BY-SA版权

本文介绍了一个基于ASP.NET MVC的应用程序页面实现数据展示、筛选及详细信息查看的功能。该页面通过表单接收地区、时间等参数进行数据查询，并支持查看详细数据，包括展示特定列的总计数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

@using System.Data;
@{
Layout = null;
}

<!DOCTYPE html>

<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
@*<script src="~/Scripts/jquery-1.8.2.min.js"></script>*@
<script src="~/Scripts/jquery-1.10.2.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<link href="~/Content/bootstrap.css" rel="stylesheet" />
<style type="text/css">
.det {
display: flex;
padding-left: 50px;
}
.det > div {
flex:1;
}

</style>
</head>
<body>
<div class="container-fluid" style="margin-top:30px">
<div class="row">
<div class="col-md-12">
<form class="form-inline" action="/MCWeb5/AppUse" role="form">
<div class="row">
<div class="col-md-3">
<input type="text" style="width:300px" class="form-control" value="@ViewBag.address" name="address" id="address" placeholder="地区 (例如：'甘肃')">
</div>
<div class="col-md-3">
<input type="text" style="width:300px" class="form-control" value="@ViewBag.starttime" name="starttime" id="starttime" placeholder="开始时间 (例如：2012-06-15 14:45)">
</div>
<div class="col-md-3">
<input type="text" style="width:300px" class="form-control" value="@ViewBag.endtime" name="endtime" id="endtime" placeholder="结束时间 (例如：2012-06-15 14:45)">
</div>
<div class="col-md-1">
查看详细：<input type="checkbox" style="width:80px" class="form-control" value="checked" checked="@ViewBag.detail" name="detail" id="detail" placeholder="结束时间 (例如：2012-06-15 14:45)">
</div>
<div class="col-md-2">
<button type="submit" class="btn btn-default">查看</button>
</div>
</div>
@*<input size="16" type="text" name="starttime" value=" @ViewBag.starttime" readonly class=" form_datetime">
<input size="16" type="text" name="endtime" value="@ViewBag.endtime" readonly class="form_datetime">*@
</form>

@Model.Rows.Count 条数据
@ViewBag.detail

<table class="table table-hover">
<tr>
@foreach (DataColumn dc in Model.Columns)
{
<th>
@dc.ColumnName

@if (dc.ColumnName.Equals("登陆次数"))
{
<span>[</span>
@Model.Compute("sum(登陆次数)", "").ToString();
<span>人次]</span>
}
</th>
}
</tr>
<tbody>

@foreach (DataRow ro in Model.Rows)
{
<tr onclick="loadDetail(this)">
@foreach (DataColumn dc1 in Model.Columns)
{

<td class="success">
@ro[dc1.ColumnName]
</td>
}
</tr>
@*<tr class="detail">
<td colspan="@Model.Columns.Count">
<div class="det">
<div>张三</div>
<div>100</div>
</div>
</td>
</tr>*@
}

<tr class="danger">
<td> 对外低管道登陆成功次数:
@ViewBag.wainum
</td>
</tr>
</tbody>
</table>

</div>

</div>

<div class="sq" style="display:none">
@ViewBag.sql
</div>

</div>

<script type="text/javascript">

$(function () {
$(".detail").hide();
});

function loadDetail(tr) {

if (!$("#detail")[0].checked && $("#address").val=="")
{
return;
}

var text = $.trim(tr.children[1].innerHTML);
var url = "/MCWeb5/AppUse/AppUseDetail";

var sfForm = document.createElement("form");
document.body.appendChild(sfForm);
createInput(sfForm, "text", "name", text);
createInput(sfForm, "text", "sql", $(".sq")[0].innerHTML.trim());
sfForm.method = "post";
sfForm.action = url;
sfForm.hidden = "true";
sfForm.submit();
}

function createInput(sfForm, type, name, value) {
var tmpInput = document.createElement("input");
tmpInput.type = type;
tmpInput.name = name;

if (value != undefined) {

if (value == "") {
tmpInput.value = "";
} else if (value.startsWith("{") && value.endsWith("}")) {
tmpInput.value = encodeURIComponent(value);
}
else {
tmpInput.value = value;
}
} else {
tmpInput.value = "";
}
sfForm.appendChild(tmpInput);
}

</script>
</body>
</html>