Monthly Archives: December 2011

Calling a server method (asp.net) from the browser

Standard

Sometimes,  you use JQuery within your Asp.Net projects to provide richer and more interactive web experience. The user now can drag and drop, admire your smooth animations, interact in many ways with the page and experience a whole bunch of other funny things. On top of that, you could appreciate how integrating JQuery with ASP.NET projects is pretty straightforward.

Moreover, to get your page to work properly, you sometimes have to  focus on client-sided effects only and to forget about… postbacks ! Your HTML elements then won’t be bound to the server and won’t trigger any postbacks nor be referenced in any aspx class. They will have nothing to do with the viewstate and they won’t notify any data change.  As a consequence, if the user changes the webpage content, some properties or the order of a few elements  through JQuery manipulations, the server won’t be able to retrieve by itself those changes. Let’s stick with our previous example : the dynamic forms (dynamic webforms with JQuery). The user wants to create his own forms. It was all implemented through Javascript and JQuery, adding, dragging, dropping.

>> Could we now save it all to our database thanks to a little Asp.Net method ? which means formatting the data, sending it to the server which will eventually treat it. So how to send back data to  the server ?
>>How to call a server method without the postback mechanism but just with pure raw HTML controls never bound to the server ?
Of course, a simple Ajax call will do the trick !
We’ll see how  to :

  1. build this simple Ajax call to the asp.net server
  2. how to format basic data with JSON
  3. how to format more complex data like serializing and deserializing Javascript-.NET object, even with inheritance. Read the rest of this entry

Dynamic web forms with jquery

Standard

Let’s say you want to enable the user to create his own forms with the fields and the questions of his choice. The user should just choose the fields  from a list  and those fields should be sortable, draggable, deletable so that he can move them, change their order by simply dragging and dropping objects.
Well, see google documents, add new form, something like this, no ? well I can show you the basics with jquery to build dynamic forms.

To sum up, we want a sortable dynamic list of fields. First of all, you need to inject html in the webpage areas you define. Then we will enable sorting and dropping and throwing away.

First, here’s the list from which the user chooses the fields :

<select id="fieldtoadd" style="float:left">
<option value="">add new field...</option>
<option value="text">text</option>
<option value="textarea">multiple line text</option>
<option value="radiobutton">multiple choice</option>
<option value="checkbox">checkbox</option>
<option value="uploadfile">upload a file</option>
</select>

here’s the <div> element where to inject the fields :


<div id="fieldslist" style="float:left"></div>

Read the rest of this entry

Downloading a file within an asp updatepanel

Standard

In this article, we’ll see how to make full page postback controls work in an update panel.
We will then raise the problem of a button field in a gridview cell in an update panel that requires full page postback registration and suggest a workaround.

How basically the update panel works ?

The asp update panel is a native control which performs an asynchronous postback to render selected parts of the webpage. If you already know ajax mechanisms, update panel shouldn’t be mysterious for you. It deals indeed with Ajax and partial-page update to allow richer and more ergonomic web application.

Thus, unlike with a full page postback, a partial page postback sends a request back to the server through client-side script. Only the html markup inside the update panel is updated through Javascript again which deals with the server response to inject the new html content inside the update panel. The update panel waits for the server to return a special snippet of html code in a certain format. While the async request is sent out, update panels wait for this specifically formatted response.

Why my upload or download file function won’t work within an update panel ?

All of the controls placed inside the update panel are converted into partial postback controls. That’s pretty coherent because we want the page to be fast and user-friendly so the nested controls won’t raise a full reload of the page.  But those controls will go on working as long as they don’t need full postback.

But some controls might require full page postback to work, in other words they demand a classic and complete HTTP response to write into, to flush and to end. They won’t stand an async postback with a partial http markup response to inject in the page through JavaScript. What do you need to do then ?

Read the rest of this entry