如何通过JavaScript将购物车的ChefFoodIds列表传递至Login方法？

以下是针对问题的排查步骤和解决方案：

1. 确认模态框回调中正确定位并设置隐藏字段 #

异步加载登录视图后，可能存在元素选择失败的情况。在回调中添加日志验证元素是否存在、赋值是否成功：

$('#Login').find('.modal-content').load('/Account/Login', function () {
    var chefFoodIdsStored = localStorage.getItem('chefFoodIds');
    var chefFoodIdsArray = chefFoodIdsStored ? JSON.parse(chefFoodIdsStored) : [];
    var chefFoodIdsString = chefFoodIdsArray.join(',');
    
    // 验证元素是否存在
    var hiddenField = $('#hidden-chefFoodIds');
    console.log('找到hidden-chefFoodIds元素:', hiddenField.length > 0);
    console.log('待设置的ChefFoodIds值:', chefFoodIdsString);
    
    hiddenField.val(chefFoodIdsString);
    $('#hidden-returnUrl').val(returnUrl);
});

2. 排查localStorage是否被意外清除 #

检查登录流程中是否有其他脚本清除了chefFoodIds数据。在登录表单提交前添加日志验证：

// 监听登录表单提交事件
$(document).on('submit', 'form[action="@Url.Action("Login", "Account")"]', function() {
    var storedIds = localStorage.getItem('chefFoodIds');
    console.log('登录提交时localStorage中的chefFoodIds:', storedIds);
    console.log('隐藏字段当前值:', $('#hidden-chefFoodIds').val());
});

3. 确保后端参数与前端表单字段匹配 #

后端Login方法的参数名称需与前端表单的name属性一致（ASP.NET MVC虽支持大小写不敏感，但严格匹配更可靠）：

[HttpPost]
public ActionResult Login(string Email, string Password, string ChefFoodIds, string ReturnUrl)
{
    // 登录逻辑处理
    if (!string.IsNullOrEmpty(ChefFoodIds) && Url.IsLocalUrl(ReturnUrl))
    {
        // 登录成功后携带ChefFoodIds跳转至购物车
        return Redirect($"{ReturnUrl}?chefFoodIds={ChefFoodIds}");
    }
    // 其他逻辑
}

4. 验证模态框内表单的渲染完整性 #

在浏览器开发者工具的Elements标签中查看模态框HTML结构，确认#hidden-chefFoodIds存在且属于登录表单内部，避免异步加载导致的结构异常。

可选优化：改用URL参数传递（绕过localStorage潜在问题） #

将ChefFoodIds直接作为参数传递到登录视图的加载URL中，避免依赖localStorage：

var chefFoodIdsStored = localStorage.getItem('chefFoodIds');
var chefFoodIdsArray = chefFoodIdsStored ? JSON.parse(chefFoodIdsStored) : [];
var chefFoodIdsString = chefFoodIdsArray.join(',');
var encodedReturnUrl = encodeURIComponent(returnUrl);

// 修改加载URL，携带参数
$('#Login').find('.modal-content').load(`/Account/Login?ChefFoodIds=${encodeURIComponent(chefFoodIdsString)}&ReturnUrl=${encodedReturnUrl}`, function () {
    // 若后端在视图中直接赋值，此处无需额外操作
});

在登录视图中直接从URL参数赋值隐藏字段：

<input type="hidden" id="hidden-chefFoodIds" name="ChefFoodIds" value="@Request.QueryString["ChefFoodIds"]"/>
<input type="hidden" id="hidden-returnUrl" name="ReturnUrl" value="@Request.QueryString["ReturnUrl"]"/>

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