在带有 WebGrid 列的 ASP.NET 视图中使用 javascript 变量
Using javascript variable in ASP.NET View with WebGrid Column
我试图在我的 WebGrid 列中显示一个 javascript 变量。使用 javascript 是必须的,因为我正在寻找相应的客户端日期时间。
我在 cshtml 视图头中创建了我的 webgrid
WebGrid grid = new WebGrid(Model,...)
然后在开始表单中,我尝试按如下方式填充它(使用日期操作):-
grid.Table(
tableStyle: "table table-bordered",
columns: grid.Columns(
grid.Column("FirstCol", "First Column"),
grid.Column("SometTime", "Local Time",
format: @<text>
@{
var sDate="";
<script>
var isoDate = '@item.SometTime.ToString("o")';
var date = new Date(isoDate);
if(isNaN(date.getTime()))
date = new Date(isoDate.slice(0, isoDate.lastIndexOf(".")).replace(/-/g, '/'));
sDate = date.toLocaleString('en-US', { hour12: true })
</script>
@sDate <<<< I like this sDate to be part of column data
}
</text>),
grid.Column("LastCol", "Last Column")
....
...
sDate 是我希望在所有行的特定列中显示的内容。我使用 chrome 调试器确认 sDate 中的值是正确的,我得到了我想要显示的内容。但我正在努力展示价值。上面是空的。我还尝试了以下方法:-
grid.Table(
tableStyle: "table table-bordered",
columns: grid.Columns(
grid.Column("FirstCol", "First Column"),
grid.Column("SometTime", "Local Time",
format: @<text>
@{
var cDate="";
<script>
var sDate="";
var isoDate = '@item.SometTime.ToString("o")';
var date = new Date(isoDate);
if(isNaN(date.getTime()))
date = new Date(isoDate.slice(0, isoDate.lastIndexOf(".")).replace(/-/g, '/'));
sDate = date.toLocaleString('en-US', { hour12: true })
@cDate = sDate;
</script>
@cDate <<<< I like this sDate to be part of column data
}
</text>),
grid.Column("LastCol", "Last Column")
那也没有用。我做错了什么?实现相同目标的正确且简单的方法是什么?
啊..最后我自己做了,方法很简单,方法是让服务器端数据填充 webgrid,然后在设置所有数据且页面准备就绪后,在 onready 事件页面上的脚本下,我调用了jquery 迭代 table 并进行 javascript 操作。所以我的网络网格是
grid.Table(
tableStyle: "table table-bordered",
columns: grid.Columns(
grid.Column("FirstCol", "First Column"),
grid.Column("SometTime", "Local Time"),
grid.Column("LastCol", "Last Column")
....
...
然后页面末尾的脚本就像
<script>
jQuery(document).ready(function () {
$("td").each(function (index, el) {
if (this.cellIndex == 1) {
var sDate = $(el).html();
var date = new Date(sDate)
if(isNaN(date.getTime()))
date = new Date(isoDate.slice(0, sDate.lastIndexOf(".")).replace(/-/g, '/'));
$(el).html(date.toLocaleString('en-US', { hour12: true }));
}
});
});
我试图在我的 WebGrid 列中显示一个 javascript 变量。使用 javascript 是必须的,因为我正在寻找相应的客户端日期时间。 我在 cshtml 视图头中创建了我的 webgrid
WebGrid grid = new WebGrid(Model,...)
然后在开始表单中,我尝试按如下方式填充它(使用日期操作):-
grid.Table(
tableStyle: "table table-bordered",
columns: grid.Columns(
grid.Column("FirstCol", "First Column"),
grid.Column("SometTime", "Local Time",
format: @<text>
@{
var sDate="";
<script>
var isoDate = '@item.SometTime.ToString("o")';
var date = new Date(isoDate);
if(isNaN(date.getTime()))
date = new Date(isoDate.slice(0, isoDate.lastIndexOf(".")).replace(/-/g, '/'));
sDate = date.toLocaleString('en-US', { hour12: true })
</script>
@sDate <<<< I like this sDate to be part of column data
}
</text>),
grid.Column("LastCol", "Last Column")
....
...
sDate 是我希望在所有行的特定列中显示的内容。我使用 chrome 调试器确认 sDate 中的值是正确的,我得到了我想要显示的内容。但我正在努力展示价值。上面是空的。我还尝试了以下方法:-
grid.Table(
tableStyle: "table table-bordered",
columns: grid.Columns(
grid.Column("FirstCol", "First Column"),
grid.Column("SometTime", "Local Time",
format: @<text>
@{
var cDate="";
<script>
var sDate="";
var isoDate = '@item.SometTime.ToString("o")';
var date = new Date(isoDate);
if(isNaN(date.getTime()))
date = new Date(isoDate.slice(0, isoDate.lastIndexOf(".")).replace(/-/g, '/'));
sDate = date.toLocaleString('en-US', { hour12: true })
@cDate = sDate;
</script>
@cDate <<<< I like this sDate to be part of column data
}
</text>),
grid.Column("LastCol", "Last Column")
那也没有用。我做错了什么?实现相同目标的正确且简单的方法是什么?
啊..最后我自己做了,方法很简单,方法是让服务器端数据填充 webgrid,然后在设置所有数据且页面准备就绪后,在 onready 事件页面上的脚本下,我调用了jquery 迭代 table 并进行 javascript 操作。所以我的网络网格是
grid.Table(
tableStyle: "table table-bordered",
columns: grid.Columns(
grid.Column("FirstCol", "First Column"),
grid.Column("SometTime", "Local Time"),
grid.Column("LastCol", "Last Column")
....
...
然后页面末尾的脚本就像
<script>
jQuery(document).ready(function () {
$("td").each(function (index, el) {
if (this.cellIndex == 1) {
var sDate = $(el).html();
var date = new Date(sDate)
if(isNaN(date.getTime()))
date = new Date(isoDate.slice(0, sDate.lastIndexOf(".")).replace(/-/g, '/'));
$(el).html(date.toLocaleString('en-US', { hour12: true }));
}
});
});