使用 AJAX 和 C# 实现输入框值变更时动态更新页面-html教程-PHP中文网

使用 AJAX 和 C# 实现输入框值变更时动态更新页面

碧海醫心

发布： 2025-09-13 22:14:13

原创

762人浏览过

使用 ajax 和 c# 实现输入框值变更时动态更新页面

本文旨在介绍如何利用 AJAX 技术，在用户更改输入框的值时，无需刷新整个页面即可调用 C# 方法，并将输入框的值作为参数传递给该方法。通过这种方式，可以实现动态地从服务器获取数据并更新页面内容，从而提升用户体验。本文将提供详细的代码示例和步骤，帮助开发者理解和应用这一技术。

实现步骤

要实现输入框值变更时调用 C# 方法并更新页面，主要涉及以下几个步骤：

前端：JavaScript 使用 AJAX 发送请求
后端：C# 处理请求并返回数据
前端：JavaScript 接收数据并更新页面

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>

登录后复制

代码解释：

ViiTor实时翻译

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

116

查看详情

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 中的内容被动态更新。

以上就是使用 AJAX 和 C# 实现输入框值变更时动态更新页面的详细内容，更多请关注php中文网其它相关文章！