getElementById(). Wert Rückgabe Undefiniert

Question

Ich versuche, Referenzen auf eine Vielzahl von Eingaben auf meiner Seite in Javascript-Variablen zu speichern, um an eine Webmethode in meinem Backend übergeben zu werden. Da meine Seite nur hochfährt und eines der beiden versteckten Formulare mit Daten füllt, wenn die Seite geladen wird, sind einige der Werte der Eingaben 'undefiniert'. Dies führt zu einem Fehler, der dazu führt, dass meine Webmethode eine nie aufgerufene Datenbank aktualisiert.

Ein Beispiel einer meiner JavaScript-Aufruf ist wie folgt:

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); 

Mit anderen Worten, wie konnte ich für einige dieser Variablen ermöglichen, haben einen Wert ‚undefiniert‘ oder ‚null‘, um dann übergeben werden durch meinen PageMethods Aufruf an mein Backend?

Auch hier ist mein Webmethod auf dem Back-End-Referenz:

[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

Sie versuchen, Elemente zu erhalten, die nicht existieren, das ist, warum Sie geworfen zu bekommen. Sie müssen dies überprüfen, bevor Sie .value anrufen.

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

EDIT:

Weil es mir ein wenig stört, dass Ihr Code würde chaotisch ist. Sie könnten etwas wie folgt tun, um die Dinge etwas dynamischer zu gestalten. Ersetzen Sie die Werte für jede der Eigenschaften mit Ihrem ASP-Tags und zu aktualisieren, wie Sie rufen Sie Ihren PageMethods.updateData zu 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

Ihre Fehler ergibt sich aus versuchen, den Wert eines Elements nicht auf der Seite zu bekommen .

Wenn Sie var name = document.getElementById('foo') aufrufen aber es gibt kein Element mit id='foo' dann ist die Variable 'name' null. Daher der Fehler Cannot read property 'value' of null

Wenn Sie Ihre Variablen zunächst überprüfen, dass das Element vorhanden ist, sollte dies Ihr Problem lösen, z.

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