使用Ajax提交表单仅保存动态输入部分数据的问题求助

你推测的原因完全正确——Ajax的异步特性导致触发回发时，部分数据还没完成服务器端的Session存储。另外还发现一个隐藏的严重问题：服务器端的dynamicInputs是静态字典，这会导致多用户访问时数据互相覆盖，也是数据随机丢失的潜在元凶。下面分两部分给出具体解决办法：

一、解决Ajax异步请求未完成就触发回发的问题 #

当前代码中，你在循环调用异步的PageMethods.PassDataToServer后，立刻调用CallDataPassedEvent触发回发，这时候大部分异步请求还在等待服务器响应，根本没把数据存入Session。我们需要等所有异步请求都完成后，再触发回发。

修改JavaScript代码：用Promise跟踪所有异步请求 #

首先改造CallPassDataToServer，让它返回一个Promise，这样我们可以跟踪每个请求的完成状态：

// 改造为返回Promise的异步调用
function CallPassDataToServer(id, clientData) {
  return new Promise((resolve, reject) => {
    PageMethods.PassDataToServer(id, clientData, resolve, reject);
  });
}

然后修改MultipleDataPassToServer，收集所有异步请求的Promise，等全部完成后再调用CallDataPassedEvent：

function MultipleDataPassToServer(listIDs, selectListIDs, save) {
  let allPromises = []; // 存储所有异步请求的Promise

  if (listIDs != null) {
    for (var i = 0; i < listIDs.length; i++) {
      // 把每个Transfer函数的Promise加入数组
      allPromises.push(TransferInputDataToHiddenField(listIDs[i]));
    }
  }
  if (selectListIDs != null) {
    for (var i = 0; i < selectListIDs.length; i++) {
      allPromises.push(TransferSelectInputDataToHiddenField(selectListIDs[i]));
    }
  }

  // 等待所有异步请求完成后，再触发数据传递完成事件
  Promise.all(allPromises)
    .then(() => {
      CallDataPassedEvent(save);
    })
    .catch(error => {
      console.error("部分数据传输失败:", error);
      // 这里可以添加错误提示逻辑，比如弹出提示框告知用户
    });
}

同时修改TransferInputDataToHiddenField和TransferSelectInputDataToHiddenField，让它们返回Promise：

function TransferInputDataToHiddenField(id) {
  var inputElements = document.getElementsByName("input" + id);
  var inputValues = "";
  for (var i = 0; i < inputElements.length; i++) {
    inputValues += inputElements[i].value;
    if (i != inputElements.length - 1) {
      inputValues += "|";
    }
  }
  return CallPassDataToServer(id, inputValues); // 返回Promise
}

function TransferSelectInputDataToHiddenField(id) {
  var inputElements = document.getElementsByName("input" + id);
  var selectElements = document.getElementsByName("select" + id);
  var inputValues = "";
  for (var i = 0; i < inputElements.length; i++) {
    if ($(selectElements[i]).val() == "Custom") {
      inputValues += $('#' + id + "Custom" + i).val() + "=";
    } else {
      inputValues += selectElements[i].value + "=";
    }
    inputValues += inputElements[i].value;
    if (i != inputElements.length - 1) {
      inputValues += "|";
    }
  }
  return CallPassDataToServer(id, inputValues); // 返回Promise
}

这样就能保证所有数据都成功传递到服务器并存入Session后，才触发回发操作。

二、解决服务器端静态字典的多用户冲突问题 #

你的dynamicInputs是静态变量，这意味着所有访问该页面的用户都会共享这个字典，当多个用户同时保存数据时，会互相覆盖对方的内容，这也是数据随机丢失的重要原因。必须把这个字典存储到用户的Session中，而不是用静态变量。

修改C#服务器端代码： #

[System.Web.Services.WebMethod(EnableSession = true)] // 必须添加EnableSession=true才能访问Session
public static string PassDataToServer(String id, String clientData) {
  // 从Session获取当前用户的动态输入字典，不存在则创建
  Dictionary<string, string> dynamicInputs = HttpContext.Current.Session["ProfileDynamicInputs"] as Dictionary<string, string>;
  if (dynamicInputs == null) {
    dynamicInputs = new Dictionary<string, string>();
    HttpContext.Current.Session["ProfileDynamicInputs"] = dynamicInputs;
  }

  if (!dynamicInputs.ContainsKey(id))
    dynamicInputs.Add(id, clientData);
  else
    dynamicInputs[id] = clientData;
  
  return "Debug - Data Passed : " + clientData;
}

[System.Web.Services.WebMethod(EnableSession = true)]
public static void CallEventDataPassed(String menu) {
  System.Web.HttpContext.Current.Session["AccountSave"] = menu;
  // 这里不需要再把dynamicInputs存入Session了，因为上面已经实时存在Session里了
}

同时，在SaveData方法中，直接从Session获取字典：

protected void SaveData(string menu) {
  Dictionary<string, string> dynamicInputs = Session["ProfileDynamicInputs"] as Dictionary<string, string>;
  if (dynamicInputs == null) {
    // 处理数据为空的情况，比如提示用户数据未正常传输
    return;
  }

  switch (menu) {
    case "all":
    case "profile":
      SaveProfileData(dynamicInputs); // 把字典传入保存方法，方便获取对应数据
      break;
    // 其他case...
  }

  // 保存完成后可以清空Session里的临时数据，避免下次操作干扰
  Session["ProfileDynamicInputs"] = null;
  Session["AccountSave"] = null;
}

这样每个用户的动态数据都会独立存储在自己的Session中，不会互相干扰。

额外优化建议 #

• 在触发回发前，可以给页面添加加载提示（比如遮罩层+加载动画），避免用户重复点击；
• 为PageMethods添加全局错误处理，方便调试异步请求的失败原因；
• 考虑把多个动态输入的合并数据格式改成JSON，比用|和=分割更易解析和维护。

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