本文介绍了如何使用 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 请求。
- 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 技术，实现各种复杂的数据交互功能。
javascript java jquery html js 前端 json ajax 后端 c# JavaScript json jquery ajax html String date Error 回调函数 值传递 事件 异步