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處理復雜用戶交互的示例。