dotNETspidor: A dot net programming blog

Prove that programmers too can be social change makers : last day to vote for a social work

noreply@blogger.com (Sangam Uprety) — Fri, 30 Dec 2011 06:28:00 +0000

A dream to provide solar and computer to a school in rural Nepal! It can be realized by your single vote. Please vote for it at Solar and Computers to a School in Rural Nepal

Appeal from the dreamer - read below please.

My dream is to help a school in an extremely remote village of Western Nepal to buy and install a solar system, batteries, inverters, computers and printers necessary for the school for its computer lab and e-library. The school was built with support from local people and some of the colleges and students of Kathmandu.

Lalu village where the school is located lacks basic infrastructure, however with the local people driving it, the school is a vehicle to bring the community into the 21st century.

The school has very innovative ideas that make it unique. Firstly, Modern Model Residential School is a rural based purely service oriented co-educational English medium primary institution registered as Non-profit Distributing Company. Secondly, it strives to be a progressive institution that acts as a hub for the community, imparting education mixed with modern technology.

Using a pro-rata system the school is able to provide quality education to people of the entire community. Orphaned, disadvantaged or disabled students and families are admitted free of charge, whilst others contribute as little as $3 per month. This shows how even a small amount can change not only the students’ lives but their families and the entire community.

Kalikot is amongst one of the world's most impoverished areas. “57% of people in Kalikot district live under extreme poverty. Per capita income lies at Rs. 6000 (around $ 83) per year and average life expectancy remains at just 42. Only 57.27% of children are literate where as overall literacy rate is at just 38.47%. Still 45.95% of children involve in some kinds of economic activity instead of going to school.” -Central Bureau of Statistics of Nepal, District Profile, Kalikot 2008 AD .

Please don't forget that your single click can make it happen. Time is too short to stop and think. Help to realize the dream and be proud of it! Click Solar and Computers to a School in Rural Nepal to vote!

Yes, programmers too can be social workers!

Thank you!

CamStudio - Free Streaming Video Desktop Recording Software

noreply@blogger.com (Sangam Uprety) — Tue, 27 Dec 2011 02:57:00 +0000

CamStudio a really useful desktop based software that you can use for recording anything that happens with your desktop. And the best part is it is distributed under GNU General Public License (GPL) license. Free to use for both commercial and non-commercial uses. So what are the uses? Let me recite the site itself:

CamStudio is able to record all screen and audio activity on your computer and create industry-standard AVI video files and using its built-in SWF Producer can turn those AVIs into lean, mean, bandwidth-friendly Streaming Flash videos (SWFs) Here are just a few ways you can use this software: You can use it to create demonstration videos for any software program Or how about creating a set of videos answering your most frequently asked questions? You can create video tutorials for school or college class You can use it to record a recurring problem with your computer so you can show technical support people You can use it to create video-based information products you can sell You can even use it to record new tricks and techniques you discover on your favourite software program, before you forget them

How to get the software? How to use this? Yes, it is very easy. Watch the video on how to capture video from your desktop and you are easy to begin! Why this post? Any open source products like this one is a great contribution to the whole world. So this just a give-back to the great effort. I have just tried to spread the word. Could you please do the same? Thank you!

Working with dropdownlist or combobox using jquery

noreply@blogger.com (Sangam Uprety) — Tue, 22 Nov 2011 10:42:00 +0000

More often programmers need to work with dropdownlist or combobox using jquery. We need to manipulate the dropdownlist options using jquery scripting. And it is the case that almost always we don't remember how to implement jquery selector. And for all of my readers, who are enthusiastic programmers and/or designers, and for myself, I am discussing in this post the actions with jquery to manipulate asp.net dropdownlist options.

Now append another option using jquery.

$('[id$=ddlTest]').append('');

[Why am I using the selector syntax $('[id$=ddlTest]') instead of $('#ddlTest')? We use #ControlID to select a control with specified id. $= means 'select a control whose id ends with specified value. If you are using master page, the rendered id of the dropdownlist is preceded with some text.] Now get the selected value from the dropdownlist.

var selVal=$('[id$=ddlTest]').val();

Now get the selected texct from the dropdownlist.

var selTxt=$('[id$=ddlTest] option:selected').text();

Now, select a value programmatically.

var selTxt=$('[id$=ddlTest]').val('Nepal');

And I hope you are comfortable with detecting through jquery when the use selects an item. Good luck!

Missing File menu in visual studio 2010

noreply@blogger.com (Sangam Uprety) — Tue, 18 Oct 2011 12:36:00 +0000

I just got irritated to see the file menu in visual studio 2010 missing. All other items of the menu, e.g. Edit, View, Refactor, Project, Build etc. were showing. Only mischievous was the File item. It would be of no value for me if only I could add new project in an existing project. But I couldn't find any such option. I had to workout to recover my lost menu item back. And the way is as discussed below.

1. Run Visual Studio Command Prompt for VS2010 as Administrator 2. Navigate to C:\Program Files\Microsoft Visual Studio 10.0\Common 7 3. Run devenv with the option /ResetSettings 4. Press enter This will reset the default settings for the visual studio and open it. Now you see the missing File item. Thanks.

Disable button in asp net web page to prevent multiple clicks

noreply@blogger.com (Sangam Uprety) — Thu, 29 Sep 2011 08:03:00 +0000

When a user clicks a button and the response is slow, there are chances that user may click the button again. The scenario may occur both when the button postbacks synchronously or asynchronously. This type of multiple clicks could be prevented if we could just disable the button just after the first click and enable it again when the processing is done. This is quite easy to implement the task in both the cases: synchronous and asynchronous postbacks.
Before we jump on the topic, you may learn how to click a button on enter key press in an asp.net textbox control. Similarly you may be interested in displaying google search-like watermark in an asp.net textbox control. Both the tutorials help you work with asp.net button control more interactively.

Fig. 1: Just after clicking asp.net button

Fig. 2: After postback occurs

If you are using ajax processing on button click, just disable the button when it is clicked and enable it when the ajax processing is done. If you are using full postback on button click, you may just make the button invisible using client-side-scripting when the click occurs. And you don't need to worry about making it visible since after postback the page will be rendered again, with the button visible as usual. In the snippet below I have shown how to 'disable' (in fact disabling won't work since the server side event is not firing) the asp.net button from client side when it is clicked.

