按鈕點擊不觸發jQuery（Ajax）功能更新頁面

Question

我有一個網站，我顯示學生信息。我想在網站上添加幾個文本字段，並使用按鈕單擊上的jQuery（Ajax）異步更新這些字段。我相信我有所有的要求，但數據仍未更新。

我在這裏錯過了什麼嗎？點擊按鈕什麼也不做。

這裏是我的代碼 -

控制器：

using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Web; 
using System.Web.Mvc; 
using Student.Models;  

namespace Student.Controllers 
{ 
    public class StudentController : Controller 
    {   
     public ActionResult Index() 
     { 
      return View("Student"); 
     } 

     [HttpPost()]  
     public ActionResult DisplayStudentName(string id) 
     { 
      StudentDataContext db = new StudentDataContext(); 
      var StudentName = (from p in db.vwStudent.Where(a => a.StudentId == id) 
          group p by p.StudentName into g 
          select g.Key).FirstOrDefault(); 

      ViewData["StudentName"] = StudentName; 

      return View("Student"); 

     } 

     [HttpPost()] 
     public ActionResult DisplayStudentStatus(int? id, string flg) 
     { 
      AccountDataContext db = new AccountDataContext(); 
      var StudentStatus = (from p in db.vwStudent.Where(a => a.StudentId == id && a.LastFlag == flg) 
          group p by p.Status into g 
          select g.Key).FirstOrDefault(); 

      ViewData["StudentStatus "] = StudentStatus; 

      return View("Student"); 

     } 

    } 
} 

的jQuery：

$("#Button1").click(function() { 
     var link = '<%= Url.Action("DisplayStudentName", "Student")'; 
     $.ajax({ 
      url: link, 
      data: "{id: '<%= ViewContext.RouteData.Values["id"] %>'}", 
      dataType: "html", 
      success: Success, 
      error: Fail 
     }); 
    }); 

    $("#Button2").click(function() { 
     var link = '<%= Url.Action("DisplayStudentStatus", "Student")'; 
     $.ajax({ 
      url: link, 
      data: "{id: '<%= ViewContext.RouteData.Values["id"] %>' , 
        flg: '<%= ViewContext.RouteData.Values["flg"] %>'}", 
      dataType: "html", 
      success: Success, 
      error: Fail 
     }); 
    }); 

function Success(){ 
alert("Success"); 
} 

function Fail(){ 
alert("Fail"); 
} 

查看：

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

    <form id="form1" method="get" runat="server"> 

Student ID:<input type="text" name="id" id="StudentId" value="<%=HttpContext.Current.Request.QueryString["id"]%>" /><br /> 

Student Name:<input type="text" name="StudentName" id="StudentName" value="<%=ViewData["StudentName"]%>"/> 
<div id="Btn1"><input type="button" value="Display Student Name" name="Btn1" id="Button1" /> 
</div> 

Student Status:<input type="text" name="StudentStatus" id="StudentStatus" value="<%=HttpContext.Current.Request.QueryString["StudentStatus"]%>" />  
<div id="Btn2"><input type="button" value="Display Profit Center" name="Btn2" id="Button2" /> 
</div> 

</div>   
</form> 
</asp:Content> 

在此先感謝

Answer 1

有幾個與你的代碼的問題，我看到：

• 您不應將data參數包裝爲單引號。
• 您的成功和錯誤參數不應該是字符串。他們應該是功能
• 你不應該在ASP.NET MVC應用程序中硬編碼URL。

  $("#Button1").click(function() { 
      var link = '<%= Url.Action("DisplayStudentName", "Student")'; 
      $.ajax({ 
       url: link, 
       data: { id: '<%= ViewContext.RouteData.Values["id"] %>' }, 
       success: Success, 
       error: Fail 
      }); 
  }); 
  
  $("#Button2").click(function() { 
  
      var link = '<%= Url.Action("DisplayStudentStatus", "Student")'; 
      $.ajax({ 
       url: link, 
       data: { 
        id: '<%= ViewContext.RouteData.Values["id"] %>' , 
        flg: '<%= ViewContext.RouteData.Values["flg"] %>' 
       }, 
       success: Success, 
       error: Fail 
      }); 
  }); 
  

  很明顯，您必須聲明中使用的兩個功能：使用URL

所以打交道時，你應該總是使用URL傭工

function Success(data) { 
    // ... 
} 

function Fail() { 
    // ... 
} 

Answer 2

需要提及後在烏拉圭回合阿賈克斯參數

$.ajax({ 
      url: link, 
      type: 'post', 

您也有提到JSON作爲你的Ajax功能的數據類型，但你的行動將返回text/html的。

進行這2個更改，如果它不起作用，那麼檢查fiddler以查看從服務器獲得的響應。

如果您獲得了有效的回覆，請檢查您的成功功能，看看您是否正確。

如果你想支持獲取和你的動作後的場景，然後在你的行動改變屬性

[AcceptVerbs(HttpVerbs.Get | HttpVerbs.Post)]