ASP.NET MVC中如何展示Ajax请求数据并实现字段自动填充

1. 视图（View）代码 #

先搭建表单结构，包含ID输入框及需要填充的关联字段：

<form>
    <div>
        <label>ID:</label>
        <input type="text" id="txtId" name="Id" />
    </div>
    <div>
        <label>姓名:</label>
        <input type="text" id="txtName" name="Name" readonly />
    </div>
    <div>
        <label>邮箱:</label>
        <input type="text" id="txtEmail" name="Email" readonly />
    </div>
    <div>
        <label>地址:</label>
        <input type="text" id="txtAddress" name="Address" readonly />
    </div>
</form>

<!-- 引入jQuery，确保项目中存在对应脚本文件 -->
<script src="~/Scripts/jquery-3.6.0.min.js"></script>

2. Ajax请求代码 #

在视图中添加脚本，监听ID输入框的失去焦点事件，发送请求到控制器获取数据：

$(document).ready(function () {
    $('#txtId').blur(function () {
        var id = $(this).val();
        if (id.trim() === "") return;

        $.ajax({
            url: '@Url.Action("GetDataById", "Home")', // 替换为你的控制器及Action名称
            type: 'GET',
            data: { id: id },
            success: function (response) {
                if (response) {
                    // 将返回数据填充到对应字段
                    $('#txtName').val(response.Name);
                    $('#txtEmail').val(response.Email);
                    $('#txtAddress').val(response.Address);
                } else {
                    alert('未找到对应数据');
                    // 清空字段
                    $('#txtName').val('');
                    $('#txtEmail').val('');
                    $('#txtAddress').val('');
                }
            },
            error: function () {
                alert('请求失败，请稍后重试');
            }
        });
    });
});

3. 控制器（Controller）代码 #

创建对应的Action方法，接收ID参数，查询数据并返回JSON格式结果：

public class HomeController : Controller
{
    // 模拟数据库数据，实际项目替换为真实查询逻辑
    private List<Customer> GetCustomerList()
    {
        return new List<Customer>
        {
            new Customer { Id = 1, Name = "张三", Email = "zhangsan@example.com", Address = "北京市朝阳区" },
            new Customer { Id = 2, Name = "李四", Email = "lisi@example.com", Address = "上海市浦东新区" }
        };
    }

    public JsonResult GetDataById(int id)
    {
        var targetCustomer = GetCustomerList().FirstOrDefault(c => c.Id == id);
        return Json(targetCustomer, JsonRequestBehavior.AllowGet);
    }
}

// 实体类，根据业务需求调整字段
public class Customer
{
    public int Id { get; set; }
    public string Name { get; set; }
    public string Email { get; set; }
    public string Address { get; set; }
}

注意事项 #

• 确保项目中已正确引入jQuery库，版本选择稳定版即可。
• ASP.NET Core版本中返回JSON无需添加JsonRequestBehavior.AllowGet参数。
• 实际开发中，将模拟数据部分替换为EF Core或其他ORM的数据库查询代码。
• 若需要按回车键触发查询，可将blur事件替换为keyup并判断按键：

$('#txtId').keyup(function (e) {
    if (e.keyCode === 13) {
        // 此处放置Ajax请求代码
    }
});

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