使用 Ajax 和 C# 实现文本框值更改时的数据交互-html教程-PHP中文网

使用 Ajax 和 C# 实现文本框值更改时的数据交互

聖光之護

发布： 2025-09-13 23:03:09

原创

980人浏览过

使用 ajax 和 c# 实现文本框值更改时的数据交互

本文介绍了如何利用 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");
    }
  });
}

登录后复制

代码解释：

腾讯智影-AI数字人

基于AI数字人能力，实现7*24小时AI数字人直播带货，低成本实现直播业务快速增增，全天智能在线直播

查看详情

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>();