ASP.NET MVC猜数字游戏：实现AJAX无刷新更新猜中数字

针对你的ASP.NET MVC应用，要解决提交后页面重置的问题，只需通过AJAX异步提交+Session维护状态即可实现无刷新更新，具体修改如下：

1. 修正Controller逻辑（验证列对应数字+保存状态） #

原FindSecretNumber方法逻辑错误（当前是匹配数组中第一个出现的数字，而非用户指定列），同时需要用Session保存已猜中的状态，避免每次请求重置：

using System.Text.Json;

namespace SecretNumberGame.Controllers
{
    public class GameController : Controller
    {
        private readonly ISecretNumberService service;

        public GameController(ISecretNumberService _service)
        {
            this.service = _service;
        }

        [HttpGet]
        public async Task<IActionResult> GetSecretNumber()
        {
            SecretNumberViewModel modelNumber = await service.GetSecretNumberAsync();
            // 初始化游戏状态到Session
            HttpContext.Session.SetString("SecretGameState", JsonSerializer.Serialize(modelNumber));
            return View(modelNumber);
        }        

        [HttpPost]
        public async Task<IActionResult> FindSecretNumber(string nums, int num, int col)
        {
            // 从Session获取当前游戏状态
            var stateJson = HttpContext.Session.GetString("SecretGameState");
            var modelNumber = JsonSerializer.Deserialize<SecretNumberViewModel>(stateJson);
            
            if (modelNumber == null)
            {
                return Json(new { success = false, message = "游戏状态丢失，请刷新页面" });
            }

            // 验证用户指定列的数字是否正确（col转数组索引需减1）
            int targetIndex = col - 1;
            if (targetIndex >= 0 && targetIndex < modelNumber.SecretNumArray.Length)
            {
                var secretNum = modelNumber.SecretNum.Split(" ")[targetIndex];
                if (secretNum == num.ToString())
                {
                    modelNumber.ShowValue[targetIndex] = true;
                    modelNumber.SecretNumArray[targetIndex] = secretNum;
                }
            }

            // 更新Session中的状态
            HttpContext.Session.SetString("SecretGameState", JsonSerializer.Serialize(modelNumber));

            return Json(new { success = true, data = modelNumber });
        }                
    }
}

2. 修改View：添加可识别的单元格ID+AJAX提交脚本 #

2.1 渲染动态数字单元格 #

把硬写的"X"改成根据ViewModel状态渲染，同时给每个单元格加唯一ID：

<tbody>
    <tr>
        @for (int i = 0; i < Model.SecretNum.Split(" ").ToArray().Length; i++)
        {
            <td id="cell-@i">
                <h1>@(Model.ShowValue[i] ? Model.SecretNumArray[i] : "X")</h1>
            </td>
        }
    </tr>
</tbody>

2.2 修改表单+添加AJAX脚本 #

将表单改为用异步提交，阻止默认刷新行为：

<form id="guess-form">
    <div class="form-control card-body bg-primary bg-opacity-25">
        <label>Column</label>        
        <br />
        <input name="col" type="number" min="1" max="7" placeholder="1-7" required>
        <br />
        <label>Number</label>
        <br />
        <input name="num" type="number" min="0" max="9" placeholder="0-9" required />
        <hr />
        <!-- 隐藏域传递秘密数字串，避免URL暴露 -->
        <input type="hidden" name="nums" value="@Model.SecretNum" />
        <button type="button" id="submit-btn" class="btn btn-info btn-outline-primary rounded-pill">提交猜测</button>
    </div>
</form>

@section Scripts {
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script>
        $(function() {
            $('#submit-btn').click(function() {
                // 序列化表单数据
                var formData = $('#guess-form').serialize();
                
                $.ajax({
                    url: '@Url.Action("FindSecretNumber", "Game")',
                    type: 'POST',
                    data: formData,
                    success: function(res) {
                        if (res.success) {
                            var model = res.data;
                            var targetCellId = '#cell-' + (model.Col - 1);
                            // 如果猜中，更新单元格内容
                            if (model.ShowValue[model.Col - 1]) {
                                $(targetCellId).html(`<h1>${model.SecretNumArray[model.Col - 1]}</h1>`);
                                alert('猜中了！');
                            } else {
                                alert('没猜中，再试试');
                            }
                        } else {
                            alert(res.message);
                        }
                    },
                    error: function() {
                        alert('提交失败，请重试');
                    }
                });
            });
        });
    </script>
}

3. 启用Session支持（如果未配置） #

在Program.cs中添加Session服务和中间件，确保游戏状态能被持久化：

var builder = WebApplication.CreateBuilder(args);

// 添加Session服务
builder.Services.AddSession(options =>
{
    options.IdleTimeout = TimeSpan.FromMinutes(30);
    options.Cookie.HttpOnly = true;
    options.Cookie.IsEssential = true;
});

// 添加Mvc服务
builder.Services.AddControllersWithViews();

// 注入你的ISecretNumberService
builder.Services.AddScoped<ISecretNumberService, SecretNumberService>();

var app = builder.Build();

// 启用Session（必须放在UseRouting之后，UseEndpoints之前）
app.UseSession();

app.UseHttpsRedirection();
app.UseStaticFiles();

app.UseRouting();

app.UseAuthorization();

app.MapControllerRoute(
    name: "default",
    pattern: "{controller=Game}/{action=GetSecretNumber}/{id?}");

app.Run();

核心要点 #

• Session维护状态：因为AJAX请求是无状态的，必须用Session保存用户已猜中的位置，否则每次提交都会重置所有状态。
• AJAX异步提交：阻止表单默认刷新行为，异步发送请求并根据返回结果更新指定单元格。
• 修正验证逻辑：确保只验证用户指定列的数字是否正确，符合游戏需求。

内容的提问来源于stack exchange，提问作者cSNaKa7a