locked
Understanding the back end (server) and front end (JavaScript) approaches when handling events in a Web Form RRS feed

  • Question

  • User-584397130 posted

    I can start by saying that i have a pretty extensive experience in web application development.

    However, this thing has been bugging me for a while so i thought i should ask.

    Talking about pure ASP.NET Web Forms, and no MVC or Core development just to understand the concept in classic ASP.NET.

    When developing a web application that might contain many page (WebForms), each page has its own life cycle and events, and

    its own html or server controls and their events.

    Now i know about server side validations and client side validation and the benefits of computing stuff at the client first before posting the data to the server 

    and all these things. My question is, what is the best practice of handling events and all initialization of a specific WebForm? and even API calls ?

    To be more detailed, some examples : 

    1.  Button Click - Why should i write a Button_Click event on the server side in the page to capture a button click event over assigning an "addEventListener" in JavaScript ? or the opposite?

    2. CheckBox - Why should i write a Checked_Changed event on the server side in the page over an "addEventListener" in JavaScript ? Opposite?

    3. Dropdown List - Same ? 

    4. API call to initialize some data on the page - Should the API call be in AJAX/JavaScript and populate some element with the data ? Or should the API call be made

    from the back end and loaded through the C# code to the containing element rather than JavaScript? What is a better practice and why?

    There are many other examples that makes me ask those questions about the better practice since both options are possible

    but i can't really see why one is preferred over the other besides on cases like validations, etc'.

    Also, i'm aware of the difference between  HTML controls and ASP.NET server controls, but still wonder about the difference 

    in the usages and better practices. Basically, why and when code should be handled on the page in JavaScript or on the back end C# ? 

    Thanks,

    Maor.

    Tuesday, January 21, 2020 10:41 AM

All replies

  • User475983607 posted

    and all these things. My question is, what is the best practice of handling events and all initialization of a specific WebForm? and even API calls ?

    The answer is simple really.  Web Forms is a framework for building dynamic HTML using events in the code behind and server controls.  You chose Web Forms and therefore you should use tooling that comes with Web Forms first; server controls and the code behind.  JavaScript is generally used to make the user interface more desktop like.  Add JavaScript to make the UI a bit more user friendly. 

    Tuesday, January 21, 2020 12:57 PM
  • User409696431 posted

    Just taking one of your examples:

    "Why should i write a Checked_Changed event on the server side in the page over an "addEventListener" in JavaScript ? "

    Well, do you want to do something on Check_Changed on the server - pass the data to other functions, do something in the database?  Or do you only want to do something on the page in the browser?   If you want what the user does to be known outside the browser's page itself, you need to pass the information back to the server.  That determines how you handle things.

    You can use Ajax calls, if you like, to get and send information back and forth from the server, or the event handlers built into web forms.  Your choice.

    Tuesday, January 21, 2020 5:42 PM
  • User-584397130 posted

    Hey, thanks for the response.

    It kinda helped fixing my confusion and i understand your points about utilizing the actual strength of the framework i'm using.

    Let me add this though, what about reading data like employees list from an API? in MVC we would probably use the controller 

    along with EntityFramework to read the data in the code behind and send the list to the view.

    Is it the same or similar in WebFroms? and if the back end is always the right choice, why ever make an API call from JavaScript?

    Why in general have functions in JavaScript if the back end is the right choice? besides client side validations or making things fly across the page.

    Also, for example if i have a group of 10 CheckBoxes, is it really good to write a click function to each of them in the back end rather then 

    a javascript "addEventListener" ?

    Thanks,

    Maor.

    Tuesday, January 21, 2020 9:49 PM
  • User-584397130 posted

    Thanks for the response, it helped a little.

    So basically when the server needs to do something with the event then it should be on the server, and if it is just something simple

    on the page that doesn't require back end computation i should use JavaScript. 

    About the Ajax calls, given the fact that JavaScript is not secure and can be turned on by malicious users

    or might work differently from one browser to another, if i write all my API calls in JavaScript/Ajax isn't that something that can be shut

    down by shutting down JavaScript? and my events won't be executed and my API calls won't be fired? 

    It seems like doing things on the front end is always more dangerous than on the back end.

    Thanks,

    Maor. 

    Tuesday, January 21, 2020 9:58 PM
  • User475983607 posted

    Maor.Busk

    Let me add this though, what about reading data like employees list from an API? in MVC we would probably use the controller 

    along with EntityFramework to read the data in the code behind and send the list to the view.

    Is it the same or similar in WebFroms? and if the back end is always the right choice, why ever make an API call from JavaScript?

    The Web Forms framework has the [WebMethod] which can be added to a Web Form and behaves similar to a controller action.  It commonly used as an XHR or fetch end point in JavaScript applications. 

    Maor.Busk

    Also, for example if i have a group of 10 CheckBoxes, is it really good to write a click function to each of them in the back end rather then 

    a javascript "addEventListener" ?

    Why do you need an event at all?  Does the event handler contain logic?   Why can't the user can select the check boxes they wish to check and click a submit button? 

    Tuesday, January 21, 2020 10:01 PM
  • User475983607 posted

    It seems like doing things on the front end is always more dangerous than on the back end.

    Again, front end development is typically for the user experience.  The web application behaves more like a desktop application and is more user friendly.  

    It's true that a user can turn off JavaScript.  Doing so will make the user's experience less user friendly than it could be with JavaScript enabled but the configuration is up the user.  XHR and fetch() does not make an application less secure.  Security is in your hands and you should follow standard security practices.

    Tuesday, January 21, 2020 10:20 PM
  • User-584397130 posted

    Your first comment confused me a bit, i know Web Forms have many features, but why use [WebMathod] to turn a Web Form to a controller and not just use MVC?

    I know the XHR object but that thing belongs to JavaScript and Ajax, not the back end. or am i wrong here?

    About your second comment, just for example maybe u want the user to choose days out of the week days and i want

    to add the selected days to another list box or something before i post it to the server, then the event that "listens" to the check boxes

    checked events and responsible on adding each selected item should be where ? simply JavaScript ? or actual back end code ?

    Tuesday, January 21, 2020 10:26 PM
  • User-584397130 posted

    OK, i guess.

    Thanks.

    Tuesday, January 21, 2020 10:28 PM
  • User475983607 posted

    Your first comment confused me a bit, i know Web Forms have many features, but why use [WebMathod] to turn a Web Form to a controller and not just use MVC?

    MVC and Web Forms are frameworks for creating dynamic HTML.  Generally you pick one or the other not both.  

    I know the XHR object but that thing belongs to JavaScript and Ajax, not the back end. or am i wrong here?

    XHR sends HTTP requests to a web server.  I have no idea what back-end means to you.

    About your second comment, just for example maybe u want the user to choose days out of the week days and i want

    to add the selected days to another list box or something before i post it to the server, then the event that "listens" to the check boxes

    checked events and responsible on adding each selected item should be where ?

    I don't understand your point.  The browser lets the user select whatever checkbox they wish.  Then the user is done making selections they can click a submit button which sends the selections to the web application.  Again, can you explain why you need an event?  What does the event code do?

    Wednesday, January 22, 2020 1:57 AM