Load Partial Content Async

http://improve-mvc-perf-with-async-views.azurewebsites.net/async

View/Index
<script src="~/Scripts/site.js"></script>
<p>
    Below are three sections. Initially they are all computed during the request. We are moving
    the slow ones to their own actions with partial views and loading them via JavaScript asynchronously.
</p>

<div class="news">
    <h3>News (slow)</h3>
    <div class="partialContents" data-url="/AsyncPageLoading/One">
        <img src="http://www.xiconeditor.com/image/icons/loading.gif" /> Loading ...
    </div>
</div>

<div class="popular">
    <h3>Most Popular (slow)</h3>
    <div class="partialContents" data-url="/AsyncPageLoading/two">
        <img src="http://www.xiconeditor.com/image/icons/loading.gif" /> Loading ...
    </div>
</div>
--------------------------------------------

Controller

  // GET: AsyncPageLoading
        public ActionResult Index()
        {
            return View();
        }

        public ActionResult One()
        {
            Thread.Sleep(5000);
            return PartialView();
        }

        public ActionResult Two()
        {
            return PartialView();
        }
------------------
partial view

<h2>One</h2>
Hi
In our previous program we have used Microsoft date picker and we created our own user control and there we made the feature where user can select the date from the picker or user can type the date into the date picker and on the even leave we will format the date according to the format we need. if user enter an invalid date on the leave even we will show a error (validator) to show that the date entered is invalid.

Now in our new module we have used the Telerik date picker and can we do the similar where we allow the user type the date, when you check the attached video in our old date picker as soon as the user click in to the date piker control the date format ("/") get removed and only the numbers left so user can delete and retype.

Since user used to this feature and we want to do the same with the Telerik date picker can you please give me a small sample working code that I can achieve similar feature.

--------------------------
Javascript

/// <reference path="../Scripts/jquery-1.8.2-vsdoc.js" />

var site = site || {};
site.baseUrl = site.baseUrl || "";

$(document).ready(function (e) {

// locate each partial section.
// if it has a URL set, load the contents into the area.

$(".partialContents").each(function(index, item) {
var url = site.baseUrl + $(item).data("url");
if (url && url.length > 0 ) {
$(item).load(url);
}
});

// DEMO ONLY - JUST IGNORE
// Just to make the loading time obvious....
$("a.nav").click(function() {
$("body").html("");
});

});

Convert Json string to C# object

MapPolicySnapshop snap = JsonConvert.DeserializeObject<MapPolicySnapshot>(responseString);

using Newtonsoft.Json;

String To Object

public T StringToObject<T>(string json){

 return JsonConvert.DeserializeObject<T>(responseString);

}

obj

public string ObjectToString(T obj){

   return JsonConvert.DeserializeObject<T>(obj);

}

Get elements inside elementes jquary

 <div id="sortable-horizontal" style="width:100%">

            <img src="https://s-media-cache-ak0.pinimg.com/736x/88/70/72/8870729d814f13885f8dc25d9c90111e.jpg"  id="1"/>

            <img src="http://www.dailyfreepsd.com/wp-content/uploads/2013/06/Face-Expression-of-surprise-and-scare-120x120.png" id="2"/>

            <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRxW0ma1d149zo2koacBtH7YUkGQMbVid6QsdhzKjxfwGg2XjQl" id="3"/>

            <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a8/Face-kiss.svg/120px-Face-kiss.svg.png"id="4" />

            <img src="http://images.clipshrine.com/getimg/PngThumb-Sad-Face-3301.png" id="5"/>

        </div>

 function GetOrder() {
                    var liIds = $('#sortable-horizontal img').map(function (i, n) {
                        return $(n).attr('id');
                    }).get().join(',');

                    console.log(liIds);
                }

if class
                    var liIds = $('#sortable-horizontal .className').map(function (i, n) {
                        return $(n).attr('id');
                    }).get().join(',');

                    console.log(liIds);
                }