本文旨在介绍如何利用 AJAX 技术，在用户更改输入框的值时，无需刷新整个页面即可调用 C# 方法，并将输入框的值作为参数传递给该方法。通过这种方式，可以实现动态地从服务器获取数据并更新页面内容，从而提升用户体验。本文将提供详细的代码示例和步骤，帮助开发者理解和应用这一技术。
实现步骤
要实现输入框值变更时调用 C# 方法并更新页面，主要涉及以下几个步骤：
1. 前端：JavaScript 使用 AJAX 发送请求
首先，我们需要编写 JavaScript 代码来监听输入框的 onchange 事件。当输入框的值发生改变时，使用 AJAX 将输入框的值发送到服务器端的 C# 方法。
<input type="text" class="form-control input datepicker" placeholder="@now" id="date" name="date" onchange="checkDates()"> <script> 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 { // 在这里处理返回的数据，并更新页面 // 例如： // document.getElementById('result').innerHTML = data.someProperty; } }, error: function () { alert("error"); } }); } </script>
代码解释：
- document.getElementById(‘date’).value：获取 ID 为 date 的输入框的值。
- $.ajax()：jQuery 提供的 AJAX 方法，用于发送异步 HTTP 请求。
- data: 将输入框的值作为参数 dateselected 发送到服务器。
- url: 指定服务器端处理请求的 URL。注意，这里的 /my-page?handler=SelectDates 是一个示例 URL，你需要根据你的实际情况修改。 handler=SelectDates 指定了 Razor Page 的 Handler。
- type: 指定请求类型为 GET。
- success: 请求成功时的回调函数。 data 参数包含了服务器返回的数据。在这里，你可以根据返回的数据更新页面上的元素。
- error: 请求失败时的回调函数，用于处理错误情况。
注意事项：
- 确保你的页面引入了 jQuery 库，否则 $.ajax() 方法将无法使用。 你可以通过 CDN 引入 jQuery： <script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js“></script>
- url 必须指向服务器端正确的处理请求的 URL。
- data 中的参数名必须与服务器端 C# 方法的参数名一致。
2. 后端：C# 处理请求并返回数据
接下来，我们需要在 C# 代码中创建一个方法来处理 AJAX 请求，并返回需要的数据。
using Microsoft.AspNetCore.Mvc; using Microsoft.AspNetCore.Mvc.RazorPages; using System.Collections.Generic; public class MyPageModel : PageModel { public Dictionary<string, string> mydict = new Dictionary<string, string>(); [HttpGet] public IActionResult OnGetSelectDates(string dateselected) { // 在这里调用你的业务逻辑方法 // 例如： MyService.myFunction(dateselected); mydict = MyService.dict; // 返回 JSON 数据 return new JsonResult(mydict); } } public static class MyService { public static Dictionary<string, string> dict = new Dictionary<string, string>(); public static void myFunction(string date) { // 模拟从数据库获取数据 dict.Clear(); dict.Add("date", date); dict.Add("value", "Some Value from Server"); } }
代码解释：
- [HttpGet]：指定该方法处理 HTTP GET 请求。
- OnGetSelectDates(string dateselected)：该方法接收一个字符串参数 dateselected，该参数对应于 AJAX 请求中发送的 dateselected 数据。
- MyService.myFunction(dateselected): 调用你的业务逻辑方法，处理 dateselected 参数，并获取需要返回的数据。
- new JsonResult(mydict)：将数据转换为 JSON 格式，并返回给客户端。
注意事项：
- 确保你的 C# 方法的参数名与 AJAX 请求中发送的数据的参数名一致。
- JsonResult 返回的数据必须是可序列化的，例如简单的类型、数组、字典等。
3. 前端：JavaScript 接收数据并更新页面
最后，在 JavaScript 的 success 回调函数中，我们可以接收到 C# 方法返回的 JSON 数据，并使用这些数据来更新页面上的元素。
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 { // 在这里处理返回的数据，并更新页面 document.getElementById('result').innerHTML = "Date: " + data.date + ", Value: " + data.value; } }, error: function () { alert("error"); } }); }
代码解释：
- data.date 和 data.value：访问 JSON 数据中的 date 和 value 属性。
- document.getElementById(‘result’).innerHTML = …：将获取到的数据更新到 ID 为 result 的元素的 innerHTML 属性中。
总结
通过以上步骤，我们就可以实现输入框值变更时，通过 AJAX 调用 C# 方法，并将输入框的值作为参数传递给该方法，然后使用返回的数据动态更新页面内容。这种方法可以有效地提升用户体验，避免不必要的页面刷新。
示例代码：
<!DOCTYPE html> <html> <head> <title>AJAX Example</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> </head> <body> <input type="text" class="form-control input datepicker" placeholder="@now" id="date" name="date" onchange="checkDates()"> <div id="result"></div> <input type="text" id="example"> <script> 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 { // 在这里处理返回的数据，并更新页面 document.getElementById('result').innerHTML = "Date: " + data.date + ", Value: " + data.value; } }, error: function () { alert("error"); } }); } </script> </body> </html>
C# 代码 (Razor Page Model):
using Microsoft.AspNetCore.Mvc; using Microsoft.AspNetCore.Mvc.RazorPages; using System.Collections.Generic; public class MyPageModel : PageModel { public Dictionary<string, string> mydict = new Dictionary<string, string>(); [HttpGet] public IActionResult OnGetSelectDates(string dateselected) { // 在这里调用你的业务逻辑方法 // 例如： MyService.myFunction(dateselected); mydict = MyService.dict; // 返回 JSON 数据 return new JsonResult(mydict); } } public static class MyService { public static Dictionary<string, string> dict = new Dictionary<string, string>(); public static void myFunction(string date) { // 模拟从数据库获取数据 dict.Clear(); dict.Add("date", date); dict.Add("value", "Some Value from Server"); } }
将上述 HTML 代码保存为 .cshtml 文件 (例如 MyPage.cshtml)，将 C# 代码添加到对应的 Razor Page Model 类中，并确保 URL /my-page?handler=SelectDates 正确指向该 Handler。 运行项目，在输入框中输入值并失去焦点后，将会看到 result div 中的内容被动态更新。
相关标签：
javascript java jquery html js 前端 json ajax go 后端 c# JavaScript json jquery ajax html String date Error 回调函数 字符串 JS 事件 异步 innerHTML http https