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

asynchronous call JavaScript, that is without refreshing of all page — Roman
– Roman, Commented Oct 3, 2010 at 21:50

kervin · Accepted Answer · 2010-10-03 21:58:25Z

2

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.

edited Oct 3, 2010 at 21:58

answered Oct 3, 2010 at 21:36

kervin

11.9k6 gold badges48 silver badges60 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Roman Over a year ago

Yes, which must be the page GetServerTime?

kervin Over a year ago

Hey Roman, the view folder usually maps to the controller and the view name maps to the action. The default action is usually Index, hence Index.aspx. This can all be changed easily enough.

Roman Over a year ago

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

kervin Over a year ago

Check out my latest updates to get an idea. You shouldn't call the view directly, you need to call the controller, not the view. In your particular case, you don't even need a view since you return JSON.

Roman Over a year ago

Gyes, can I write $.get(...) in JavaScript? Because I've got the error: Microsoft JScript runtime error: '$' is undefined ?

|

Bryce Fischer · Accepted Answer · 2010-10-03 21:53:01Z

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

Collectives™ on Stack Overflow

Problem with AJAX, JavaScript, ASP.Net MVC

2 Answers 2

9 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related