0

I have an ASP.NET Page with a dropdownlist control - I want to eliminate a post back so I have wired the onclient change event to a js function. Since this drop down feeds a lot of controls with data, I am sending the JS an array of clientIds and the associated JSON field name from the returned data (which is acquired via a WebMethod call which returns JSON data for the record).

Below is just a subset of the amount of clientIds I am dealing with (probably 25 total)

c#

protected override void OnRegisterScript()
{
  UxSellerShareholderDdl.OnChange =
      $"SellerShareholder_OnChange(this,{getAllClientIds()});";
}
protected struct ClientId
{
  public string fieldName;
  public string clientId;
}
protected string getAllClientIds()
{
  List<ClientId> ids = new List<ClientId>();
  ids.Add(new ClientId{fieldName = "StreetAddress", clientId = SAddresslbl.ClientID});
  ids.Add(new ClientId{fieldName = "PostalCode",    clientId = SZiplbl.ClientID});
  ids.Add(new ClientId{fieldName = "ContactName",   clientId = SMainContactlbl.ClientID});
  return new jsonScriptSerializer().Serialize(ids);
}

javascript

function SellerShareholder_OnChange(ddl, ctrlList) {
  waitOn();
  PageMethods.UpdateShareholderInfo(GetSelectedOptionValue(ddl), onSuccess, onError);

  function onSuccess(result) {
    const data = JSON.parse(result);
    console.log(data);        
    for(let i = 0; i < ctrlList.length; i++) {
      let obj = ctrlList[i];
      let fld = obj.fieldName;
      if (fld === "PostalCode") {
        var id       = document.getElementById(obj.clientId);
        var idhdn    = document.getElementById(obj.clientId+"hdn");
        idhdn.value  = data.PostalCode;
        id.innerHTML = data.PostalCode;
      }
      if (fld === "StreetAddress") {
        var id       = document.getElementById(obj.clientId);
        var idhdn    = document.getElementById(obj.clientId+"hdn");
        idhdn.value  = data.StreetAddress;
        id.innerHTML = data.StreetAddress;
      }
      if (fld === "ContactName") {
        var id       = document.getElementById(obj.clientId);
        var idhdn    = document.getElementById(obj.clientId+"hdn");
        idhdn.value  = data.ContactName;
        id.innerHTML = data.ContactName;
      }
    }
    waitOff();
  }

  function onError(result) {
    waitOff();
    alert('Something wrong.');
  }
}

Instead of all the fld === "Address" then ctrl.innerHTML = data.Address can this be simplified in the loop to do something like ctrl.innerHTML = data.{fld} (so it equates to data.Address)?

Are there better ways in general to achieve what I am trying to accomplish here?

Mister Jojo
  • 20,093
  • 6
  • 21
  • 40
Michael Persson
  • 3
  • 1
  • 2
    [Bracket notation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Property_accessors#bracket_notation). `data[fld]` – pilchard Jul 15 '23 at 16:55
  • https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Basics – jonrsharpe Jul 15 '23 at 16:55

1 Answers1

1

You can use the bracket notation:

object.property is semantically equivalent in general to object["property"] in JS and other dynamic languages (such as Python). The first is called dot notation, while the second, bracket notation. Take a look on this article for more info on it.

Furthermore, you can do:

idhdn.value = data[fid];

To give an example with a value, if for instance fid is StreetAddress, this will do:

idhdn.value = data["StreetAddress"];

Kudos to @pilchard for mentioning bracket notation to comments. This is the full, detailed answer.

Update: possible duplicate of this question.

Nick Louloudakis
  • 5,856
  • 4
  • 41
  • 54