One way is to put your controls in update panel and update them with other control’s asynchronous post back. Sometime it is good sometimes it is not a very good idea. I will give you an example. I had a task where I had to develop a collapsible panel after reading from data from database. The count of this collapsible panel was dependent on data rows coming back from database according to user selection. At first I thought of using ASP .NET collapsible panel extender control and found out how to do it. But soon I realized that this is going to give me a performance issue as the number of rows start increasing. Even if I put that in a “Datalist” control and if I get 50 data rows virtually I will be creating 100 panels on the page. So I dropped that idea and came up with something else.
SETP - 1 (Creating a web service)
Creating a web service was never easier than this when you are having Visual studio. First let’s open Visual Studio and go to menu then click on create and then select a new web service. Name your web service whatever you want. Once your web service gets created it comes with inbuilt Hello world web method if you want to keep you can else remove it and create your own web method which access databases and returns some result.
But before we go ahead and do that let me add one line at the top of my web service which is:
public static string GetHints(string type)
List<string> Results = new List<string>();
DbConnection _Conn = GetDBConnection();
DbCommand _Cmd = _Conn.CreateCommand();
_Cmd.CommandText = "sp_GetHints";
_Cmd.CommandType = CommandType.StoredProcedure;
_Cmd.Parameters.Add(new SqlParameter("@Param", SqlDbType.VarChar, 50));
_Cmd.Parameters["@Param"].Value = type;
DbDataReader _Reader = _Cmd.ExecuteReader();
Results.Add(_Reader["ID"].ToString() + " - " + _Reader["Name"].ToString());
_Hints = Results.ToArray();
This method takes one argument which is type and fetches results back. To give you little bit idea about the returning result let me describe it as below. When I pass “USER” as a parameter to the web service it will return me something like this.
SAD – Super Admin
MDR – Moderator
CTM – Content moderator
This result was to be displayed to the user when he/she is a super admin and is adding new users to his system and assigning roles to them. These values are displayed in a drop down and when this drop down is get focused we have to display above hints to the right hand side of the drop down for user preferences. Think of a user, how surprised he/she would be to see this hints being displayed without even clicking a single button or without deviating from what he is doing. Ok so now you have the idea what is the result of the web method is and how result has to be displayed to the page let’s start with the hard part now.
<asp:ScriptManager id="ScriptManager1" runat="server">
<asp:ServiceReference Path="~/ParameterService.asmx" />
var test = param;
Well it’s as simple as it seems we are just calling a method and passing parameter from the page’s control to this function and calling a web method by referencing its Namespace.Webservicename.Webmethod.
You must have noticed two more things which are “OnWSRequestComplete”, “OnWSRequestFailed”. These are the names of the method once the web service is called and we have received some response from our web service either result or error. If there is any error the second method is called if the call was successful first method will be called.
Let’s examine what these methods contains inside them.
if (results != null)
This function simply checks if the result is null or not. If it’s not null it will call another method passing this result object to it. We will take a look at this function in while but let’s finish the small function that we have called OnWSRequestFailed. This function looks as below.
alert("Error getting hints");
Again this function can be as complex as below which will show you entire error message.
alert("Stack Trace: " + error.get_stackTrace() + "\r\n" +
"Error: " + error.get_message() + "\r\n" +
"Status Code: " + error.get_statusCode() + "\r\n" +
"Exception Type: " + error.get_exceptionType() + "\r\n" +
"Timed Out: " + error.get_timedOut());
Finally let’s take a look at the function which is going to add this result on the page.
var html ="";
html = html + "
var hintdiv = document.getElementById("HindDivID");
hintdiv.innerHTML = html;
"HindDivID" is the ID of the div which is already on the page and which is going to hold these hints for us. Finally I am appending the html that I created dynamically to this div by its innerHtml property.
Finally on my page load event I will bind my main function to the dropdown as below.
That’s it. This should all what we wanted and we should be able to display results back to the uses without causing any post backs.