使用 AJAX 和 C# 实现文本框内容改变时动态更新页面

本文介绍了如何利用 AJAX 技术在 HTML 文本框内容发生改变时，无需刷新整个页面即可调用 C# 方法，并将文本框的值作为参数传递给该方法。通过示例代码详细展示了前端 JavaScript 代码和后端 C# 代码的实现方式，帮助开发者实现动态更新页面的需求。

在 Web 开发中，经常会遇到需要在用户输入信息后，实时更新页面内容的需求，而避免整个页面刷新可以提升用户体验。本文将详细介绍如何利用 AJAX 技术，在文本框 (input type=”text”) 内容发生改变时，调用 C# 方法，并将文本框的值作为参数传递给该方法，从而实现动态更新页面的效果。

前端 JavaScript 实现

首先，我们需要编写 JavaScript 代码来监听文本框的 onchange 事件，并在事件触发时，通过 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 {
// 处理返回的数据，更新页面
// 例如：
// document.getElementById('result').innerHTML = data.someValue;
}
},
error: function () {
alert("error");
}
});
}

这段代码的解释如下：

1. checkDates() 函数: 这个函数会被 onchange 事件触发。
2. document.getElementById(‘date’).value: 获取 id 为 date 的文本框的值。
3. $.ajax(): 使用 jQuery 的 AJAX 方法发送请求。
   • data: { dateselected: date }: 将文本框的值作为参数 dateselected 传递给服务器。
   • url: ‘/my-page?handler=SelectDates’: 指定服务器端处理请求的 URL。 /my-page 是你的页面路径，?handler=SelectDates 指定了要调用的 C# 方法。
   • type: ‘GET’: 指定请求类型为 GET。 也可以使用 POST，根据你的需求选择。
   • success: function (data) { … }: 请求成功后执行的回调函数。 data 包含了服务器返回的数据。 在这里，你可以根据返回的数据更新页面内容。
   • error: function () { … }: 请求失败后执行的回调函数。 在这里，你可以显示错误信息。

HTML 代码如下：

<input type="text" class="form-control input datepicker" placeholder="@now" id="date" name="date" onchange="checkDates()">

关键点是 onchange=”checkDates()”，它将 checkDates() 函数绑定到文本框的 onchange 事件。

注意事项：

DeepSeek

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

7087

查看详情

• 确保你的页面引入了 jQuery 库，因为上面的代码使用了 $.ajax() 方法。 你可以通过 CDN 引入 jQuery：

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

• 根据你的实际情况修改 URL 和参数。

后端 C# 实现

接下来，我们需要在 C# 代码中处理 AJAX 请求，并返回数据。

using Microsoft.AspNetCore.Mvc;
public class MyPageModel : PageModel
{
public Dictionary<string, string> mydict { get; set; }
[HttpGet]
public IActionResult OnGetSelectDates(string dateselected)
{
MyService.myFunction(dateselected);
mydict = MyService.dict;
return new JsonResult(mydict);
}
}

这段代码的解释如下：

1. MyPageModel 类: 这是你的页面模型类。
2. mydict 属性: 一个字典，用于存储从数据库获取的数据。
3. [HttpGet] public IActionResult OnGetSelectDates(string dateselected) 方法: 这个方法处理 AJAX 请求。
   • [HttpGet]: 指定这个方法处理 GET 请求。 如果前端使用 POST 请求，则需要使用 [HttpPost]。
   • OnGetSelectDates(string dateselected): 方法名必须以 OnGet 或 OnPost 开头，后面跟着 handler 参数的值。 例如，如果 handler=SelectDates，则方法名为 OnGetSelectDates 或 OnPostSelectDates。
   • string dateselected: 这个参数接收前端传递的 dateselected 参数的值，也就是文本框的值。
   • MyService.myFunction(dateselected): 调用你的业务逻辑方法，处理 dateselected 参数。
   • mydict = MyService.dict: 将业务逻辑方法返回的数据存储到 mydict 属性中。
   • return new JsonResult(mydict): 将 mydict 转换为 JSON 格式，并返回给前端。

注意事项：

DeepSeek

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

7087

查看详情

• MyService 和 MyService.myFunction 是示例代码，你需要根据你的实际情况修改。
• 确保你的 C# 代码能够正确处理 dateselected 参数，并返回正确的数据。

总结

通过以上步骤，你就可以实现文本框内容改变时，动态更新页面的效果。 这种方法可以避免整个页面刷新，提升用户体验。 记住，要根据你的实际情况修改前端 JavaScript 代码和后端 C# 代码。 此外，可以考虑添加一些错误处理机制，例如：添加输入验证，处理服务器返回的错误信息等，以增强程序的健壮性。