Some pages are as webforms (*.aspx), or webforms controls (*.ascx). For both Id element attributes are very necessary. These are mostly as properties in code behind.

  <asp:Label runat="server" ID="lblRom" meta:resourcekey="lblRomResource1" Text="ROM: "></asp:Label>

Most components are from devexpress package

  <dx:ASPxComboBox Width="100%" ID="ddPHMDivisionSelect" runat="server"
     DataSourceID="DSPHMDivision" ValueField="Item1" TextField="Item2" Text='<%# Bind("DivisionIdText") %>'>
  </dx:ASPxComboBox>

Data for controls are bound to particular (mostly static) class and method mostly via DataSourceID attributes, for our comboBox above, definition for data source class is

  <asp:ObjectDataSource ID="DSPHMDivision" runat="server"
     SelectMethod="GetDivisionsDS" TypeName="PSAS.Business.PHM.CacheManager">
  </asp:ObjectDataSource>
  

Webforms has some limited html like markup for e.g. conditions, call methods e.g. Component usage is prefered.

Examples:

Gridview with edit form with hidden field for special usage of updating, inserting rows. Input in row without binding - [PR](https://protank.visualstudio.com/_git/PD/pullrequest/1361?_a=files)

All elements with their names are processed by some devexpress global JS and these are in accessible in JS a global variables. Sometimes, devexpress controls are in DOM (via server sider rendering) condtionally. It's necessary use check for checking of undefined type.

Fo ajax forms, it's necessary to preserve correct binding for server side calls. HTML elements names must be same as properties on serve side. When the name of DevExpress control is changed e.g. DevExpressConrol.Name property for combo box in Razor/HTML. It's necessary use other field - mostly hidden field - to store value of original control. This hidden field value must be updated when original combo box value is changed, mostly via DevExpress change event. Example fix for road office.

Calling the API: there is some controllers on server side. It's necessary to make changes in DTOs on server and client.

• makes the changes on server side first (some DTOs)
• build the assembly
• call NSwaggerStudio, load the config from Application/PSASWeb/Areas/API (e.g. CoreServiceNSwagConfig)
• regenerate C#, typescript clients
• call the clients from the mobx state objects

Most of src is Application/PSASWeb/React/src: stores - for states and business logic, components, for components. TSX files are mostly for html. For hot reloading is necessary in this dir call npm run dev. npm run build-dev builds files. In browser, source map works, try to CTRL + SHIFT + f for searching function/method call. Sometimes it's necessary to call `npm install` mostly when builds return error message about missing package e.g.

  ERROR in ./src/node_modules/pd-client-controls/PDFormElements/PDMaskedInput.tsx
  Module not found: Error: Can't resolve 'react-maskedinput'

• All event processing is through event component props which update mobx state via actions. Some actions are called only via one method. So copy state object is necessary.
• Form validation is according refs. Input components needs to have 'ref' prop, 'required' prop, and validate prop for own validation

See some react related tasks for more information and examples.