Tuesday, 27 March 2018

MVC - json - convert /Date(1262322000000)/ to short date string

watch this example on You Tube

 json - convert /Date(1262322000000)/ to short date string
Convert Json DateFormat to simple date format
Convert ISO Date to short date string
Pass and convert date from controller to view (jSon)

1. Stored Procedure
USE [Company]
GO
/****** Object:  StoredProcedure [dbo].[Users_SelectAll]    Script Date: 2018-03-27 1:55:03 PM ******/
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO

ALTER PROCEDURE [dbo].[Users_SelectAll]
AS
BEGIN
    -- SET NOCOUNT ON added to prevent extra result sets from
    -- interfering with SELECT statements.
    SET NOCOUNT ON;

    SELECT * FROM Users
END


2. Controller

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using WebApplication2.Models;

namespace WebApplication2.Controllers
{
    public class HomeController : Controller
    {
        CompanyEntities db = new CompanyEntities();
        public ActionResult Index()
        {
            return View();
        }

        public ActionResult About()
        {
            ViewBag.Message = "Your application description page.";

            return View();
        }

        public ActionResult Contact()
        {
            ViewBag.Message = "Your contact page.";

            return View();
        }

        public JsonResult GetCustomers()
        {
            IEnumerable<Users_SelectAll_Result> model = db.Users_SelectAll().ToList();
            return Json(model);
        }
    }
}

3. View

<div>
    <table id="CustomerTable"></table>
</div>
@section Scripts{
    <script type="text/javascript">
        $(document).ready(function () {
            LoadCustomers();
        });
        function LoadCustomers() {
            var cust = {};
            cust.url = '@Url.Action("GetCustomers", "Home")';
            cust.type = "POST";
            cust.dataType = "json";
            cust.contentType = "application/json";
            cust.success = function (Customers) {
                if (Customers.length > 0) {
                    $('#CustomerTable').append('<tr><th>Customer First Name</th><th>Start Date</th></tr>')
                    $.each(Customers, function (i, Customer) {
                        var dt = new Date(parseInt(Customer.StartDate.replace('/Date(', '')))
                        var dtFinal = AddLeadingZeros(dt.getFullYear(), 4) + '/' +
                            AddLeadingZeros(dt.getMonth() + 1, 2) + '/' +
                            AddLeadingZeros(dt.getDate(), 2)
                        $('#CustomerTable').append('<tr><td>' + Customer.FirstName +
                            '</td><td>' + dtFinal + '</td></tr>')
                    });
                }
            };
            function AddLeadingZeros(number, size) {
                var s = "0000" + number;
                return s.substr(s.length - size);
            }
            $.ajax(cust);
        }
    </script>   
}

1 comment: