ASP.NET MVC5视图中判断文本框ID是否已设置及值保存方法

嘿，我来给你捋捋在ASP.NET MVC5视图里怎么处理文本框的ID值判断和保存——这事儿我之前做项目的时候常碰到，分前端验证判断、后端接收保存，还有不同场景的存储方式，给你拆解清楚：

这里分两种常见方式：实时客户端验证，或者借助MVC的DataAnnotations自动生成验证。

1. 手写JavaScript/jQuery验证（灵活可控） #

首先给文本框加明确的ID和name属性（方便前端获取和后端绑定）：

<input type="text" id="txtId" name="Id" placeholder="请输入ID" />

原生JavaScript实现提交前验证 #

写个简单的校验函数，在表单提交时触发：

function validateIdInput() {
    const idInput = document.getElementById('txtId');
    const idValue = idInput.value.trim();
    
    if (!idValue) {
        alert('请输入有效的ID值！');
        idInput.focus(); // 让光标回到文本框
        return false; // 阻止表单提交
    }
    // 如果需要验证ID格式（比如必须是数字），可以加这步
    if (isNaN(idValue)) {
        alert('ID必须是数字哦！');
        idInput.focus();
        return false;
    }
    return true;
}

然后给表单绑定这个函数：

<form onsubmit="return validateIdInput()">
    <!-- 其他表单元素 -->
    <button type="submit">提交</button>
</form>

jQuery实现（更简洁） #

如果你的项目已经引入了jQuery，用这个更省心：

$('#yourForm').submit(function(e) {
    const idVal = $('#txtId').val().trim();
    
    if (!idVal || isNaN(idVal)) {
        e.preventDefault(); // 阻止默认提交行为
        alert(idVal ? 'ID必须是数字格式！' : '请输入ID值！');
        $('#txtId').focus();
    }
});

2. 用MVC的DataAnnotations自动验证（高效） #

如果用强类型视图，直接在模型里加验证特性，MVC会自动生成前端验证脚本：
首先定义模型：

public class MyModel
{
    [Required(ErrorMessage = "请输入ID")]
    [RegularExpression(@"^\d+$", ErrorMessage = "ID必须是数字")]
    public string Id { get; set; }
    // 其他属性...
}

然后在视图里用强类型辅助方法：

@model YourNamespace.MyModel

@using (Html.BeginForm())
{
    @Html.LabelFor(m => m.Id)
    @Html.TextBoxFor(m => m.Id)
    @Html.ValidationMessageFor(m => m.Id) <!-- 自动显示错误提示 -->
    <button type="submit">提交</button>
}

记得在_Layout.cshtml里引入MVC的验证脚本（默认模板一般已经加了）：

<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>

这样用户输入为空或者格式不对时，会自动弹出提示，不用自己写太多JS。

根据你的使用场景，有几种不同的存储方式：

1. 提交到后端持久化（最常用） #

后端接收并保存到数据库 #

控制器里的Post Action直接接收模型，验证通过后保存到数据库：

[HttpPost]
public ActionResult SaveId(MyModel model)
{
    if (ModelState.IsValid)
    {
        // 示例：保存到数据库（假设你有DbContext）
        var entity = new MyEntity { Id = model.Id };
        db.MyEntities.Add(entity);
        db.SaveChanges();
        
        // 保存成功后跳转到其他页面
        return RedirectToAction("Index");
    }
    // 验证失败，返回原视图显示错误
    return View(model);
}

后端临时存储（跨Action使用） #

如果只是临时在后端多个Action之间传递ID，可以用Session或者TempData：

• Session：只要会话不结束就一直存在

Session["CurrentId"] = model.Id;

后续在其他Action里取：

var savedId = Session["CurrentId"] as string;
if (!string.IsNullOrEmpty(savedId))
{
    // 做后续操作
}

• TempData：只能读取一次，适合跳转后一次性使用

TempData["SavedId"] = model.Id;
return RedirectToAction("NextPage");

在NextPage的视图里取：

@{
    var savedId = TempData["SavedId"] as string;
    if (savedId != null)
    {
        <p>刚才保存的ID是：@savedId</p>
    }
}

2. 前端本地存储（不提交后端，同一页面或跨页面使用） #

如果不需要后端参与，只是前端页面内或跨页面复用ID，可以用：

• 全局变量：同一页面内随时取用

let currentId = '';

// 比如用户输入完成后保存
$('#txtId').blur(function() {
    const val = $(this).val().trim();
    if (val) currentId = val;
});

// 后续使用
function doSomething() {
    if (currentId) {
        console.log('当前ID：', currentId);
    }
}

• localStorage：浏览器本地持久化，关闭浏览器后还存在

// 保存
localStorage.setItem('savedId', $('#txtId').val().trim());
// 读取
const id = localStorage.getItem('savedId');

• sessionStorage：会话级存储，浏览器关闭后消失

sessionStorage.setItem('savedId', $('#txtId').val().trim());
const id = sessionStorage.getItem('savedId');

• 如果ID是整数类型，模型里直接用int类型，MVC会自动验证是否为有效数字，不用自己写正则。
• 前端验证只是辅助，后端必须再做一次验证，防止恶意绕过前端直接提交非法数据。

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