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

【问题标题】：Using javascript variable in ASP.NET View with WebGrid Column在带有 WebGrid 列的 ASP.NET 视图中使用 javascript 变量
【发布时间】：2015-10-17 11:52:49
【问题描述】：

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

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

【问题讨论】：

标签： javascript razor webgrid

【解决方案1】：

啊..最后我自己做到了，该方法很简单，方法是让 webgrid 填充服务器端数据，然后在设置所有数据并且页面准备好时，在 onready 事件的页面上的脚本下，我调用 jquery迭代表并执行 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 }));
        }
    });
});

【讨论】：