1. Add reference to jquery file

2. Design the web form


    


        

        
        Processing..

3. Write the client scripting function with jquery

4. The code-behind.

protected void Button1_Click(object sender, EventArgs e)
    {
        lblMsg.Text +="Current time : "+ DateTime.Now.ToLongTimeString()+"
";
    }

That's all. When you click the button you catch the client side click event and make the button just invisible. Meantime show 'processing' or similar message. If you love ajax loading image, generate one and show it. From codebehind I have just displayed current time in a label.
Happy Bijaya Dashami (Dashain - the greatest festival of Hindus)!

Exclusive access could not be obtained because database is in use-sql server restore database error

noreply@blogger.com (Sangam Uprety) — Mon, 26 Sep 2011 09:32:00 +0000

While publishing a website to the web server, I took backup of my database. Now I had abc.backup at my hand. Next step was to create a database in the sql server of my host. I did it. Then I uploaded the backup file to the server. When I tried to restore the database I got following error:

Exclusive access could not be obtained because the database is in use

This error normally discourages because we wonder what exclusive access is this that we need to successfully restore the database. After searching a while you come to conclusion that the database to which we are restoring our backup is in use by one or some users you have already added. The popular solution is - temporarily isolate the user from the database Easy, if you run this command at your server:

Use master
go

Alter Database mydbname
SET SINGLE_USER With ROLLBACK IMMEDIATE

 RESTORE DATABASE mydbname
 FROM DISK = 'C:\abc.bak'

Now you are right if you suspect whether we should the roll back to multi user. Yes this way:

Use master;
go

ALTER DATABASE mydbname

SET MULTI_USER;
go

Note that we run the commands against the master database, not the candidate database itself. And did I do the same last time? Nope. I was just happening with a slight mistake. I had created users for the db before I restored the database. So to save yourself from all those stuffs explained above, just create the database in the server, restore your backup file to it and only then create the database users. Done! Thanks.

There is a duplicate 'system.web.extensions/scripting/scriptResourceHandler' section defined

noreply@blogger.com (Sangam Uprety) — Thu, 22 Sep 2011 13:30:00 +0000

Last time I got the following error:

HTTP Error 500.19 - Internal Server Error The requested page cannot be accessed because the related configuration data for the page is invalid.

See in the image below the following config error, and also watch the config source.

There is a duplicate 'system.web.extensions/scripting/scriptResourceHandler' section defined

Root of the error
I got the error when I was deploying a web application precompiled in asp.net 2.0 onto the production server with asp.net 4.0. The simple search reveals that it is known issues with VS 2010 and asp.net 2.0. But my site is asp.net 2.0 enabled. What's the root of the error then?
My conclusion (and please correct me if necessary) I have configured asp.net web extension namespaces in my web.config file. You don't see this in asp.net 3.5 and 4.0 enabled sites since servers with asp,net 3.5/4.0 by default server asp.net ajax services. But asp.net 2.0 has to be ajax enabled by installing asp.net ajax extension 1.0 which you can download from here. Sensed duplicate entry of system.web.extension section group? Yes, don't include the following section group in the config section if your site runs on asp.net 2.0 but published on asp.net 3.5/4.0.

Comment out the config section (or remove it if you like), and you are done. Good luck!

How to add favicon in your asp-net site?

noreply@blogger.com (Sangam Uprety) — Fri, 16 Sep 2011 05:58:00 +0000

Make your site impressive and standard by displaying favicon. This is a practice of branding also. See in the following image the red circled area at the top corner. The black filled square is the favicon of dotnetspidor: A dot net programming blog. You can see the favicons in almost all of the popular websites.

So how to achieve this? First create a favicon image of your own. Visualize a great logo/image for the favicon. Save it as favicon.ico. Drop it at the root folder of your site. Now you are one step away - just put the following two links just below the title of header of your form. If you are using master page, just put these lines in the master page and you are done for all the pages.

So why the two lines? Normally the first link works. But for some tricky and picky browsers the second link will work. All the best!

Delete all stored procedures of a database in sql server

noreply@blogger.com (Sangam Uprety) — Sat, 03 Sep 2011 09:45:00 +0000

Sometimes there arises the need of deleting all stored procedures of a database. I came across the same situation when I was generating CRUD operations stored procedures via third party tool. I once changed a table and then had to regenerate all the stored procedures. So went on to find out the way. And ultimately stumbled at http://ctrlf5.net/?p=164. Here is how to delete all the stored procedures of a sql server database:

