How to call simple ajax program in asp.net mvc - ajax

Question

I start learning Ajax in asp.net MVC 4. I want to create a very simple program based on the following scenario.
I want two textboxes on a form (FirstName, LastName) and a button, Whenever i write something in these textboxes, these values should assign to two labels (lblFristName, lblLastName) by using Ajax. So that page will not refresh.
How can i achieve the above functionality?. Please provide clear/simple code examples and no other site links, Thanks.
Following is the code that iam trying for:-
#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>
}
Partial View
#model MvcAppLearn.Models.Student
#{
ViewBag.Title = "AjaxCall";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>Ajax Partial View</h2>
<label>#Html.DisplayFor(item => item.FirstName)</label><br />
#Html.Label(Model.LastName)
#* #Html.EditorFor(x => x.FirstName)<br />
#Html.EditorFor(x => x.LastName)*#
Controller
public ActionResult AjaxCall()
{
return View();
}
[HttpPost]
public virtual ActionResult AjaxCall(Student model)
{
return PartialView("ajax_partial" , model);
}
So above code take me to the partial view, but i want to live on that page where my textboxes are placed and at the same page i want to display these labels. Please correct if there is any mistake, thanks

Answer 1

If this is something your view looks like,
#Html.TextBoxFor(r => r.textbox1, new { id = "textbox1"})
<label id="label1"></label>
You can achieve this using simple jquery change/keyup event
$('#textbox1').bind("change keyup", function() {
$('#label1').val($('#textbox1').val())
});

Answer 2

I have done it, Problem was i write "s" as capital in 'submit' and missed 's' in last at ":success" function. Following is the correct code.
<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>