AJAX vs. Server-Side Execution with C# ASP.NET

Question

In my previous web development experience I have used LAMP setups. I am trying to learn the Microsoft way as I develop a project using the following tools:

• ASP.NET 3.5
• C#
• MS Visual Studio 2008

Here is my question: How can I tell when code gets executed on the server versus code that is exectued as javascript?

I have added AJAX functionality to my aspx file using tutorials I found online. I have something like:

ASP:

<asp:ScriptManager />
<asp:UpdatePanel>
    <ContentTemplate>
        <input id="inputItem" type="text" runat="server" />
        <asp:Button id="submitButton" runat="server"
                    OnClick="submitButton_clicked"/>
    </ContentTemplate>
</asp:UpdatePanel>

C#:

protected void submitButton_clicked (object sender, EventArgs e)
{
    // Do dynamic stuff on page.
}

I have been able to successfully update elements on the page without requiring a refresh. It is my understanding that the C# function submitButton_clicked() is automatically converted to javascript by Visual Studio when the web application is built (as well as any functions called by it).

I need to be able to submit the user-supplied data in this form to the server so that I can add it to a database. What I do not understand is how to differentiate between code that is automatically converted to javascript and code that is not. I want to be able to call functions from submitButton_clicked() which use LINQ to perform database operations, and have that code executed server-side.

I have been trying to find some online tutorials which explain this distinction cleary but have had no luck so far. Any help is appreciated.

Answer 1

Your code in the submitButton_clicked function is not converted to javascript, it executes on the server side. The use of the UpdatePanel allows your page to refresh the content of the UpdatePanel via javascript (AJAX) calls to the server, so that the user doesn't experience a full page reload. The server-side code all still runs.

You should insert some breakpoints in your code (the Page_Load, your submitButton_clicked, other places), and watch what happens when the UpdatePanel refreshes. The page will go through its entire life-cycle on the server-side, and the new state will be passed via AJAX to the controls in the UpdatePanel.

Answer 2

If you are coming from a LAMP environment you might feel more comfortable with ASP.NET MVC. It doesn't require you to understand the WebForm pattern and it may give you a feeling of comfort being a PHP developer.

Give it a look, and see how you like it. The worst thing that can happen is that you don't like it.

Answer 3

There are a couple of things to understand here.

button submit behavior .
<asp:Button ID="btn1" runat="server" OnClick="btn1_click" Text="btn" UseSubmitBehavior="false"/>

By default, UseSubmitBehavior is set to true.

1. OnClick="btn1_click" is the event which gets fired when on the server side regardless of whether UseSubmitBehavior is set to true/false

2. when submit behaviour is false, a javascript method is added for the button click, by asp.net onclick="javascript:__doPostBack('btn1','')"

3. if you want to add your own javascript functions on the code behind you can use btn1.Attributes.Add('onclick','yourJS') or if in aspx/ascx side, you can use onClientClick

<asp:Button ID="btn1" runat="server" OnClick="btn1_click" Text="btn" OnClientClick="yourJS"/>

Hope this helps