javascript - getElementById().value 返回未定义

Question

我试图将页面上大量输入的引用存储在 javascript 变量中，以便传递给后端的 webmethod。因为当页面加载时，我的页面仅拉出并用数据填充两个隐藏表单之一，某些输入值是“未定义”的。这会引发一个错误，导致我更新数据库的 web 方法永远不会被调用。

我的一个 javascript 调用示例如下:

const fields = {
                    name: '<%=eventFormName.ClientID%>',
                    type: '<%=eventFormType.ClientID%>',
                    subjectLineSD: '<%=eventFormSubjectLineSD.ClientID%>',
                    summarySD: '<%=eventFormSummarySD.ClientID%>',
                    resourcesAffectedSD: '<%=eventFormResourcesAffectedSD.ClientID%>',
                    peopleAffectedSD: '<%=eventFormPeopleAffectedSD.ClientID%>',
                    workAroundSD: '<%=eventFormWorkAroundSD.ClientID%>',
                    startTimeSD: '<%=eventFormStartTimeSD.ClientID%>',
                    endTimeSD: '<%=eventFormEstimatedTimeOfResolutionSD.ClientID%>',
                    subjectLinePO: '<%=eventFormSubjectLinePO.ClientID%>',
                    summaryPO: '<%=eventFormSummaryPO.ClientID%>',
                    resourcesAffectedPO: '<%=eventFormResourcesBeingChangedPO.ClientID%>',
                    changeBenefitsPO: '<%=eventFormChangeBenefitsPO.ClientID%>',
                    impactOnEndUsersPO: '<%=eventFormImpactOnEndUsersPO.ClientID%>',
                    startTimePO: '<%=eventFormProposedStartDatePO.ClientID%>',
                    endTimePO: '<%=eventFormProposedEndDatePO.ClientID%>',
                }

                const values = Object.keys(fields).map((key) => {
                    const elm = document.getElementById(fields[key])
                    if (elm) {
                        return elm.value;
                    }
                    return null;
                })

                PageMethods.updateData.apply(this, values);

换句话说，我如何允许其中一些变量具有值“未定义”或“null”，然后通过我的 PageMethods 调用传递到我的后端？

另外，这是我在后端的webmethod供引用:

[WebMethod]
    public static string updateData(string[] values)
    {
        try
        {
            SqlCommand command;
            SqlConnection sqlConn = new SqlConnection(ConfigurationManager.ConnectionStrings["DatabaseConnectionString"].ConnectionString);
            command = new SqlCommand("updateNetEvent", sqlConn);

            if (values[1] == "Planned Outage")
            {
                // NetEvent Parameters
                command.Parameters.AddWithValue("@Name", values[0]);
                command.Parameters.AddWithValue("@Type", values[1]);
                command.Parameters.AddWithValue("@SubjectLine", values[9]);
                command.Parameters.AddWithValue("@StartTime", values[14]);
                command.Parameters.AddWithValue("@EndTime", values[15]);

                // UserAction Parameters
                command.Parameters.AddWithValue("@Summary", values[10]);
                command.Parameters.AddWithValue("@ResourcesAffected", values[11]);
                command.Parameters.AddWithValue("@ChangeBenefits", values[12]);
                command.Parameters.AddWithValue("@PeopleAffected", System.Data.SqlTypes.SqlString.Null);
                command.Parameters.AddWithValue("@ImpactOnEndUsers", values[13]);
                command.Parameters.AddWithValue("@WorkAround", System.Data.SqlTypes.SqlString.Null);
                command.Parameters.AddWithValue("@Status", "A");
                command.Parameters.AddWithValue("@PerformedBy", "placeholder"); // TODO: Update
                command.Parameters.AddWithValue("@PerformedOn", DateTime.Now.ToString());
            }
            else if (values[1] == "Service Disruption")
            {
                // NetEvent Parameters
                command.Parameters.AddWithValue("@Name", values[0]);
                command.Parameters.AddWithValue("@Type", values[1]);
                command.Parameters.AddWithValue("@SubjectLine", values[2]);
                command.Parameters.AddWithValue("@StartTime", values[7]);
                command.Parameters.AddWithValue("@EndTime", values[8]);

                // UserAction Parameters
                command.Parameters.AddWithValue("@Summary", values[3]);
                command.Parameters.AddWithValue("@ResourcesAffected", values[4]);
                command.Parameters.AddWithValue("@ChangeBenefits", System.Data.SqlTypes.SqlString.Null);
                command.Parameters.AddWithValue("@PeopleAffected", values[5]);
                command.Parameters.AddWithValue("@ImpactOnEndUsers", System.Data.SqlTypes.SqlString.Null);
                command.Parameters.AddWithValue("@WorkAround", values[6]);
                command.Parameters.AddWithValue("@Status", "A");
                command.Parameters.AddWithValue("@PerformedBy", "placeholder"); // TODO: Update
                command.Parameters.AddWithValue("@PerformedOn", DateTime.Now.ToString());
            }

            command.CommandType = System.Data.CommandType.StoredProcedure;
            sqlConn.Open();
            command.ExecuteNonQuery();
            sqlConn.Close();
            return "./StartPage.aspx";
        }
        catch (Exception ex)
        {
            Console.WriteLine("ERROR: " + ex.ToString());     // Add a log helper to display errors here
            return "Error in updateData WebMethod";
        }

    }

Answer 1

你试图获取不存在的元素，这就是你被抛出的原因。在调用 .value 之前，您需要检查这一点。

var name = null
var nameElement = document.getElementById('<%=eventFormName.ClientID%>');
if (nameElement) {
  name = nameElement.value
}

编辑:

因为你的代码会很困惑，这让我有点困扰。您可以执行下面类似的操作以使事情变得更加动态。将每个属性的值替换为您的 asp 标记，并将您调用 PageMethods.updateData 的方式更新为 PageMethods.updateData.apply(this, value)

const fields = {
  name: 'name',
  type: 'type',
  subjectLineSD: '<%=eventFormSubjectLineSD.ClientID%>',
  summarySD: '',
  resourcesAffectedSD: '',
  peopleAffectedSD: '',
  workAroundSD: '',
  startTimeSD: '',
  endTimeSD: '',
  subjectLinePO: '',
  summaryPO: '',
  resourcesAffectedPO: '',
  changeBenefitsPO: '',
  impactOnEndUsersPO: '',
  starTimePO: '',
  endTimePO: '',
  endTimePO: ''
}

const updateData = function(name, type) {
  console.log(name)
  console.log(type)
}

const values = Object.keys(fields).map((key) => {
  const elm = document.getElementById(fields[key])
  if (elm) {
    return elm.value
  }
  return null
})

updateData.apply(this, values)

<input id="name" value="NAME">
<input id="type" value="TYPE">