按钮单击不触发 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 进行硬编码。处理 url 时应始终使用 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
    });
});

显然您必须声明使用的 2 个函数：

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

function Fail() {
    // ...
}

Answer 2

需要在你的ajax参数中提及post

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

您还提到 json 作为 ajax 函数中的数据类型，但您的操作返回 text/html。

进行这 2 项更改，如果它不起作用，请检查 fiddler 以查看您从服务器获得的响应。

如果你得到一个有效的响应，那么检查你的成功函数，看看你是否做对了。

如果您想在您的操作上支持获取和发布场景，请将您的操作上的属性更改为

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