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

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

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

function Fail() {
    // ...
}

Answer 2

需要在ur ajax参数中提及帖子

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

此外，您已经在jj函数中提到了json作为数据类型，但您的操作是返回text / html。

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

如果您收到有效的回复，请检查您的成功功能，看看您是否正确行事。

如果您想支持动作的获取和发布方案，请将操作的属性更改为

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

按钮单击不触发jQuery（Ajax）函数来更新页面

2 个答案: