如何在asp.net mvc中调用简单的ajax程序

我开始在asp.NETMVC4中学习Ajax。我想基于以下场景创建一个非常简单的程序

我希望表单上有两个文本框（FirstName，LastName）和一个按钮，每当我在这些文本框中写入内容时，这些值应该使用Ajax分配给两个标签（lblFristName，lblLastName）。因此，该页面将不会刷新

如何实现上述功能？。请提供清晰/简单的代码示例，无其他网站链接，谢谢

以下是我正在尝试的代码：-

 @model MvcAppLearn.Models.Student

    @{
        ViewBag.Title = "AjaxCall";
        Layout = "~/Views/Shared/_Layout.cshtml";
    }

    <h2>AjaxCall</h2>

    @using (Html.BeginForm("AjaxCall", "Ajax", FormMethod.Post, new { id = "my-form" }))
    {

        @:FirstName @Html.EditorFor(x => x.FirstName);
        @:FirstName @Html.EditorFor(x => x.LastName);

        <input type="submit" value="Submit" />
    }

        <br />


    <div id ="result">


    </div>

    @section scripts{

    <script type="text/javascript">



        $(function () {

            $("#my-form").on("Submit", function (e) {

                //e.preventDefault();
                debugger

                $.ajax({
                    url: this.action,
                    type: this.method,
                    data: $(this).serialize(),
                    succes: function (data) {
                        $("#result").html(data);
                    },

                        error: function () {
                            alert("Oh noes");
                        }
                });
            });
        });

    </script>
        }

---

上面的代码将我带到部分视图，但我希望生活在文本框所在的页面上，并在同一页面上显示这些标签。如果有任何错误，请更正，谢谢

如果这是您的观点

@Html.TextBoxFor(r => r.textbox1, new { id = "textbox1"})
<label id="label1"></label>

---

我已经做到了，问题是我在“提交”中写“s”作为大写字母，在“成功”函数中遗漏了“s”。以下是正确的代码

<script type="text/javascript">



    $(function () {


        $("#my-form").on("submit", function (e) {
            e.preventDefault();
            //debugger
            $.ajax({
                url: this.action,
                type: this.method,
                data: $(this).serialize(),
                success: function (data) {
                    $("#result").html(data);
                },

                    error: function () {
                        alert("Oh noes");
                    }
            });
        });
    });

</script>

$（函数（）{
$（“#我的表格”）。关于（“提交”，功能（e）{
e、 预防默认值（）；
//调试器
$.ajax({
url:this.action，
类型：this.method，
数据：$（this）.serialize（），
成功：功能（数据）{
$（“#结果”）.html（数据）；
},
错误：函数（）{
警惕（“哦，不”）；
}
});
});
});

AJAX if用于调用服务器上的控制器方法。听起来您可以使用javascipt/jquery来实现这一点。你需要发布更多的细节，包括你的htmlSo什么不起作用。浏览器控制台中是否存在错误？你的方法被击中了吗？为什么要注释掉

e.preventDefault（）？是的，我已经注释掉了。页面运行成功，正在刷新页面。但是我不想使用Ajax刷新页面然后表单将提交。将其添加回，使默认操作不会触发。如果我评论或不评论，结果是相同的。在我的控制器中看到iam返回空间视图，可以吗？我不知道我陷入了什么境地。我正试图在mvc中学习ajax。所以我需要根据ajax方法的解决方案，谢谢
@Html.TextBoxFor(r => r.textbox1, new { id = "textbox1"})
<label id="label1"></label>

 $('#textbox1').bind("change keyup", function() {
        $('#label1').val($('#textbox1').val())
    });

<script type="text/javascript">



    $(function () {


        $("#my-form").on("submit", function (e) {
            e.preventDefault();
            //debugger
            $.ajax({
                url: this.action,
                type: this.method,
                data: $(this).serialize(),
                success: function (data) {
                    $("#result").html(data);
                },

                    error: function () {
                        alert("Oh noes");
                    }
            });
        });
    });

</script>