Question

This should be an easy one to solve, I’ve just never messed with AJAX before…

I am having trouble testing AJAX for the first time.

It looks to me like everything is right, and according to online examples, this should work, but apparently it is not so.

(Keep in mind this is just a test to see if I can get this to work, I know using server-side for this simple of a computation is nonsensical).

I am not going to include the html for the header, as it is in a different layout page and rendered, but I assure you the correct paths to the necessary files are there.

Anyway, what I have setup is setup this way for future implementation and growth if needed (currently using these 4 different files):

The HTML (default.cshtml):

    ///Simple AJAX test to multiply to user set numbers on server side
    ///and return the result.

    <h1>Welcome to Us</h1> 

<p>
Lorem Ipsum Porem Lorem Ipsum Porem 
</p>
<p>
    Choose a number from the first list,
    then a number from the second list
    and they will be multiplied together
    using AJAX on the server side, then
    updated on the page, all without having
    to resubmit the form or reload the page!
</p>
<button id="btn1" name="btn1">1</button><button id="btn2" name="btn2">2</button><button id="btn3" name="btn3">3</button><button id="btn4" name="btn4">4</button><button id="btn5" name="btn5">5</button><br/>
<span>First Number:&nbsp;</span><span id="firstNumber" style="height: 20px; width: 20px; margin-bottom: 10px; color: #f00;"></span><br/><br/>
<button id="2btn1" name="2btn1">1</button><button id="2btn2" name="2btn2">2</button><button id="2btn3" name="2btn3">3</button><button id="2btn4" name="2btn4">4</button><button id="2btn5" name="2btn5">5</button><br/>
<span>Second Number:&nbsp;</span><span id="secondNumber" style="height: 20px; width: 20px; margin-bottom: 10px; color: #f00;"></span><br/><br/>
<button id="Compute" name="Compute">Compute</button><br/><br/>
<span>Result:&nbsp;</span><span id="result" style="height: 20px; width: 20px; margin-bottom: 10px; color: #2ba03a;"></span><br/><br/>

The first JavaScript file (Main.js):

$(document).ready(function () {

    /////////FIRST NUMBER/////////////
    $("#btn1").click(function () {
        $("#firstNumber").html("1");
    });
    $("#btn2").click(function () {
        $("#firstNumber").html("2");
    });
    $("#btn3").click(function () {
        $("#firstNumber").html("3");
    });
    $("#btn4").click(function () {
        $("#firstNumber").html("4");
    });
    $("#btn5").click(function () {
        $("#firstNumber").html("5");
    });

    /////////SECOND NUMBER/////////////
    $("#2btn1").click(function () {
        $("#secondNumber").html("1");
    });
    $("#2btn2").click(function () {
        $("#secondNumber").html("2");
    });
    $("#2btn3").click(function () {
        $("#secondNumber").html("3");
    });
    $("#2btn4").click(function () {
        $("#secondNumber").html("4");
    });
    $("#2btn5").click(function () {
        $("#secondNumber").html("5");
    });

    $("#Compute").click(function () {
        var num1 = $("#firstNumber").text();
        var num2 = $("#secondNumber").text();

        compute(num1, num2);
    });
});

The Second JavaScript file (TestAjax.js):

var xmlhttp;
function loadXMLDoc (url, cfunc)
{
    if (window.XMLHttpRequest)
    {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
    }
    else
    {// code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }

    xmlhttp.onreadystatechange = cfunc;
    xmlhttp.open("GET", url, true);
    xmlhttp.send();
}
function compute(number1, number2)
{
    loadXMLDoc("/TestAjax.cshtml?numb1=" + number1 + "&numb2=" + number2, function () {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            document.getElementById("result").innerHTML = xmlhttp.responseText;
        }
    });
}

And finally, the cshtml file on the server side (TestAjax.cshtml):

@{
    int numb1 = Request["numb1"];
    int numb2 = Request["numb2"];

    int resultNumb = numb1 * numb2;

    return(resultNumb);
}

If it helps any (I think it might), the server responds with:

GET http://localhost:14950/TestAjax.cshtml?numb1=4&numb2=2 500 (Internal Server Error) 

I can see that the values make it into the query string here but…

It errors on line 15 of the second JavaScript file (xmlhttp.send();), but all that means to me is that it didn’t like some of the data it was given (or that line’s syntax is bad, which I doubt, but I am new to AJAX, so…). Anyway, should be something simple I am overlooking, but I can’t find what it is.

Thanks for any help! I’d really like to start adding some AJAX to my programmer’s toolbox.

Answer 1

I don’t think you can access a View directly like that.

What I’ve done in the past is add an Ajax controller to the project, a blank _AjaxLayout.cshtml to the Views/Shared folder, and in the Views/Ajax folder, a _View_Start.cshtml that sets the Layout to the “~/Views/Shared/_AjaxLayout.cshtml” file.

In your controller, you add an action (“TestAjax”) and then you can put your TestAjax.cshtml file in Views/Ajax.

To access it, the URL would be /Ajax/TestAjax?numb1=4&numb2=2

It’s a good idea to directly hit your Ajax URL in the browser if you can to debug it and make sure you are getting the results you are expecting before trying to integrate it into the page.