USE myDBName
GO
DECLARE @procedureName varchar(500)
DECLARE cur CURSOR
      FOR SELECT [name] FROM sys.objects WHERE type = 'p'
      OPEN cur

      FETCH NEXT FROM cur INTO @procedureName
      WHILE @@fetch_status = 0
      BEGIN
            EXEC('DROP PROCEDURE ' + @procedureName)
            FETCH NEXT FROM cur INTO @procedureName
      END
      CLOSE cur
      DEALLOCATE cur

All the best!

Frequent question on parent and child page refresh, reload, function call in asp-net using javascript

noreply@blogger.com (Sangam Uprety) — Thu, 11 Aug 2011 07:05:00 +0000

There are ways to call client functions in a parent asp.net web page from the child window. This is very helpful in many ways:
1. You can refresh parent page after some updates from child pager
2. You can partially change parts of the parent page
3. You can control the behaviour of parent page from its child (even from iframe child page)

Example? See the way you edit a section in your blogger blog site. When you are logged in and browsing your blog, blogger lets you edit sections of your blog page directly from the public page of your blog. When you click the edit icon, a window will pop up and load with the setting of the editable section. Now when you save your changes the pop up window will close itself and the parent page (your public page) will be refreshed. Want to implement the same?

You can follow these steps:
1. Program your parent page to open new window : You can place a hyperlink in your parent page. There are other several ways to open new window in asp.net web page.
2. Call client function in parent page : Now you can call client function in parent page from the child page. I have already posted how to call javascript function in parent web page from child page.
3. Sometimes your child page is a page loaded in iframe from your parent page. In that case it will be a bit different than what I have mentioned in (2). Learn how to refresh parent parent from iframe child page.

I hope this will help tackle the mostly asked questions on parent and child page programming in asp.net using javascript.

Happy programming!

Refresh parent page partially from iframe without reloading the iframe using javascript in asp.net

noreply@blogger.com (Sangam Uprety) — Tue, 19 Jul 2011 07:44:00 +0000

Last time we talked about Refreshing the parent page from child window in asp.net using javascript. This technique is useful in many scenarios. (If you haven't been through How to open new window in asp.net using javscript and C-sharp, I would like to suggest to read the post thoroughly. After this you will clearly see why the stuff we are talking about in this post is important.) But programmers using iframe to load another asp.net web page may wonder if we could only partially refresh the parent page so that iframe keeps itself from reloading. This can by done by calling the parent page javascript function from the child page loaded in the iframe. This way we can even avoid the need of ajax to refresh the parent page without affecting the iframe content. As usual I have presented the simple practical approach to tell you as much clearly as possible - follow please. And before continuing, I would like to inform that there is a post regarding Frequent question on parent and child page refresh, reload, function call in asp-net using javascript that discusses, in aggregate, about some more approaches of parent and child page operations.
Parent Asp.net Page

I am the parent page.

Page to be loaded in parent page iframe

I am content of iframe page.

Visualize the output

What's in the code?
You see a button in the child page that is loaded in the iframe of parent page. On click of the button, the javascript function displayMessageFromIframeChild() of the parent page is called. This function displays the string message from child page in a div of the parent page. That's all. Happy programming!

Refresh parent page from child window using javascript in asp.net web application

noreply@blogger.com (Sangam Uprety) — Thu, 14 Jul 2011 12:55:00 +0000

Much often we open child windows from parent web page. In the child page we perform some activities, and later close the window. At the very time we may need to refresh the parent page so that changes made in the child window be reflected in the parent window. We can easily accomplish this using javascript in asp.net web page. Let me show the way using code snippets. If it is your iframe page, you still can refresh the parent page partially from page in iframe (because this will avoid reloading the iframe itself), which I have discussed in another post. And right before following, I would like to inform that there is a post regarding Frequent question on parent and child page refresh, reload, function call in asp-net using javascript that discusses, in aggregate, about some more approaches of parent and child page operations.

Parent asp.net web page

Open child window

This is the parent page. Clicking the link will open the child page Child.aspx in a new window. If you wish you can Open the new window in asp.net web page in different ways, which I have already discussed in a previous post.

Child asp.net web page

This is the child page.

protected void btnOk_Click(object sender, EventArgs e)
    { 
        //Implement Your logic here.....
        //..............................
        //now refresh parent page and close this window
        string script = "this.window.opener.location=this.window.opener.location;this.window.close();";
        if (!ClientScript.IsClientScriptBlockRegistered("REFRESH_PARENT"))
            ClientScript.RegisterClientScriptBlock(typeof(string), "REFRESH_PARENT", script, true);        
    }

In the child page, I have just put a button. When the button is clicked, the page logic will be implemented (which I have indicated by the comment lines in the event handler of the button in the asp.net child page).

The asp.net plus javascript logic
I have just created the javascript stuff that refreshes the parent page of this child page; see the lines:
this.window.opener.location=this.window.opener.location;this.window.close();
This line replaces the url of the parent page with its own url - that causes the parent page to reload. And yes, I have registered the javascript code block with ClientScript so that it is executed when the postback life cycle of this child page completes.

Happy programming!

C# - Copy files and folders recursively from source to destination folder in c-sharp

noreply@blogger.com (Sangam Uprety) — Mon, 11 Jul 2011 10:09:00 +0000

In C#, there is no built in function to recursively bulk-copy all files and folders from source to destination folder. So this has to be done manually by the programmer. Being a lover of reusability feature of object oriented programming, I googled and stumbled on the code snippet below:

/// 
    /// Copy folder to another folder recursively
    /// 
    /// /// public static void CopyFolder(string sourceFolder, string destFolder)
    {
        if (!Directory.Exists(destFolder))
            Directory.CreateDirectory(destFolder);
        string[] files = Directory.GetFiles(sourceFolder);
        foreach (string file in files)
        {
            string name = Path.GetFileName(file);
            string dest = Path.Combine(destFolder, name);
            File.Copy(file, dest);
        }
        string[] folders = Directory.GetDirectories(sourceFolder);
        foreach (string folder in folders)
        {
            string name = Path.GetFileName(folder);
            string dest = Path.Combine(destFolder, name);
            CopyFolder(folder, dest);
        }
    }

Note that all files at the source folder have been copied to the destination folder. But folder and files within them have been copied using recursion - see the function of second foreach construct.

Shortcomings? Yes, no exception handling has been done in the snippet. However, the functionality is ok! Thanks to csharp411.com.

Page is null at the c# class library control

noreply@blogger.com (Sangam Uprety) — Sat, 18 Jun 2011 08:27:00 +0000

Hi all.
Just caught up in the mess when I came to see : the parent page of one of my class library control was null at runtime. That means the call:
Page.ClientScript.GetWebResourceUrl([control-type],[full-resource-url]);
would fail.

I have been suggested this happens when my parent page is being rendered within an iframe. But this was not the case for now. I was just using a placeholder to dynamically add the control. So what's the solution?

Yes it came around after some googling, try this:

(Page)HttpContext.Current.Handler).ClientScript.GetWebResourceUrl([control-type],[full-resource-url]);

