Question

I am trying a simple task of displaying student name in a textbox based on StudentId entered. I am able to display the student name as an alert from jQuery – AJAX call but not in the text box, what am I missing here?

Controller:

    [AcceptVerbs(HttpVerbs.Get | HttpVerbs.Post)]
    public ActionResult DisplayStudentName(string id)
    {
        StudentDataContext db = new StudentDataContext();
        var StudentName = (from p in db.vwStudents.Where(a => a.StudentNumber == id)
                         group p by p.StudentName into g
                         select g.Key).FirstOrDefault();

        return Json(new { Name = StudentName }); 

    }

jQuery:

$(function () {
    $('#submitButton').click(function () {
        var link = '/StudentForm/DisplayStudentName';        
        $.ajax({
            type: 'POST',
            url: link,
            data: { id: $('#id').val() },
            dataType: 'json',
            success: function (result) {
                $("#StudentName").val(result.Name);
                alert(result.Name);
            },
            error: function (result) {
                alert("Failed")
            }
        });
    });
});

View:

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    Student Form
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<div id="Data" style="text-align: left; height: 202px;">
Student Number:<input type="text" name="id" id="id"/><br />                
Student Name:<input type="text" name="StudentName" id="StudentName"/><br />              
<br />
 <div id="Div1">
  <button id="submitButton" name="submitButton" style="width:140px;">Display Short Name</button>
 </div>
</div>

</asp:Content>

Again, I am able to display Student Name in the Alert window, but not in the text box, Am I missing something?

Thanks in advance

Answer 1

You need to prevent the default behavior of submit button. You can use the jQuery preventDefault function to do this,

$(function () {
    $('#submitButton').click(function (e) {
        e.preventDefault();    //prevent default behaviour
        var link = '/StudentForm/DisplayStudentName';        
        $.ajax({
            type: 'POST',
            url: link,
            data: { id: $('#id').val() },
            dataType: 'json',
            success: function (result) {                  
                $("#StudentName").val(result.Name);
            },
            error: function (result) {
                alert("Failed")
            }
        });
    });
})

When preventDefault method is called, the default action of the event will not be triggered. So in this case the form submission will not happen ( so the page wont be reloaded).