Problem with AJAX, JavaScript, ASP.Net MVC

Question

Hi, everyone!

• I'm writing Asp.Net MVC 2 site.
• I have TimeController and TimeView, CountDownHelper for render time on TimeView page.
• Also I have JavaScript that updates current time, that is used in CountDownHelper.

I need to call AJAX from this JavaScript to get current Time on server. How I can to do it? Please help me! I must it done about several hours!

Below you may see this javaScript and in its end my try to call AJAX. I have tried to write GetServerTime.html in several ways, but anyone from which don't work. (((

 //countDown.js  
function calcage(secs, num1, num2) 
{
    s = ((Math.floor(secs / num1)) % num2).toString();
    if (LeadingZero && s.length < 2)
        s = "0" + s;
    return "<b>" + s + "</b>";
}

function CountBack(secs) 
{
    if (secs < 0) 
    {
        location.reload(true);
        document.getElementById("cntdwn").innerHTML = FinishMessage;
        return;
    }

    //difference between recieve time and current client time
    diff = new Date(new Date() - clientTime);
    targetD = new Date(TargetDate);
    serverD = new Date(serverDate);
    currentServerDate = new Date(serverD.getTime() + diff.getTime());

//targetD
    leftD = new Date(targetD.getTime() - currentServerDate.getTime());

    secs = leftD.getTime() / 1000;

    DisplayStr = DisplayFormat.replace(/%%D%%/g, calcage(secs, 86400, 100000));
    DisplayStr = DisplayStr.replace(/%%H%%/g, calcage(secs, 3600, 24));
    DisplayStr = DisplayStr.replace(/%%M%%/g, calcage(secs, 60, 60));
    DisplayStr = DisplayStr.replace(/%%S%%/g, calcage(secs, 1, 60));

    document.getElementById("cntdwn").innerHTML = DisplayStr;
    if (CountActive)
        setTimeout("CountBack(" + (secs + CountStepper) + ")", SetTimeOutPeriod);
}

function putspan(backcolor, forecolor) 
{
    document.write("<span id='cntdwn' style='background-color:" + backcolor +
                "; color:" + forecolor + "'></span>");
}

if (typeof (BackColor) == "undefined")
    BackColor = "white";
if (typeof (ForeColor) == "undefined")
    ForeColor = "black";
if (typeof (TargetDate) == "undefined")
    TargetDate = "12/31/2020 5:00 AM";
if (typeof (serverDate) == "undefined")
    serverDate = "12/31/2020 5:00 AM";
if (typeof (DisplayFormat) == "undefined")
    DisplayFormat = "%%D%% Days, %%H%% Hours, %%M%% Minutes, %%S%% Seconds.";
if (typeof (CountActive) == "undefined")
    CountActive = true;
if (typeof (FinishMessage) == "undefined")
    FinishMessage = "";
if (typeof (CountStepper) != "number")
    CountStepper = -1;
if (typeof (LeadingZero) == "undefined")
    LeadingZero = true;


CountStepper = Math.ceil(CountStepper);
if (CountStepper == 0)
    CountActive = false;
var SetTimeOutPeriod = (Math.abs(CountStepper) - 1) * 1000 + 990;
putspan(BackColor, ForeColor);
var dthen = new Date(TargetDate);
var dtServ = new Date(serverDate);
var dnow = new Date();
if (CountStepper > 0)
    ddiff = new Date(dnow - dthen);
else
    ddiff = new Date(dthen - dtServ);
    //ddiff = new Date(TargetDate - serverDate);
//ddiff = new Date(dthen - dnow);
gsecs = Math.floor(ddiff.valueOf() / 1000);
CountBack(gsecs);

alert("Start");
alert(serverDate);

//AJAX CALL ???? 
//How to call async JavaScript?
//Which must be GetServerTime.html

$.get('Views/GetServerTime.html', function(data) {
    serverDate = data;
    clientTime = new Date();    
});

alert(serverDate);**

Answer 1

Normally you don't access your views directly. And the view is usually an .ASPX file.

So

$.get('Views/GetServerTime.html',...

Becomes

$.get('/GetServerTime/',...

For the Views/GetServerTime/Index.aspx view and the getserverTimeController.cs controller with a default Action of Index.

But I'm guessing that's not the only issue you have?...

Edit

Also you should probably use JSON for this. You can use the System.Web.Mvc.JsonResult to automatically send your result as JSON and jQuery will process and convert this JSON to javascript objects.

        $.get('/GetServerTime/', 
                        function (data)
                        {
                                if (data.HasError == false)
                                {
                                    $("#resultDiv").html(data.ServerTime);
                                }
                        }, "json");

Your MVC Action can look like this...

public JsonResult Index(string id)
{
    JsonResult res = new JsonResult();          
    res.JsonRequestBehavior = JsonRequestBehavior.AllowGet;

    res.Data = new { ServerTime = DateTime.Now(), HasError = false };

    return res;
}

The above is approximate since I don't have a compiler.

Answer 2

First of all, I'm not sure "GetServerTime.html" will successfully give you the current time. Are you sure its the name of the page that you want? Unless you have your Routing set to handle that URL pattern. As Kervin says below.

Also, the body of the "function(data)" method is the callback that gets called when the ajax function returns.

As for your page that returns the server date/time, you'll need to decide what format it will return: XML or JSon. Then your controller would return that.

public class DateController : Controller {
    public ActionResult CurrentDate()
    {
       var returnJson = new 
          {
              currentDate = DateTime.Now.ToString()
          }

       return Json(returnJson, JsonRequestBehavior.AllowGet);
    }
}

then your .get function would look like:

$.get('/Date' function(data) {
    theDate = data.currentDate;
});