Posts tagged ASP.NET

Encrypt your Web.config using nKrypt

0

Today, i was just browsing around and stumbled upon a tool called nKrypt. It has been made by a programmer called Hugo Bonacci.

He made a rather interesting post about how to encrypt your web.config file. Thought its not a spot-on security solution for your asp.net projects but it does help by safeguarding your web.config file, if somebody got hands on them and changed them either for “evil” reasons or just by mistake.

Let me explain, suppose you have an enterprise applications in your company and you have made an asp.net application. Now many a times, a company has to share their source code repositories with their contractors which gives them a chance to snoop around in your web.config file which lays there open for anybody to get in and read in your darkest secrets. Though its not prevalent everywhere but many big (and small) companies do.

Another simple and more spot-on example would be, a junior engineer has joined in your company and is working on your project. He makes a mistake which allows a browser to get access to and download your web.config file. Though it doesnt seem likely but hey anything can happen.

So what does it hurt to get a bit of security. Isnt Prevention better than the cure?

So go about and download this simple tool and safeguard your web.config file from unauthorized access.

Working with ASP.NET Async Events

0

If you have ever worked on a project involving ASP.NET Ajax or used the ScriptManager or UpdatePanel control, then you would know what are ASP.NET Ajax events. If you dont, fret no, by the time you are done reading this article you will know.

What is ASP.NET Ajax?

ASP.NET AJAX is a set of extensions to ASP.NET developed by Microsoft for implementing Ajax functionality. Which brings us to “What is Ajax?”

Ajax (shorthand for asynchronous JavaScript and XML) is a methodology of new age web development ( heard of Web 2.0?… yeah you are on the right track ).

Did you notice my triple emphasis on the word methodology? There I did it again 😀 Well thats the main point to be understood. Ajax is a method or a technology. You can use Ajax in any of the programming or scripting languages out there. Asp, php even plain html will do.

With Ajax, web applications can retrieve data from the server asynchronously in the background without interfering with the display and behavior of the existing page. The use of Ajax has led to an increase in interactive or dynamic interfaces on web pages and better quality of Web services due to the asynchronous mode. Data is usually retrieved using the XMLHttpRequest object. Despite the name, the use of JavaScript and XML is not actually required, nor do the requests need to be asynchronous.

