使用 AJAX 和 C# 实现文本框内容改变时动态更新页面-html教程-PHP中文网

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

碧海醫心

发布： 2025-09-13 22:17:01

原创

274人浏览过

使用 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");
    }
  });
}

登录后复制

这段代码的解释如下：

checkDates() 函数: 这个函数会被 onchange 事件触发。
document.getElementById('date').value: 获取 id 为 date 的文本框的值。
$.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 事件。

注意事项：

ViiTor实时翻译

AI实时多语言翻译专家！强大的语音识别、AR翻译功能。

116

查看详情

确保你的页面引入了 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);
    }
}

登录后复制

这段代码的解释如下：

MyPageModel 类: 这是你的页面模型类。
mydict 属性: 一个字典，用于存储从数据库获取的数据。
[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 格式，并返回给前端。