本文介绍了如何利用 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# 方法，并根据返回结果动态更新页面内容，而无需刷新整个页面。 这种方法可以提高用户体验，并减少服务器的负载。 记住根据你的具体项目进行适当的调整。
相关标签：
javascript java jquery html js 前端 json ajax go app 后端 c# JavaScript mvc json jquery ajax html xss String date Error 回调函数 值传递 function 事件 异步 input tbody