What's in here?

The Page that refers to the Page control containing this dynamic control is achieved through current request handler. This avoids the problem since the request was generated by the page. But mere Page or this.Page or this.Parent.Page or whatsoever might have been missed due to the hierarchy of the controls or is it due to anything else?

Hope this helps. Sweet programming!

Request.Url - Asp.Net Path Details

noreply@blogger.com (Sangam Uprety) — Fri, 31 Dec 2010 07:46:00 +0000

Hi all. Returned back to the blogging world after nearly a year! Welcome back!
And Happy New Year 2011.
Here is my self-note to save my day googling!

Request.Url
Full URL : http://localhost:2000/virtual_dir/myrep/page.aspx?q=qvalue

Request.ApplicationPath :	/virtual_dir
Request.CurrentExecutionFilePath :	/virtual_dir/myrep/page.aspx
Request.FilePath :	/virtual_dir/myrep/page.aspx
Request.Path :	/virtual_dir/myrep/page.aspx
Request.PhysicalApplicationPath	d:\Inetpub\wwwroot\Websitename\virtual_dir\
Request.QueryString :	/virtual_dir/myrep/page.aspx?q=qvalue
Request.Url.AbsolutePath :	/virtual_dir/myrep/page.aspx
Request.Url.AbsoluteUri :	http://localhost:2000/virtual_dir/myrep/page.aspx?q=qvalue
Request.Url.Host :	localhost
Request.Url.Authority :	localhost:2000
Request.Url.LocalPath :	/virtual_dir/myrep/page.aspx
Request.Url.PathAndQuery :	/virtual_dir/myrep/page.aspx?q=qvalue
Request.Url.Port :	2000
Request.Url.Query :	?q=qvalue
Request.Url.Scheme :	http
Request.Url.Segments :	/virtual_dir/ myrep/ page.aspx

Source: http://www.xcess.info/request_url_parameters_details_asp_net_aen.aspx

Happy New Year 2010!

noreply@blogger.com (Sangam Uprety) — Thu, 31 Dec 2009 12:17:00 +0000

Hey World, Happy New Year 2010!

Enjoy your holidays. Forget all the odds of 2009 and plan meaningful life for 2010!

Wherever you spend your holidays this year-end, enjoy it with all your heart. And please accept my warm invitation to spend your holidays of New Year 2011 in Nepal – a world of its own! We are celebrating 2011 as Nepal Tourism Year – 2011. My kind request to add this year into your calendar so that your won’t miss what this mysterious country has to offer you – from Natural beauty to the Mt. Everest, from Hindu’s holy Pashupatinath to Buddhist’s holy Lumbini- the birth place of Lord Buddha, from the miraculous flora and fauna to the diversity of social and cultural property!

Source of photos: Nepal Gallery

Many many happy returns! Happy new year 2010!

Toggle image using jquery for animated hide show in asp-net

noreply@blogger.com (Sangam Uprety) — Fri, 18 Dec 2009 12:28:00 +0000

Web masters find it attractive to mark or indicate some text in a page as special part. For example a featured product in a shopping cart would hold a finished featured icon image at its side. Similarly we see New image icon blinking at the side of some product or text. It is sometimes better by far to use such animated images to draw user's attention. How would you do this using jquery? The simple answer is that- toggle the image based on its display status, in a regular interval.

There exists a simple method in jquery plugin that accomplished this task:

$('my-image-selector').toggle();

Let's look at the simple example.

<table>
            <tr>
                <td>This is some test news.</td>
                <td style="height:45px"><img id="newImage" src="../images/new.jpg"
                 alt="New!" height="40px" width="40px"/></td>
            </tr>
        </table>

<script type="text/javascript">
        $(function(){
            setInterval(imageFlickr,300);                        
        });
        
        function imageFlickr()
        {
            $("#newImage").toggle(200);            
        }       
    </script>

In the page, I have added an image in a column of a table. Please use your own image (perhaps some 'New' image, as in the image above). Note the javascript setInterval() method that calls the function imageFlickr() every 300ms. In the method, we have the line:

