页面刷新时如何保留TextBox原有数据？（MVC、C#技术栈）

嘿，这个问题我之前在MVC项目里也踩过坑——图片上传触发整页刷新，输入框里的内容直接清空，用户体验太差了。下面给你几个实用的解决方案，按需选择就行：

1. 用Ajax异步上传图片（最推荐，从根源避免刷新） #

核心思路是不触发整页PostBack，通过前端Ajax单独提交图片文件，这样页面不会刷新，TextBox里的内容自然保留。

前端代码示例： #

<!-- 页面上的表单和控件 -->
<div>
    <label>输入内容：</label>
    @Html.TextBox("Content", null, new { @class = "form-control" })
</div>
<div>
    <label>上传图片：</label>
    <input type="file" id="imageFile" accept="image/*" />
    <button id="uploadBtn" class="btn btn-primary">上传图片</button>
</div>

<script src="~/Scripts/jquery-3.6.0.min.js"></script>
<script>
    $(function() {
        $("#uploadBtn").click(function(e) {
            e.preventDefault(); // 阻止默认的表单提交行为
            var formData = new FormData();
            var file = $("#imageFile")[0].files[0];
            if (file) {
                formData.append("image", file);
                
                // 发送Ajax请求
                $.ajax({
                    url: "@Url.Action("UploadImage", "Home")",
                    type: "POST",
                    data: formData,
                    processData: false, // 必须设置，不然FormData会被错误处理
                    contentType: false, // 必须设置，让浏览器自动处理Content-Type
                    success: function(response) {
                        if (response.success) {
                            alert("图片上传成功！");
                            // 这里可以处理上传后的逻辑，比如显示图片预览
                        } else {
                            alert("上传失败：" + response.message);
                        }
                    },
                    error: function() {
                        alert("上传请求出错，请重试");
                    }
                });
            } else {
                alert("请先选择要上传的图片");
            }
        });
    });
</script>

后端Controller代码： #

public class HomeController : Controller
{
    [HttpPost]
    public JsonResult UploadImage(HttpPostedFileBase image)
    {
        try
        {
            if (image != null && image.ContentLength > 0)
            {
                // 处理图片保存逻辑，比如保存到服务器目录或者云存储
                string fileName = Path.GetFileName(image.FileName);
                string savePath = Server.MapPath("~/Uploads/") + fileName;
                image.SaveAs(savePath);
                
                return Json(new { success = true, message = "上传成功" });
            }
            return Json(new { success = false, message = "未选择有效图片" });
        }
        catch (Exception ex)
        {
            return Json(new { success = false, message = ex.Message });
        }
    }
}

2. 利用ModelState保留数据（如果必须用同步提交） #

如果你的业务场景必须用传统的表单同步提交，那可以在后端把TextBox的内容重新放回Model或者ViewBag，返回视图时自动填充。

前端代码（强类型视图示例）： #

@model YourProject.Models.YourViewModel

@using (Html.BeginForm("Upload", "Home", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
    <div>
        <label>输入内容：</label>
        @Html.TextBoxFor(m => m.Content, new { @class = "form-control" })
        @Html.ValidationMessageFor(m => m.Content)
    </div>
    <div>
        <label>上传图片：</label>
        <input type="file" name="image" accept="image/*" />
    </div>
    <button type="submit" class="btn btn-primary">提交</button>
}

后端Controller代码： #

public class HomeController : Controller
{
    [HttpGet]
    public ActionResult Upload()
    {
        return View(new YourViewModel());
    }

    [HttpPost]
    public ActionResult Upload(YourViewModel model, HttpPostedFileBase image)
    {
        // 先处理图片上传逻辑
        if (image != null && image.ContentLength > 0)
        {
            string fileName = Path.GetFileName(image.FileName);
            string savePath = Server.MapPath("~/Uploads/") + fileName;
            image.SaveAs(savePath);
            model.ImagePath = savePath; // 可以把图片路径存到Model里
        }

        // 关键：把输入的Content值保留在ModelState中，返回视图时会自动填充到TextBox
        // 如果你没有用强类型Model，也可以用ViewBag.Content = Request.Form["Content"];
        return View(model);
    }
}

// 对应的ViewModel
public class YourViewModel
{
    public string Content { get; set; }
    public string ImagePath { get; set; }
}

3. 前端本地存储兜底（防止意外刷新） #

可以在用户输入TextBox内容时，把数据临时存在localStorage或者sessionStorage里，页面加载时再读取出来填充，就算意外刷新也能恢复数据。

前端代码示例： #

@Html.TextBox("Content", null, new { @class = "form-control", id = "contentBox" })

<script src="~/Scripts/jquery-3.6.0.min.js"></script>
<script>
    $(function() {
        // 页面加载时，从localStorage读取数据填充到TextBox
        var savedContent = localStorage.getItem("tempContent");
        if (savedContent) {
            $("#contentBox").val(savedContent);
        }

        // 监听TextBox的输入事件，实时保存数据到localStorage
        $("#contentBox").on("input", function() {
            localStorage.setItem("tempContent", $(this).val());
        });

        // 图片上传成功后，可以清空本地存储（可选）
        $("#uploadBtn").click(function() {
            // 上传逻辑...
            localStorage.removeItem("tempContent");
        });
    });
</script>

内容的提问来源于stack exchange，提问作者Engr. Arda