To make it simple, head over and try out these steps:

  • In Gmail, switch from inbox to draft. Part of the page is changed, but the page is not refreshed. You remain on the same page. Url has not changed (except for the #draft at the end of the url, but that’s still the same webpage).
  • In Google Reader, select a feed. The content changes, but you are not redirected to another url.
  • In Google Maps, zoom in or zoom out. The map has changed, but you remain on the same page.

What was different on those webpages from the other similar pages? The content of the webpage changes or updates without refreshing or redirection. Thats is what is Ajax is used for. It allows you to asynchronously (in the background) query a server and update the webpage content.

ASP.NET and Ajax

The term Ajax was coined back in 2005 and approved by W3C in 2006. Ajax was made available to various programming languages but it was difficult to implement since there was no standard and different people used to implement it differently. Also on a page with lots of controls, it was a lot of hard work to manage between updating and non-updating controls.

Microsoft worked upon this and made available some tools with the release Ajax Extensions and it was synchronized with the availability of .NET Framework 3.5

Microsoft made available some controls such as ScriptManager and UpdatePanel which turned out to be a boon (sometimes a pain-in-the-a**) for ASP.NET Developers. These controls allowed a developer to wrap Ajax functionality over a variety (almost all) the controls very easily.

Learn more about ASP.NET Ajax here. It has lots of tutorials, samples to get you started with ASP.NET Ajax.

ASP.NET Async Events

Many a times, when you use the UpdatePanel control, you would require to do some notifications of some sorts. The UpdatePanel by default fires up whenever any button is clicked which are contained by it. But what it doesnt do is, it doesnt notify the user about anything. It simply goes about, queries the server, gets the response and updates the content of the webpage and the user might not even notice it. You might want to alert the user when the process is complete, or there was an error while querying the server, or you might want to show a “processing…” message or a notification of some sorts. In that case, ASP.NET Ajax has made available four different events which you can handle to provide a proper notification.

Following table shows details of Events,

Event Name Description
beginRequest Event Raised before processing of an asynchronous postback starts and the postback request is sent to the server.
endRequest Event Raised after an asynchronous postback is finished and control has been returned to the browser.
initializeRequest Event Raised during the initialization of the asynchronous postback.
pageLoaded Event Raised after all content on the page is refreshed as the result of either a synchronous or an asynchronous postback.
pageLoading Event Raised after the response from the server to an asynchronous postback is received but before any content on the page is updated.

Uses

  • beginRequest: can be used to call custom script to set a request header or to start an animation that notifies the user that the postback is being processed.
  • endRequest: can be used to provide a notification to users or to log errors.
  • initializeRequest: can be used to cancel a postback.
  • pageLoaded/ pageLoading: can be used to provide a custom transition effect for updated content.

Steps to follow:

Follow these steps to handle the events listed above. They are handled on the client-side using JavaScript.

To notify the ASP.NET process that you want to handle the events, you need to register for them using the following syntax:

Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(beginRequestHandler)

where beginRequestHandler is the name of the function to call when the event occurs. Similary you can also use…

add_initializeRequest(InitializeRequest);
add_endRequest(EndRequest);
add_pageLoaded(pageLoaded);

Simple write the JavaScript code which you want to be executed in the function and the rest will take care of itself.

Example:

<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
//Lets set the time when the page is invoked.
protected void Page_Load(object sender, EventArgs e)
{
lblTime.Text = DateTime.Now.ToString();
}
//When the button is clicked, we update the time on the label
protected void Button1_Click(object sender, EventArgs e)
{
lblTime.Text = DateTime.Now.ToString();
}
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Working with Ajax Events - Test page</title>
<script language="javascript" type="text/javascript">
//this method will be called when the html part is loaded.
//it simply registers a method with one of the ajax events.
//for now we are registering for the end request which
//will be called when the ajax request is fully complete
function OnAjaxComplete()
{
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endRequestHandler)
}
//this method will be invoked when the ajax request is complete
//do anything you want in this block
//for now we just display a message
function endRequestHandler(sender, args)
{
//check if any error or exceptions occured and show the appropriate message
if (args.get_error() == null)
{
alert("Ajax update completed successful");
}
else
{
alert("An error occured while updating");
}
}

</script>
</head>
<body onload="OnAjaxComplete();">
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel runat="server" ID="UP1">
<ContentTemplate>
<asp:Label ID="lblTime" runat="server"></asp:Label>
<br />
<asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>

It certainly helps in notifying the user about the process complete as ajax updates or mostly not “so visible” to user. Also you can handle the other events to show loading or processing animations. Give it a try. 🙂

 

FancyBox – Make your images dance!

0

…Well not literally but hey a little bit of hyperbole never hurts right 😀

Well on to the topic, I was making a form which requires me to have a GridView (it sure is a great boon for dotNet developers) which has a few columns and one of them is a TemplateColumn containing an Image control which is bound to a column from a database having the image name.

Now if you have worked with GridView anytime, then you would remember, it would look ugly if the image size is kept big and it would just not fit the purpose if kept small. So we need a mechanism which would allow us to zoom the image some way and thats exactly where FancyBox comes in picture.

FancyBox is tool for displaying images, html content and multi-media in a Mac-style “lightbox” that floats overtop of web page. It was built using the jQuery library.

That was straight from the horse’s mouth. If you still havent got wat is it all about then click on the image below..

Isnt she a cutie?

Isnt she a cutie?

Now wasnt that a nice effect to have on a image? Well you can have it on your webpages too and that to Very Easily. Ya and I will prove it to you 🙂

Download the latest version of FancyBox from here. It includes the latest version of JQuery scripts so you wont need to download them.

Lets do a step-by-step tutorial shall we?

