本文介绍了如何利用 Ajax 技术，在网页文本框 onchange 事件触发时，将文本框的值传递给 C# 方法，并获取 C# 方法返回的数据，从而实现无需刷新页面的数据交互。通过示例代码，详细讲解了前端 Ajax 调用和后端 C# 方法的处理过程，帮助开发者快速实现类似功能。
在 Web 开发中，经常需要根据用户的输入动态更新页面内容，而无需刷新整个页面。当用户在文本框中输入内容并离开文本框（onchange 事件触发）时，如果需要将文本框的值传递给后端 C# 方法进行处理，并根据后端返回的结果更新页面，可以使用 Ajax 技术来实现。
以下是一个具体的实现方案：
1. 前端 JavaScript (使用 jQuery Ajax):
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 {
// 在此处处理从后端返回的数据，例如更新表格内容
console.log("Data received from server:", data);
// 示例：将数据添加到表格
// appendDataToTable(data);
}
},
error: function () {
alert("error");
}
});
}代码解释：
- checkDates() 函数: 该函数在文本框的 onchange 事件触发时被调用。
- document.getElementById('date').value: 获取 ID 为 date 的文本框的值。
-
$.ajax(): 使用 jQuery 的 Ajax 方法发起异步请求。
- data: { dateselected: date }: 将文本框的值作为 dateselected 参数传递给后端。
- url: '/my-page?handler=SelectDates': 指定后端处理请求的 URL。 handler=SelectDates 用于指定 Razor Pages 的 Handler 方法。
- type: 'GET': 指定请求类型为 GET。
- success: function (data) { ... }: 定义请求成功时的回调函数。 data 参数包含从后端返回的数据。
- error: function () { ... }: 定义请求失败时的回调函数。
2. 后端 C# (Razor Pages Handler):
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using System.Collections.Generic;
public class MyPageModel : PageModel
{
// 假设 MyService 是一个用于处理数据的服务类
private readonly IMyService MyService;
public MyPageModel(IMyService myService)
{
MyService = myService;
}
public Dictionary<string, string> mydict { get; set; }
[HttpGet]
public IActionResult OnGetSelectDates(string dateselected)
{
MyService.myFunction(dateselected);
mydict = MyService.dict;
return new JsonResult(mydict);
}
}
// 示例服务接口和实现
public interface IMyService
{
void myFunction(string dateselected);
Dictionary<string, string> dict { get; set; }
}
public class MyService : IMyService
{
public Dictionary<string, string> dict { get; set; } = new Dictionary<string, string>();
public void myFunction(string dateselected)
{
// 模拟从数据库获取数据并填充字典
dict.Add("dateSelected", dateselected);
dict.Add("exampleValue", "From Database");
}
}代码解释：
- OnGetSelectDates(string dateselected) 方法: 该方法处理来自前端的 Ajax GET 请求。
- [HttpGet]: 特性表明该方法处理 GET 请求。
- string dateselected: 接收从前端传递过来的 dateselected 参数。
- MyService.myFunction(dateselected): 调用服务类的方法处理数据。
- mydict = MyService.dict: 将服务类中的字典赋值给模型属性。
- return new JsonResult(mydict): 将字典转换为 JSON 格式并返回给前端。
3. HTML (Razor Page):
@page
@model MyPageModel
<input type="text" class="form-control input datepicker" placeholder="@DateTime.Now" id="date" name="date" onchange="checkDates()">
<input type="text" id="example" />
<!-- 可以添加一个表格来显示返回的数据 -->
<table id="dataTable">
<thead>
<tr>
<th>Key</th>
<th>Value</th>
</tr>
</thead>
<tbody>
<!-- 数据将通过 JavaScript 动态添加到这里 -->
</tbody>
</table>
@section Scripts {
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
function checkDates() {
var date = document.getElementById('date').value;
$.ajax({
data: { dateselected: date },
url: '/?handler=SelectDates', // 注意：Razor Pages 的 URL 可能需要调整
type: 'GET',
success: function (data) {
if (Object.keys(data).length === 0) {
document.getElementById('example').value = "Some Value";
} else {
// 清空表格
$('#dataTable tbody').empty();
// 遍历数据并添加到表格
$.each(data, function (key, value) {
$('#dataTable tbody').append('<tr><td>' + key + '</td><td>' + value + '</td></tr>');
});
}
},
error: function () {
alert("error");
}
});
}
</script>
}代码解释：
- <input type="text" ... onchange="checkDates()">: 定义文本框，并在 onchange 事件触发时调用 checkDates() 函数。
- @section Scripts { ... }: Razor Pages 的 Scripts section，用于放置 JavaScript 代码。 确保引入 jQuery 库。
- $('#dataTable tbody').empty(); 和 $.each(data, function (key, value) { ... });: 使用 jQuery 动态地更新表格内容。
注意事项：
- 引入 jQuery: 确保在页面中引入 jQuery 库，才能使用 $.ajax() 方法。
- URL 路径: url 路径需要根据实际情况进行调整，确保指向正确的 C# 方法。 Razor Pages 的 URL 结构可能与 MVC 不同。
- 数据处理: success 回调函数中需要根据实际需求处理从后端返回的数据。
- 异常处理: 在 error 回调函数中添加适当的错误处理逻辑。
- 安全性: 对用户输入进行验证和清理，防止跨站脚本攻击 (XSS)。
- 服务注入: 在Startup.cs文件中注册IMyService和MyService，例如：services.AddScoped<IMyService, MyService>();
总结：
通过以上步骤，就可以实现文本框值更改时，通过 Ajax 将数据传递给 C# 方法，并根据返回结果动态更新页面内容，而无需刷新整个页面。 这种方法可以提高用户体验，并减少服务器的负载。 记住根据你的具体项目进行适当的调整。
