在ASP.NET视图中使用带有WebGrid列的javascript变量 [英] Using javascript variable in ASP.NET View with WebGrid Column

问题描述

我正在尝试在我的WebGrid列中显示一个javascript变量。因为我找到相应的客户端日期时间，所以必须使用javascript。
我在cshtml视图头创建了我的webgrid

I am trying to display a javascript variable in my WebGrid column. Use of javascript is must as I am finding the corresponding client side date-time. I created my webgrid in cshtml view head

WebGrid grid = new WebGrid(Model,...)

然后在开始表单中我尝试填充它（使用日期操作），如下所示： -

Then inside begin form I try populate it (with date manupulation) as follows:-

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中的值是正确的，我得到了我想要显示的内容。但我正在努力展示价值。上面是空的。我也试过以下： -

The sDate is what I like to show in that particular column for all rows. I confirmed using chrome debugger that the value in sDate is correct and I got it what I like to display. But I am struggling to display the value. It is empty for above. I also tried the below:-

        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")

这也没效果。我做错了什么？什么是正确而简单的方法来实现同样的目标？

That also didn't worked. What I am doing wrong? What is correct and simple way to achieve the same?

推荐答案

啊......最后我自己做了，方法很简单让所有数据设置好并且页面准备就绪时，让webGrid用服务器端数据填充webGrid，然后在onready上的脚本页面上，我调用jquery来迭代表并执行javascript manupulation。所以我的webgrid是

Ah..Finally I did it own, The approach is simple by letting fill the webgrid with the server side data and then under script on page on onready event when all data is set and page is ready, i called the jquery to iterate the table and do the javascript manupulation. So my webgrid is

grid.Table(
tableStyle: "table table-bordered",
columns: grid.Columns(
    grid.Column("FirstCol", "First Column"),            
    grid.Column("SometTime", "Local Time"),
    grid.Column("LastCol", "Last Column")
    ....
    ...

然后页面末尾的脚本就像

Then the script at end of page is like

<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 }));
        }
    });
});

这篇关于在ASP.NET视图中使用带有WebGrid列的javascript变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！