Friday, April 13, 2012

How to display a datetime in the client local timezone in ASP.NET MVCviews

Friday, April 13, 2012 Posted by Andre Broers , , , , 8 comments
For my website http://www.watzdprice.com I ran into a problem where I needed to show a datetime from a ViewModel in the client local timezone. The problem is that the Razor views are rendered on the server and the server doesn't know the users timezone. So we have to create a client side solution. We have to add the server side datetime as utc to the viewmodel and we need javascript to transform this datetime to the client local time zone.

We start with creating a new MVC web project in visual studio and name it MvcDateTime.

Now we add our model in the Models folder of our project (Person.cs):
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace MvcDateTime.Models
{
    public class Person
    {
        public string Name { get; set; }
        public long AppointmentDateTime { get; set; }
    }
}

As you can see the datetime is a long and represents the milliseconds from the epoch time (01-01-1970 00:00:00) in UTC timezone. We will use this function to convert our standard DateTime objects to this long value:
        private long DateTimeToJS(DateTime dt)
        {
            DateTime inutc = dt.ToUniversalTime();
            return (inutc.Ticks - 621355968000000000) / 10000;
        }

We alter our existing HomeController to display the index view with a simple list of persons:
        public ActionResult Index()
        {
            List<Person> lp = new List<Person>();
            lp.Add(new Person() { Name = "Andre", AppointmentDateTime = DateTimeToJS(DateTime.Now.AddDays(1)) });
            lp.Add(new Person() { Name = "Scott", AppointmentDateTime = DateTimeToJS(DateTime.Now.AddDays(2)) });
            lp.Add(new Person() { Name = "Tiger", AppointmentDateTime = DateTimeToJS(DateTime.Now.AddDays(3)) });

            ViewBag.Message = "Welcome to ASP.NET MVC!";

            return View(lp);
        }

Now that we have a Controller that spits up the List of persons with an appointment date we can continue with our view:
@model IEnumerable<MvcDateTime.Models.Person>

@{
    ViewBag.Title = "Home Page";
}

<script type="text/javascript">
    $(document).ready(function () {
        $(".date").each(function () {
            $(this).text((new Date(parseInt($(this).data("datetime")))).toLocaleString());
        });
    });
</script>

<table>
    <tr>
        <th>
            name
        </th>
        <th>
            appointment
        </th>
    </tr>
@foreach (var item in Model) {
    <tr>
        <td>
            @item.Name
        </td>
        <td>
            <div class="date" data-datetime="@item.AppointmentDateTime"></div>
        </td>
    </tr>
}
</table>

@{
    var grid = new WebGrid(Model);
}

@grid.GetHtml(columns: grid.Columns(
                grid.Column("name"),
                grid.Column(
                   header: "appointment",
                   style: "text-align-center",
                   format: (item) => new HtmlString("<div class='date' data-datetime='"+item.AppointmentDateTime+"'></div>")
                )
            )
)

In this view we create two grids with our list of persons. The first uses the default table to render the data and the second uses a webgrid to display the data.
We store the long datetime in a html5 data field and give all the datetime divs the class "date". In the jquery document ready function we can render this long to a datetime that is in the clients local timezone.



8 comments:

  1. đồng tâm
    game mu
    cho thuê nhà trọ
    cho thuê phòng trọ
    nhac san cuc manh
    số điện thoại tư vấn pháp luật miễn phí
    văn phòng luật
    tổng đài tư vấn pháp luật
    dịch vụ thành lập công ty trọn gói
    lý thuyết trò chơi trong kinh tế học
    đức phật và nàng audio
    hồ sơ mật dinh độc lập audio
    đừng hoang tưởng về biển lớn ebook
    chiến thắng trò chơi cuộc sống ebook
    bước nhảy lượng tử
    ngồi khóc trên cây audio
    truy tìm ký ức audio
    mặt dày tâm đen audio
    thế giới như tôi thấy ebook

    Khẳng định được đáp án, cái thứ này chắc chắn không có tại thời đại này.
    Cảm giác không sợ bị quay lén quả thật là rất tốt.
    Lưu Phong đột nhiên nhớ tới kiếp trước trong thế giới giải trí có một người bạn đồng học là Quan Hi. Nếu hắn sinh ra tại thời đại này nhất định sẽ không thể trở thành ngôi sao ca nhạc được. Thời đại này không có công nghệ cao. Quan Hi tuyệt không thể nổi tiếng được.
    Những người quá nổi bật, quá biến thái căn bản cũng khó có kết cục tốt.
    Ngay lúc này, đột nhiên Lưu Phong cảm giác được Ân Tố Tố hút sâu vào một hơi, một cỗ chất lỏng ấm nóng nhất thời phun ra ngoài.

    Lưu Phong vội vàng hỏi:" Tố Tố, có mùi gì a?"
    " Chán ghét." Ân Tố Tố thẹn thùng nói:" Đắng, tanh...... tóm lại rất khó ăn......"

    Lưu Phong thở dài một tiếng, một ngàn đàn bà quả nhiên là một ngàn loại mùi. Đời này hắn nghĩ cũng không biết rõ ràng chất lỏng kia rốt cuộc có mùi vị gì.....
    " Lão công, ngươi nói...... Cái này thật sự có làm đẹp sao?"

    Ân Tố Tố nói, hành động của nàng không cần nghi ngờ gì nữa chính là vì làm đẹp mà thôi.

    Cái đẹp của nữ nhân chính là khi yêu thì việc gì cũng có thể làm cho nam nhân của mình cả.

    Tinh dịch có thể làm đẹp, Lưu Phong cũng là từ phim khiêu dâm và tiểu thuyết sắc tình từ thời trung học có được, rốt cuộc có bao nhiêu phần chân thật thật sự không cách nào kiểm chứng.

    Bất quá Lưu Phong nhớ kỹ kiếp trước khoa học nghiên cứu cho thấy một kết luận, chất lỏng kia có thể trợ giúp nữ nhân ngừa ung thư. Nhưng phải đi từ âm đạo mà vào chứ không phải là từ miệng đi xuống.

    " Có thể ngừa ung thư." Lưu Phong lời thật nói thật. Đối với nữ nhân của mình cũng không nên nói dối.

    ReplyDelete
  2. Thanks for sharing the information. It is very useful for my future. keep sharing
    starfall | nick jr | minecraft games | barney | abcya

    ReplyDelete