在带有 WebGrid 列的 ASP.NET 视图中使用 javascript 变量

Question

我试图在我的 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")

那也没有用。我做错了什么？实现相同目标的正确且简单的方法是什么？

Answer 1

啊..最后我自己做了，方法很简单，方法是让服务器端数据填充 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 列的 ASP.NET 视图中使用 javascript 变量

Using javascript variable in ASP.NET View with WebGrid Column

javascript

razor

webgrid