I wont be showing on how to do it with normal html pages. Thats very simple and can be learn from here.

If you are not familiar with jQuery, please, read at least this tutorial for beginners

Now for using FancyBox in a GridView in an ASP.NET form, lets start by creating a simple form.

The output might be something like this…

< %@ Page Language="C#" AutoEventWireup="true" Codebehind="Default.aspx.cs" Inherits="WebRnD1._Default" %>


    Untitled Page


    

The codes give here are just examples, and your codes can vary. We have created an asp.net Form stating Now go and add the below code in between the form tags.


        
            
                
                    
                
            
            
                
                    
                
            
        
    

We have just added a GridView control to our form having two columns, both of them acting as TemplateFields. The first displays a hyperlink wrapping around an image and second column displays a label for the image.
Our concern is the first column which contains…

Though looks so simple, this is our key for the FancyBox. We are simply creating a hyperlink which will be searched by the FancyBox script and on clicking the image it will popup with the image linked using the href attribute. Aint that so simple?? Yeah, the form is ready, all we need to do is add the script. Lets do that…

Add a script tag in the head element like this..

......
    Untitled Page
    
    
    
    
......

In the above snippet, we are adding a reference to two script files, one is the jquery script which allows us to fantastically work with the elements of our page and the second is the fancybox script which will work its magic on the hyper-images. We are also adding a reference to a css file which manages how the popup is displayed i.e. at the centre of the screen.
Then comes our main code which makes it all work. Lets debug it step by step.

$(document).ready(function() {......});

The above line is instructing to get the document object and when its ready call and anonymous function which will…

$("a#oneimg").fancybox({ ...... });

Get all the anchor tags with id as single and apply the fancybox function on them with the specified parameters. To know what these parameters do and what can be used refer here.

Thats it, we are done. Put it all together and run and you will get a effect like the one which you saw above. (Btw, I hope Miley Cyrus likes that dance :D)

Another problem which I have faced is when you are databinding a GridView with lots of rows containing images. In that case the fancybox works on the first image but not on the rest. The reason is because when you query for an anchor tag using ID you will get only one elements. Thats what ID’s are for right. To keep the elements unique. But what if you want to apply the effect on all the images? Simply apply a dummy class attribute and use the class to get elements in jquery. Here is how…

Look closely, and the only thing which I have changed here that instead of id, now I am using class attribute and also used the part of databinding the value.

After that you need to modify your jQuery a bit by asking it to get elements using the class and not id like this…

$("a.oneimg").fancybox({ ...... });

Yeah, that does the trick!! If you are looking for to implement this in your WordPress blog then you can get this plugin : FancyBox for WordPress

Now let the party begin!! Who let the dogs out, woof woof woof 😀

Validate atleast one checkbox is checked

0

I am currently working on a ASP.NET form which has a lot of checkboxes and i need to validate on submit that at atleast one checkbox is selected. I tried a lot of various methods to ultimate settle on a very easy one using Javascript.

function ValidateGrid()
{
    var objs = document.Form1.getElementsByTagName('input');
    var selected = false;
    for(var i = 0; i < objs.length; i++)
    {
        if(objs[i].type == 'checkbox')
        {
            if(objs[i].checked)
                selected = true;
        }
    }
    if(!selected)
    {
        alert('Please select the advertisements which you require.');
        return false;
    }
}

Isnt that simple and neat, eh? Got a better one?

AJAX is so much fun!!

0

As you all remember, I am now working for a software company called Tecogis. Read here (>).

Well I have been assigned to team developing a website in ASP.NET using VB.NET and AJAX features. Frankly speaking, a day ago, I didnt knew VB.NET at all. Never touched, felt, viewed, tried, read etc. And in around 2 hours, I am coding in VB.NET 😀

Its easy !!

Using AJAX is another fun. UpdatePanel makes your life so much easier 🙂 Hats of the development team at Microsoft or whoever made this control.

Off to coding, Boss is around 😀

Ciao.

Go to Top