$("#newImage").toggle();

The $(selector).toggle(interval) method toggles the show/hide property of the element. In the code, I haven't used the interval argument of toggle method. The interval in milliseconds defines the fade-in or fade-out speed of the element. Try this once and you will see great effect:

$("#newImage").toggle(200);

You are warmly welcome to share your experiences. You can start discussion by adding comments from the form below. You can help spreading out the words by bookmarking this article to
any of your favourite bookmarking site!

Happy Programming!

Prevent page postback on enter key press in textbox in asp-net web page

noreply@blogger.com (Sangam Uprety) — Wed, 02 Dec 2009 13:26:00 +0000

In an asp.net web page, you may have experienced that pressing enter key postbacks the page. For example, take the following scenario:

<table>

            <tr>

                <td>Name</td>

                <td><asp:TextBox ID="txtName" runat="server"></asp:TextBox></td>

            </tr>

            <tr>

                <td>Email</td>

                <td><asp:TextBox ID="txtEmail" runat="server"></asp:TextBox></td>

            </tr>

            <tr>

                <td colspan="2">

                    <asp:Button ID="btnOK" runat="server" Text="OK" />

                </td>

            </tr>

        </table>

In the page, if you press enter key in any of the textboxes, the page will postback, which is not desired.

1.0 What’s the reason?
Lets look at the html markup generated for the page:

The asp.net button control has been rendered with “submit” type, which is the reason of page postback when enter key is pressed in any of the textboxes. Note the following line in the image above:

<input id="btnOK" type="submit" value="OK" name="btnOK"/>

2.0 The Way Out
We can use two different approaches to prevent postback on enter key-press in any of the textboxes:

1. Using UseSubmitBehavior="false" in the asp.net button control’s markup
We can set UseSubmitBehavior="false" in the button markup:

<table>

            <tr>

                <td>Name</td>

                <td><asp:TextBox ID="txtName" runat="server"></asp:TextBox></td>

            </tr>

            <tr>

                <td>Email</td>

                <td><asp:TextBox ID="txtEmail" runat="server"></asp:TextBox></td>

            </tr>

            <tr>

                <td colspan="2">

                    <asp:Button ID="btnOK" runat="server" Text="OK" UseSubmitBehavior="false" />

                </td>

            </tr>

        </table>

This stops rendering the button as type=”submit”. Now the rendered markup for the button will be:

Not the following line in the image above as captured from firebug:

<input id="btnOK" type="button" onclick="javascript:__doPostBack('btnOK','')" value="OK" name="btnOK"/>

This shows that there is no more type="submit" attribute, rather onclick="javascript:__doPostBack('btnOK','') has been added.

So you have successfully stopped the page postback now!

2. Prevent enter key press in all the textboxes
One another way to stop the page postback is to prevent enter key press in any of the textboxes. We can use jquery to easily perform the task. This way:

<script type="text/javascript">

        $(function(){

            $(':text').bind('keydown',function(e){ //on keydown for all textboxes

                if(e.keyCode==13) //if this is enter key

                    e.preventDefault();                

            });

        });

    </script>

On page load, all the textboxes in the form are bound to the keydown event to a function. In the function we check if the key pressed in the ‘enter key’. If so, we prevent the further bubbling of the event. Hence it prevents the page postback.

Note: You will need to reference the latest jquery file in the page to use the second technique.

3.0 Conclusion
We looked at two ways to prevent page postback on enter-key press in a textbox in asp.net web page. Both the techniques work well. But I would prefer the first one since this would save the extra client side manipulations in the user’s machine.

4.0 Looking towards hearing from you!
You are warmly welcome to share your experiences. You can start discussion by adding comments from the form below. You can help spreading out the words by bookmarking this article to any of your favourite bookmarking site!

Happy Programming!

jQuery Mutually exclusive checkboxes in asp.net

noreply@blogger.com (Sangam Uprety) — Wed, 28 Oct 2009 11:26:00 +0000

We often see radio buttons to implement single choices out of many in web forms. Wouldn’t it be better if we could imply ‘choose one option from many’ using checkboxes? I have implemented such mutually exclusive checkboxes in asp.net using jquery. This certainly is not any new practice. We have already seen such mutually exclusive checkboxes in asp.net ajax, and perhaps there are others also. But achieving this functionality using a lightweight javascript library like jquery would be a benefit. So let’s start the race.

First of all, let me present the design philosophy of this realization of mutually exclusive checkboxes.

1. We will have a group of checkboxes with same css class name. We will not need the id of checkboxes besides for associating label to display text and make label clickable.

2. For our example, initially we will check one of the checkboxes. You may wish not to and this will work.

3. We can add any number of such groups of checkboxes but each group will have distinct class name. For example, one group of checkboxes can have class name ‘class1’ and other can have ‘class2’ and so on.

4. When a checkbox is checked, if it is already checked nothing will happen, otherwise this checkbox will be checked and all other checkboxes having the same class name as of this checked one will be unchecked.

5. If a checkbox is unchecked, we re-check it, since we want at least one checkbox checked. We can let a checkbox get unchecked if our requirement does not demand at least one option checked, but for this tutorial we will not let so.

By this time we have realized the need and design philosophy of implementing mutually exclusive checkboxes in asp.net using jquery. Now let’s proceed on.

We need the latest version of jquery which is available here [latest version is jquery 1.3.2 till date].

Fig:1 jQuery library added in asp.net website project

Now reference the jquery library file in the head section of the design page.

Fig:2 jQuery libray referenced in the header section of asp.net design page

