使用 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 请求。

DeepSeek

幻方量化公司旗下的开源大模型平台

7087

查看详情

• 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. 注意事项

• 确保已经引入 jQuery 库。
• 后端 C# 方法需要使用 [HttpGet] 或 [HttpPost] 特性标记，并指定正确的 URL。
• 前端 JavaScript 代码和后端 C# 代码中的参数名称需要一致。
• 后端返回的数据需要是 JSON 格式。

4. 总结

通过使用 AJAX 技术，可以实现文本框内容变更时调用 C# 方法，并将文本框的值作为参数传递给该方法，而无需刷新页面。 这种方法可以提高用户体验，并使 Web 应用程序更加动态和交互性。 在实际开发中，可以根据具体需求，灵活运用 AJAX 技术，实现各种复杂的数据交互功能。