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 preffered.

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)

Each devexpress webform control has some client control name, which is used from javascript e.g.

  <dx:ASPxHiddenField ClientInstanceName="hiddenInput" ....
  

Then the hidden input can be accessed from javascript as global object hiddenInput. There are special situations for control inside tabs. For correct reference this inner tab controls from more tabs in javascript, it's necessary don't use ClientInstanceName from markup and use dynamic client instance name initialization inside code behind

e.g.

 protected void Page_Load(object sender, EventArgs e) {
    hiddenInput.ClientInstanceName = "fhAddFormInfo" + fuelId;
 }   

Example: bug in fuel administration for more tabs with fuel types PR

Event when the controls are initialized - Webforms master page

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.

Event when the controls are initialized - MVC master page

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.

Protank Dynamics web application is supported for Internet Explorer 11 browser. There are some troubles with it. E.g. Syntax error in some JavaScript stops execution of following JavaScript calls.

Recommendation for debugging web app in in IE

• Disable or remove all Addons from browser
• Use development tools via F12 in own non-docked windows.
• Stop showing log messages in Console, there is a lot of messages from Identity Server. It's possible only via left mouse button menu in Console - menu Item 'Log'.
• Try to find errors in Console first, specially for JavaScript syntax errors, exceptions etc.
• Don't select JavaScript file for debugging via search for file by name - left top corner - it's very slow and all Development Tools stop working.
• Has debugger unconnected (menu Debugger, icon of plug point) whenever possible. It slows down all tools a lot. Connect debugger only if necessary.

Task which fixes some IE troubles

• BC compatible Javascrit PR
• IE compatible CSS commit