Here goes the design markup code in the aspx page.

<form id="form1" runat="server">
    <asp:Label ID="lblResult" runat="server" ForeColor="Green"></asp:Label>
    <div id="toggleContainer">
        I like to mix  
        <input type="checkbox" id="aspnet" class="firstClass" checked="checked" runat="server"/>
         <label for="aspnet">asp.net</label>
        <input type="checkbox" id="php" class="firstClass" runat="server"/>
        <label for="php">php</label>
        <input type="checkbox" id="jsp" class="firstClass" runat="server"/>
        <label for="jsp">jsp</label>
        <input type="checkbox" id="asp" class="firstClass" runat="server"/>   
        <label for="asp">asp</label>     
        <br /><br /> with  
        <input type="checkbox" id="jquery" class="secondClass" checked="checked" runat="server"/>
        <label for="jquery">jquery</label>
        <input type="checkbox" id="javascript" class="secondClass" runat="server"/>
        <label for="javascript">pure javascript</label>
        <input type="checkbox" id="aspnetajax" class="secondClass" runat="server"/>
        <label for="aspnetajax">asp.net ajax</label>
        <input type="checkbox" id="thirdajax" class="secondClass" runat="server">
        <label for="thirdajax">third party ajax</label>
        <br /><br />
        <asp:Button ID="btnResult" runat="server" OnClick="btnResult_Click" Text="Show Result!" />
    </div>
    </form>

Fig:3 Mutually exclusive checkboxes at initial state

As shown in the page code above, we have three different groups of checkboxes having class names firstClass and secondClass. Each group has one checkbox checked initially.

Now is the time to use and understand the jquery script in the page. Here is the complete code in the script block.

<script type="text/javascript">
      $(document).ready(function(){
            //toggle all checkboxes in toggleContainer div
            $('#toggleContainer :checkbox').bind('change',function(){
                var thisClass=$(this).attr('class');
                if($(this).attr('checked'))
                {
                    $('#toggleContainer :checkbox.'+thisClass+":not(#"+this.id+")").removeAttr('checked');    
                }
                else
                {
                    $(this).attr('checked','checked');                          
                }
            });
        });
    </script>

Explanation of jquery code snippet

1. We put all the codes that are required to run at the page load within document’s ready event handler code block, so the first line.

2. toggleContainer is the div element we put all our checkboxes. We have done this to avoid collision with other checkboxes in the page. For all checkboxes [as by :checkbox selector] within this div element we bind change event. So, the following code block will execute when any checkbox is checked or unchecked.

3. In the change event, we read the class name of the current checkbox in thisClass variable. Note that we are reading the value of attribute class [as by .attr method, used to get or set value of an attribute]

4. If this checkbox has attribute ‘checked’, this means we are checking this checkbox exclusive of others in its group. So we uncheck all checkboxes other than itself having class name of this checkbox [stored in variable thisClass]. How we achieve this- uncheck all checkboxes other than this? Answer is: using : not[itself] selector. This selector excludes the matching dom element from the result.

5. If this class has no ‘checked’ attribute, this means the previously checked chexbox has been tried to uncheck which we prevent by re-checking this checkbox since this violates our design philosophy.

That’s all.

Reading Result

Remember the Show Result button in the pages? Yeah, we will publish the result as of user’s selections. Here goes the code-behind code snippet.

//prints your choices in the result label
    protected void btnResult_Click(object sender, EventArgs e)
    {
        string result = "Oh, you like to mix ";
        if (asp.Checked)
            result += "asp";
        else if (aspnet.Checked)
            result += "asp.net";
        else if (php.Checked)
            result += "php";
        else
            result += "jsp";

        result += " with ";

        if (jquery.Checked)
            result += "jquery ajax!";
        else if (javascript.Checked)
            result += "pure javascript ajax!";
        else if (aspnetajax.Checked)
            result += "asp.net ajax!";
        else
            result += "other third party ajax!";

        result += "";

        lblResult.Text = result;
    }

Fig:4 Mutually exclusive checkboxes in action

Conclusion

In this simple yet descriptive tutorial we implemented mutually exclusive checkboxes in asp.net using latest javascript jquery library. Since we used class property of checkboxes, we have been able to implement this with any number of distinct groups of checkboxes. If you enjoyed this tutorial, please spread the words: bookmark this, share your opinions via comments or email this article etcetera! Happy programming!

Programming foa and fop to generate pdf files from xml and xslt

noreply@blogger.com (Sangam Uprety) — Thu, 03 Sep 2009 12:49:00 +0000

In real world, there is a great deal of demand of pdf files. Programmers often need to generate pdf file from data fed in different formats. One popular format is xml. There exists lots of ways to generate pdf files in different programming languages. And interestingly most of them are platform and program independent. Sweet!

I am currently programming xslt. There has been an interesting task. We have xml file as input and fop batch file which can be run to accept some xml, xslt and pdf files to generate pdf out of the xml and xslt file. With this scenario, all we have to do is write the xslt that styles and maps to the original xml file, which can be then rendered as pdf files.

We are writing xslt using foa. The fop can take this xslt as input. The foa even provides IDE to write xslt. And this free yet significant tool is very programmer-friendly in the sense it provides environment to integrate style and xml at once into the xslt from one place.

This is my first time with fop and foa. They do make great marriage. But there doesn't seem to be updates in foa since long time. The latest foa we get is too old to match the latest version of fop. How would this foa keep with the latest, new, improved fop?

