使用 AJAX 实现文本框内容变更时调用 C# 方法-html教程-PHP中文网

使用 AJAX 实现文本框内容变更时调用 C# 方法

聖光之護

发布： 2025-09-13 22:36:01

原创

703人浏览过

使用 ajax 实现文本框内容变更时调用 c# 方法

本文介绍了如何使用 AJAX 技术在 HTML 文本框内容发生变化时，无需刷新页面即可调用 C# 方法，并将文本框的值作为参数传递给该方法。通过示例代码，详细阐述了前端 JavaScript 代码和后端 C# 代码的实现方式，帮助开发者快速掌握该技巧，实现动态更新页面内容的功能。

在 Web 开发中，经常需要在前端页面与后端服务器之间进行数据交互。当用户在前端页面进行某些操作（例如修改文本框内容）时，需要将这些数据传递给后端服务器进行处理，并将处理结果返回到前端页面进行展示。传统的做法是提交整个表单，导致页面刷新，用户体验较差。利用 AJAX 技术，可以实现异步的数据交互，无需刷新页面即可完成数据传递和更新。

以下是一个使用 AJAX 实现文本框内容变更时调用 C# 方法的示例：

1. 前端 JavaScript 代码

首先，需要在 HTML 页面中添加一个文本框，并为其绑定 onchange 事件。当文本框内容发生变化时，会触发 checkDates() 函数。

<input type="text" class="form-control input datepicker" placeholder="@now" id="date" name="date" onchange="checkdates()">

登录后复制

然后，编写 JavaScript 代码，使用 AJAX 将文本框的值传递给后端 C# 方法。

function checkDates() {
    var date = document.getElementById('date').value;
    $.ajax({
        data: { dateselected: date },
        url: '/my-page?handler=SelectDates',
        type: 'GET',
        success: function (data) {
            if (Object.keys(data).length === 0) {
                document.getElementById('example').value = "Some Value";
            } else {
                //Doing my stuff，例如更新表格数据
                //假设 data 是一个包含表格数据的 JSON 对象
                //可以遍历 data，动态生成表格的 HTML 代码，并将其插入到页面中
            }
        },
        error: function () {
            alert("error");
        }
    });
}

登录后复制

这段代码使用 jQuery 的 $.ajax() 方法发送 AJAX 请求。

ViiTor实时翻译

AI实时多语言翻译专家！强大的语音识别、AR翻译功能。

116

查看详情

data: 指定要传递给后端的数据，这里将文本框的值 date 作为 dateselected 参数传递。
url: 指定后端 C# 方法的 URL。 '/my-page?handler=SelectDates' 表示请求 my-page 页面的 SelectDates Handler。
type: 指定请求类型，这里使用 GET 请求。
success: 指定请求成功后的回调函数。该函数接收后端返回的数据 data，可以根据 data 的内容更新页面。
error: 指定请求失败后的回调函数。

2. 后端 C# 代码

在后端 C# 代码中，需要创建一个方法来接收前端传递的参数，并进行相应的处理。

using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using System.Collections.Generic;

public class MyPageModel : PageModel
{
    public Dictionary<string, string> mydict { get; set; } = new Dictionary<string, string>(); // 初始化字典

    [HttpGet]
    public IActionResult OnGetSelectDates(string dateselected)
    {
        // 假设 MyService 是一个包含业务逻辑的类
        // MyService.myFunction(dateselected); // 调用业务逻辑方法，处理 dateselected
        // mydict = MyService.dict; // 获取处理结果

        // 模拟一些数据
        mydict.Add("key1", "value1");
        mydict.Add("key2", dateselected);

        return new JsonResult(mydict);
    }
}

登录后复制

这段代码定义了一个 OnGetSelectDates 方法，该方法使用 [HttpGet] 特性标记，表示该方法可以通过 GET 请求访问。 string dateselected 参数用于接收前端传递的文本框的值。该方法首先调用 MyService.myFunction(dateselected) 方法进行业务逻辑处理，然后将处理结果存储在 mydict 字典中，最后将 mydict 字典作为 JSON 数据返回给前端。

3. 注意事项