ASP.NET Core MVC with Razor：如何在不清除用户已输入数据的情况下重新填充视图模型？

这个需求太典型了！我之前做生鲜订单系统的时候完全遇到过一样的问题——用户填了一半订单，想加载客户信息又怕把已经填的内容弄没。下面给你两个实际项目里验证过的方案，你可以根据情况选：

方案一：用AJAX异步加载+局部更新（推荐，无刷新体验好） #

这种方式不用整页提交，只请求需要的客户数据，然后前端只更新对应的输入框，完全不会碰用户已经填好的水果类型、数量这些字段。

步骤&代码示例 #

首先是Razor视图里的表单结构（用标签助手更方便）：

<form id="fruitOrderForm">
    @* 防跨站请求伪造的令牌，AJAX请求需要带上 *@
    @Html.AntiForgeryToken()

    <div class="form-group">
        <label asp-for="ClientId"></label>
        <input asp-for="ClientId" class="form-control" placeholder="输入客户ID" />
    </div>
    <button type="button" id="loadClientBtn" class="btn btn-primary">加载客户信息</button>

    <hr />

    <div class="form-group">
        <label asp-for="ClientName"></label>
        <input asp-for="ClientName" class="form-control" readonly />
    </div>
    <div class="form-group">
        <label asp-for="ClientEmail"></label>
        <input asp-for="ClientEmail" class="form-control" readonly />
    </div>

    <hr />

    <div class="form-group">
        <label asp-for="FruitType"></label>
        <input asp-for="FruitType" class="form-control" placeholder="比如：草莓、苹果" />
    </div>
    <div class="form-group">
        <label asp-for="FruitNumber"></label>
        <input asp-for="FruitNumber" class="form-control" placeholder="购买数量" />
    </div>
</form>

然后是视图底部的JavaScript，处理按钮点击事件：

document.addEventListener('DOMContentLoaded', function() {
    const loadBtn = document.getElementById('loadClientBtn');
    loadBtn.addEventListener('click', async function() {
        const clientIdInput = document.getElementById('ClientId');
        const clientId = clientIdInput.value.trim();

        if (!clientId) {
            alert('请先输入有效的客户ID哦');
            clientIdInput.focus();
            return;
        }

        try {
            // 准备请求参数和头部
            const token = document.querySelector('input[name="__RequestVerificationToken"]').value;
            const response = await fetch('/Users/GetClientInfo', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'RequestVerificationToken': token
                },
                body: JSON.stringify({ clientId: clientId })
            });

            if (response.ok) {
                const clientData = await response.json();
                // 只更新客户姓名和邮箱输入框，其他字段完全不动
                document.getElementById('ClientName').value = clientData.name;
                document.getElementById('ClientEmail').value = clientData.email;
            } else {
                alert('加载客户信息失败了，可能是ID不对，再检查下？');
            }
        } catch (err) {
            console.error('请求出错:', err);
            alert('加载时出了点小问题，稍后再试吧');
        }
    });
});

接下来是控制器里的Action，负责返回客户数据：

// 首先定义一个接收请求的小模型
public class ClientIdRequest
{
    public string ClientId { get; set; }
}

public class UsersController : Controller
{
    private readonly IClientApiService _clientApiService;

    // 假设你已经通过依赖注入注入了调用客户API的服务
    public UsersController(IClientApiService clientApiService)
    {
        _clientApiService = clientApiService;
    }

    [HttpPost]
    public IActionResult GetClientInfo([FromBody] ClientIdRequest request)
    {
        if (string.IsNullOrEmpty(request.ClientId))
        {
            return BadRequest("客户ID不能为空");
        }

        // 调用外部API获取客户信息
        var clientInfo = _clientApiService.GetClientById(request.ClientId);
        if (clientInfo == null)
        {
            return NotFound("未找到该客户的信息");
        }

        // 只返回需要的字段，减少数据传输
        return Json(new 
        { 
            name = clientInfo.FullName, 
            email = clientInfo.ContactEmail 
        });
    }

    // 你的Add视图Action
    [HttpGet]
    public IActionResult Add()
    {
        return View(new FruitOrderViewModel());
    }
}

方案二：整页提交+模型字段合并（适合不想写JS的场景） #

如果你的项目不想引入太多AJAX逻辑，也可以用传统的整页提交，但关键是在控制器里保留用户已经输入的字段值，只更新客户相关的字段。

步骤&代码示例 #

首先是视图里的表单，注意按钮是type="submit"，表单提交到Add的POST Action：

<form asp-action="Add" method="post">
    <div class="form-group">
        <label asp-for="ClientId"></label>
        <input asp-for="ClientId" class="form-control" />
        <button type="submit" asp-route-loadClient="true" class="btn btn-secondary mt-1">加载客户信息</button>
    </div>

    <div class="form-group">
        <label asp-for="ClientName"></label>
        <input asp-for="ClientName" class="form-control" />
    </div>
    <div class="form-group">
        <label asp-for="ClientEmail"></label>
        <input asp-for="ClientEmail" class="form-control" />
    </div>

    <div class="form-group">
        <label asp-for="FruitType"></label>
        <input asp-for="FruitType" class="form-control" />
    </div>
    <div class="form-group">
        <label asp-for="FruitNumber"></label>
        <input asp-for="FruitNumber" class="form-control" />
    </div>

    <button type="submit" class="btn btn-primary mt-3">提交订单</button>
</form>

然后是控制器的POST Action，核心是不要重新实例化模型，而是基于用户提交的模型，只更新客户字段：

public class UsersController : Controller
{
    private readonly IClientApiService _clientApiService;

    public UsersController(IClientApiService clientApiService)
    {
        _clientApiService = clientApiService;
    }

    [HttpPost]
    public IActionResult Add(FruitOrderViewModel model, bool loadClient = false)
    {
        if (loadClient && !string.IsNullOrEmpty(model.ClientId))
        {
            // 只在用户点击"加载客户信息"时才调用API
            var clientInfo = _clientApiService.GetClientById(model.ClientId);
            if (clientInfo != null)
            {
                // 关键：只更新客户相关字段，保留用户已经填的FruitType和FruitNumber
                model.ClientName = clientInfo.FullName;
                model.ClientEmail = clientInfo.ContactEmail;
            }
            else
            {
                ModelState.AddModelError(string.Empty, "未找到该客户的信息");
            }
        }

        // 返回视图时，模型里已经包含了用户原来的输入和新的客户数据
        return View(model);
    }
}

这里要注意：用asp-route-loadClient="true"给按钮加一个路由参数，告诉控制器这次提交是为了加载客户信息，不是提交订单。这样就能区分两种提交场景。

最后提醒 #

不管用哪种方案，都要确保你的视图模型（比如FruitOrderViewModel）包含所有需要的字段：

public class FruitOrderViewModel
{
    public string ClientId { get; set; }
    public string ClientName { get; set; }
    public string ClientEmail { get; set; }
    public string FruitType { get; set; }
    public int FruitNumber { get; set; }
}

个人更推荐第一种AJAX方案，因为用户填表单的过程不会被打断，体验流畅很多，尤其是用户输入内容比较多的时候。

内容来源于stack exchange