Anyway, I hope to come up with more issues in using xsl. Keep up warming your programming. Happy programming!

International Youth Day 2009

noreply@blogger.com (Sangam Uprety) — Wed, 12 Aug 2009 06:24:00 +0000

Hi all. Today is August 12, 2009, the International Youth Day. May this day empower the youth all over the world!

Smart sorting, paging in asp-net, especially repeater control

noreply@blogger.com (Sangam Uprety) — Mon, 10 Aug 2009 13:14:00 +0000

Hi all. There has been little lagging in my presence to you all with new post. Actually these days there are lots of things in my mind. I am looking over the web to know the best asp.net performance practices. But most of the times I do get stuck with the same old strategies you can find everywhere if you search with the keyword – "asp.net performance tips" or so. However, these tips work 90% of the cases, they are intermediate ones. What about the advanced ones? There are some genius guys who have presented advanced and deep asp.net performance improvement techniques, and thanks to them. Good things cannot hide, so you are sure to find them over the web hanging here and there, no problem.

But here I am going to talk about one thing- paging and sorting in asp.net. From the very beginning I am dissatisfied with the old, easy paging of asp.net gridview that really kills the spirit of web- faster response and scalability. In fact gridview and datagrid both generate heavy markup. The only good way to get rid of all these is to do custom paging, sorting with the gridview and datalist.

Then what about repeater control? Yes, the best option to go is use repeater and use custom sorting/paging with it. Repeater control has always won the heart of programmers- light, efficient and thus effective! I have just been through this better way of paging and sorting with asp.net gridview control. They have managed an example page also. I hope following the same pattern would make a good impression with repeater control also. We would certainly go different pattern for sorting- perhaps a dropdownlist populating all the column names and another dropdownlist with "asc" and "desc" for sorting direction.

As alternatives, I have also liked: this one from codeproject and this one discussed in asp.net tutorial.

What you think? I am still looking for the best paging in asp.net- for gridview, datalist or repeater. Your suggestions and referrals are welcome. Please keep in mind that I am fond of performance friendly options. Thank you. Happy Programming!

How to change second textbox text when the first textbox date of AJAX CalendarExtender changes?

noreply@blogger.com (Sangam Uprety) — Fri, 03 Jul 2009 12:47:00 +0000

Sometime ago I saw an interesting question in asp.net forum. It raised my enthusiasm. I started to code the requirement. And I found one. Here goes the requirement:

Hi!

I have two text boxes inside my aspx page: a) the "txt1" and b) the "txt2". Both text boxes have CalendarExtender controls attached:
a) the txt1 has the "CalendarExtender1"
b) the txt2 has the"CalendarExtender2".

All I want is this:
Using client-side script (or other method without postbacks), I want when the user chooses a date from CalendarExtender1, the same date plus a day front to go to the txt2.

For example:
If the user chooses 03/28/2009 in the CalendarExtender1, I want the value of the txt2 to be the 03/29/2009....
Also, if the month reaches the end, I want the txt2 to take the new moth.

For example:
If the user chooses 03/31/2009 in the CalendarExtender1, I want the value of the txt2 to be the 04/01/2009....

That behavior I want to exists only to the CalendarExtender1 like I describe it. I don't want the user to be able to do this with CalendarExtender2 (the CalendarExtender2 has the default behavior)...

How can I accomplish that? Thank you very much!

There are two solutions provided to this requirement. Let me put them here.

Solution1: (By Kinjalin)

Here you have to add it in Javascript.

<cc1:CalendarExtender ID="ClExFromDt"                     runat="server"                     TargetControlID="TxtFromDate"                     PopupButtonID="BtnFromCal"                     Format="dd/MM/yyyy"                     OnClientDateSelectionChanged="AddDate"                     CssClass="calExt_Theme1"></cc1:CalendarExtender>

Here on OnBlur, write a Javascript function addDate

on Page_Load write the line " Text1.Attributes.Add("onblur", "javascript:addDate();")

& in Javascript Fetch the Value using document.getElementByID("TextBox1").value

add it using below Javascript & bit of ur Logic

//create the date
var myDate = new Date();

//add a day to the date
myDate.setDate(myDate.getDate() + 1);

//add a week
myDate.setDate(myDate.getDate() + 7);

After adding Show it in your TextBox2

$get(TextBox2).value = myDate

Thats it.

Solution2: (By sangam100)

Hi MinimalTech ,

Here goes the prototype, which is close to what kinjalin posted:

Add this script in the design page:

<script>

    function addDays() {

        dateParts = document.getElementById('txtDate1').value.split('/');

        year  =  dateParts[2];

        month = parseInt(dateParts[0])-1;

        day   = parseInt(dateParts[1]) + 1;

        

        newDate = new Date ( year, month, day );

        year  = newDate.getYear();

       month = newDate.getMonth()+1;

       day   = newDate.getDate();

       formattedDate = month + '/' + day + '/' + year;

   

       document.getElementById('txtDate2').value=formattedDate;

   }

</script>

Now in the design page:

Date1:<asp:TextBox ID="txtDate1" runat="server"></asp:TextBox>  Date2 (One day forward):<asp:TextBox ID="txtDate2" runat="server"></asp:TextBox><cc1:CalendarExtender ID="CalendarExtender1" runat="server" TargetControlID="txtDate1" PopupButtonID="txtDate1"></cc1:CalendarExtender>

In the code behind.

txtDate1.Attributes.Add("onchange", "addDays();");

Now this works.

Hope this will be useful to all. Happy Programming!

Convert date to different date string using Convert function of ms sql server 2005

noreply@blogger.com (Sangam Uprety) — Fri, 26 Jun 2009 12:43:00 +0000

Many times we need to convert datetime to different strings representing date, varying from 2009/06/2009 to June 26, 2009, and so on. Microsoft sql server 2005 can do the job for us! I had the same need some time ago, and sql server did this for me. (By the way, don't we programmers often find it irritating to have datetime representations different in different data base providers and different programming languages? Yes. Exactly here is what I am pointing towards what sql server 2005 can do for us. Follow the rest of this article for the magic!)

This is the syntax:

CONVERT (data-type, date-time-string-input, date-display-style)

Parameters:
data-type: Any data type from nchar, nvarchar, char, varchar, binary, varbinary [length is optional, e.g. varchar(20) or varchar(22)
date-time-string-input: Date time string supplied as input (You can use GETDATE() function etc.)
date-display-style: The string style (You need '2009.06.26' or 'June 26, 2009' etc. You can even use the useful style number. Read on.)

Note: If you provide insufficient length, you may be trimming your result!

Now, here is a list of the sql query and the result to the query that will introduce a number of the ways to get desired date strings.

SELECT CONVERT(VARCHAR(20),GETDATE(),100) 
Result: Jun 26 2009 5:53PM

SELECT CONVERT(VARCHAR(20),GETDATE(),101) 
Result: 06/26/2009

SELECT CONVERT(VARCHAR(20),GETDATE(),102) 
Result: 2009.06.26

SELECT CONVERT(VARCHAR(20),GETDATE(),103) 
Result: 26/06/2009

SELECT CONVERT(VARCHAR(20),GETDATE(),104) 
Result: 26.06.2009

SELECT CONVERT(VARCHAR(20),GETDATE(),105) 
Result: 26-06-2009

SELECT CONVERT(VARCHAR(20),GETDATE(),106) 
Result: 26 Jun 2009

SELECT CONVERT(VARCHAR(20),GETDATE(),107) 
Result: Jun 26, 2009

SELECT CONVERT(VARCHAR(20),GETDATE(),108) 
Result: 17:49:42

SELECT CONVERT(VARCHAR(20),GETDATE(),109) 
Result: Jun 26 2009 5:50:02

SELECT CONVERT(VARCHAR(20),GETDATE(),110) 
Result: 06-26-2009

SELECT CONVERT(VARCHAR(20),GETDATE(),111) 
Result: 2009/06/26

SELECT CONVERT(VARCHAR(20),GETDATE(),113) 
Result: 26 Jun 2009 17:51:24

SELECT CONVERT(VARCHAR(20),GETDATE(),114) 
Result: 17:51:44:397

SELECT CONVERT(VARCHAR(20),GETDATE(),120) 
Result: 2009-06-26 18:00:17

SELECT CONVERT(VARCHAR(20),GETDATE(),121) 
Result: 2009-06-26 18:01:14

SELECT CONVERT(VARCHAR(20),GETDATE(),126) 
Result: 2009-06-26T18:02:00

As you can see, I have used the select statement to retrieve the desired sql query result. You can use it with any combination of sql query to perform any of the CRUD (Create, Read, Update and Delete) operations.

You can comment to add to the above list. It may be incomplete. Remember your participation is very important to make it more complete and more useful. You are as always heartily welcome to post you suggestions, comments, rate this article or spread the words by adding it to the social bookmarks! Happy Programming!

Highlight gridview row on mouse over in asp net web page: Adding effects to the gridview control

noreply@blogger.com (Sangam Uprety) — Wed, 10 Jun 2009 12:25:00 +0000

Programmers heavily use the asp.net gridview control. Adding some effects to the gridview will change the appearance so that user interactivity increases. One of such effects is highlighting the gridview row on mouseover. With this short background let's go for the design markup of the example gridview.

<asp:GridView ID="gridTest" runat="server" OnRowDataBound="gridTest_RowDataBound" AutoGenerateColumns="false">

<Columns>

     <asp:BoundField HeaderText="Status" DataField="Status" />

     <asp:BoundField HeaderText="Name" DataField="Name" />

     <asp:BoundField HeaderText="Comment" DataField="Comment" />

     <asp:BoundField HeaderText="Date" DataField="Date" />

</Columns>

</asp:GridView>

Now we have the asp.net gridview, why not choose the highlighted row's color? Let's define a style sheet class for highlighted row.

<style type="text/css">

        /*for gridview row hover, select etc*/

        .normalrow

            {

                background-color:white;

            }

        .highlightrow

            {

                background-color:#cccccc;

            }

    </style>

(The gridview markup shown above is only for example purpose. So you will not see any matches between the figure showing highlighted row and the example markup. Further you will also need to implement your own css styling, if you prefer any). Note the OnRowDataBound event handler in the gridview design markup. We will write some lines of code in this event handler to add the effect of highlighting gridview rows on mouse over. Here goes the code.

//row created event
    protected void gridTest_RowCreated(object sender, GridViewRowEventArgs e)
    {
        if (e.Row.RowType == DataControlRowType.DataRow)
        {
            e.Row.Attributes.Add("onmouseover", "this.className='highlightrow'");
            e.Row.Attributes.Add("onmouseout", "this.className='normalrow'");
        } 
    }

We have specified the css class to adapt by the gridview row on mouse over. At the same time, we need to assign another css class on mouse out so that the gridview will be highlighted only on mouseover and on mouse out the effect will be void. Happy programming!