AJAX在C#中处理复杂用户交互的实例

在这个示例中，我们将创建一个简单的ASP.NET MVC应用程序，它使用AJAX处理复杂用户交互

1. 首先，创建一个新的ASP.NET MVC项目。在Visual Studio中，选择 “File” > “New” > “Project”，然后选择 “ASP.NET Web Application (.NET Framework)” 模板。命名项目为 “AjaxExample”，然后单击 “OK”。

2. 在 “New ASP.NET Web Application” 对话框中，选择 “MVC” 模板，然后单击 “OK”。

3. 添加一个新的控制器，名为 “HomeController”。在 “Solution Explorer” 中，右键单击 “Controllers” 文件夹，然后选择 “Add” > “Controller”。在 “Add New Scaffolded Item” 对话框中，选择 “MVC 5 Controller - Empty”，然后单击 “Add”。

4. 在 “HomeController” 类中，添加以下方法：

using System.Threading.Tasks;
using System.Web.Mvc;

public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View();
    }

    [HttpPost]
    public async Task<JsonResult> GetData(string input)
    {
        // 模拟长时间运行的任务
        await Task.Delay(2000);

        // 返回处理后的数据
        string result = $"处理后的数据: {input}";
        return Json(result);
    }
}

5. 在 “Views/Home” 文件夹中，创建一个名为 “Index.cshtml” 的新视图。在该视图中，添加以下代码：

@{
    ViewBag.Title = "AJAX Example";
}

<h2>AJAX Example</h2>

<div>
   <label for="userInput">输入数据:</label>
   <input type="text" id="userInput" />
   <button id="submitButton">提交</button>
</div>

<div id="result"></div>

@section Scripts {
   <script src="~/Scripts/jquery-3.6.0.min.js"></script>
   <script>
        $(document).ready(function () {
            $("#submitButton").click(function () {
                var userInput = $("#userInput").val();

                $.ajax({
                    url: "/Home/GetData",
                    type: "POST",
                    dataType: "json",
                    data: { input: userInput },
                    success: function (data) {
                        $("#result").html(data);
                    },
                    error: function (xhr, status, error) {
                        console.log("Error: " + error);
                    }
                });
            });
        });
    </script>
}

现在，运行应用程序并访问 “http://localhost:xxxx/Home/Index”（其中 “xxxx” 是端口号）。在文本框中输入数据，然后单击 “提交” 按钮。你会看到，页面不会刷新，而是通过AJAX异步获取处理后的数据并显示在页面上。这就是一个简单的使用AJAX处理复杂用户交互的示例。