Question

我试图在javascript变量中存储对我页面上的大量输入的引用，以传递给我后端的webmethod。因为当页面加载某些输入值时，我的页面只会拉起并填充两个隐藏形式中的一个与数据“未定义”。这会抛出一个错误，导致我的webmethod更新一个永远不会被调用的数据库。

我的一个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);

换句话说，我怎么能允许其中一些变量的值为'undefined'或'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, values)

的方式

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">

Answer 2

您的错误源于尝试获取不在页面上的元素的值。

如果您拨打var name = document.getElementById('foo')，但没有id='foo'的元素，那么变量＆＃39; name＆＃39;一片空白。因此错误Cannot read property 'value' of null

如果您首先设置变量，检查元素是否存在，这可以解决您的问题，例如

var name = document.getElementById('foo') ? document.getElementById('foo').value : null;

getElementById（）。value返回Undefined

2 个答案: