данные, не отображающиеся по форме на успех ajax

Question

Я пытаюсь выполнить простую задачу отображения имени студента в текстовом поле на основе введенного StudentId. Я могу отобразить имя студента в качестве предупреждения из вызова jQuery - AJAX, но не в текстовом поле, что мне здесь не хватает?

Контроллер:

[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") 
      } 
     }); 
    }); 
}); 

Вид:

<%@ 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> 

Опять же, я могу показать Student Name в окне оповещения, но не в тексте коробка, я чего-то не хватает?

Заранее спасибо

Answer 1

Вы должны предотвратить поведение по умолчанию кнопки отправки. Вы можете использовать функцию JQuery preventDefault, чтобы сделать это,

$(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") 
      } 
     }); 
    }); 
}) 

Когда preventDefault вызывается метод, действие по умолчанию события не будет срабатывать. Таким образом, в этом случае представление формы не произойдет (поэтому страница не будет перезагружена).