测试AJAX第一次在WebMatrix（C＃）中，服务器返回内部错误500

Question

这应该是一个容易解决的问题，在此之前，我从未碰过AJAX。

我第一次无法测试AJAX。

在我看来，一切都是正确的，根据在线示例，这应该可行，但显然并非如此。

（请记住，这只是一个测试，看看是否可以使它正常工作，我知道使用服务器端进行这种简单的计算是没有意义的）。

我不会在标头中包含html，因为它在不同的布局页面中并已呈现，但是我向您保证了必要文件的正确路径。

无论如何，我所设置的是通过这种方式设置的，以便将来需要时实现和扩展（当前使用这4个不同的文件）：

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/>

第一个JavaScript文件（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);
    });
});

第二个JavaScript文件（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;
        }
    });
}

最后，服务器端的cshtml文件（TestAjax.cshtml）：

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

    int resultNumb = numb1 * numb2;

    return(resultNumb);
}

如果有帮助（我认为可能），服务器将响应：

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

我可以看到值将其放入查询字符串中，但是...

它在第二个JavaScript文件（xmlhttp.send（）;）的第15行上出错，但是对我而言，这意味着它不喜欢所提供的某些数据（或者该行的语法不好，我对此表示怀疑） ，但是我是AJAX的新手，所以...）。 无论如何，这应该是我所忽略的简单事物，但我找不到它。

谢谢你的帮助！ 我真的很想开始向我的程序员的工具箱中添加一些AJAX。

Answer 1

我认为您不能像这样直接访问View。

我过去所做的就是向项目中添加一个Ajax控制器，向Views / Shared文件夹中添加一个空白_AjaxLayout.cshtml，在Views / Ajax文件夹中，将_Layout_Start.cshtml设置为“〜/视图/共享/_AjaxLayout.cshtml”文件。

在您的控制器中，添加一个动作（“ TestAjax”），然后可以将您的TestAjax.cshtml文件放入Views / Ajax中。

要访问它，URL为/ Ajax / TestAjax？numb1 = 4＆numb2 = 2

如果可以调试它，请直接在浏览器中命中Ajax URL，并确保在将其集成到页面之前确保获得期望的结果是一个好主意。

Answer 2

好吧，我最终要做的主要是两件事。

1. 解析cshtml文件（TestAjax.cshtml）中的两个变量（广播无效）

和

2 return（resultNumb）显然对AJAX不正确。 我必须将其替换为以下内容：@：@resultNumb

我很乐意接受任何显示以下任何内容的答案：

1. 如何仅使用AJAX发送单个值或行，而不发送整个页面（如果可能）

2. 如何在AJAX返回中对多行进行分组（例如“ @：”之后的内容）

3. “ @：”的含义几乎全部。