check if the request came from mobile or computer in asp.net

check if the request came from mobile or computer in asp.net

In this topic we are going to see how to check if the request came from mobile or computer in asp.net.

Introduction:

From the m-dot approach, you can choose to build different UIs for different devices, and from the RWD (Responsive web design) approach you can choose to have a common code base. So while developing ASP.NET web applications, you can have the same codebase (or at least as identical as possible) as far as server-side code is concerned. However, you develop different UIs when targeting different devices (that means .aspx markup for Web Forms and views for MVC).

Reason for detecting a device:

For example, if a Web Form is being accessed from a desktop computer, you may want to attach a master page that displays a three-column layout to the user. If it is being accessed from a smartphone, you may want to attach a master page that displays a single-column layout.

Detecting a Mobile Device in Web Forms:

 HttpBrowserCapabilities bc = Request.Browser;

If you are developing an ASP.NET Web Forms application, you can easily see whether the requesting device is a mobile device by using the Request.Browser object. The Request.Browser object, which is an instance of the HttpBrowserCapabilities class, gives you a lot of information about the capabilities of the requesting browser. In particular, the IsMobileDevice property of the Request.Browser object tells you whether the requesting device is a mobile device .

A few more properties of the Request.Browser object can also come in handy for developing mobile applications

Property	Description
IsMobileDevice	Returns true if the requesting browser is mobile device; false otherwise
MobileDeviceManufacturer	Returns the name of the mobile device manufacturer (if known)
MobileDeviceModel	Returns the model name of a mobile device (if it is known)
ScreenPixelsHeight	Returns the height of the display in pixels
ScreenPixelsWidth	Returns the width of the display in pixels

Following figure shows a sample Web Form that outputs the properties listed in Table and is being accessed using the Safari desktop browser and an iPhone (via the Safari browser emulator).

A Web Form accessed using the Safari desktop browser returns IsMobileDevice as False, whereas the same Web Form when accessed from an iPhone returns True.

Read More

Animation extender in ajax sample/example in asp.net

Animation extender in ajax sample/example in asp.net  

In this topic we are going to see Animation extender in ajax sample/example in asp.net .

The AnimationExtender server control provides a tremendous amount of capabilities. It enables you to program fluid animations to the controls that you put on the page. You can do a lot with this control much more than can be shown in this example. 

This control enables you to program elements that can move around the page based on specific end-user triggers (such as a button click). Specific events are available for you to program your animations against.

These events are as follows:

➤ OnClick
➤ OnHoverOver
➤ OnHoverOut
➤ OnLoad
➤ OnMouseOver

➤ OnMouseOut

Creating animations is not as straightforward as many would like because it has little Visual Studio support, such as wizards or even IntelliSense.

For an example of creating your first animation, the following example shows how you can fade an element in and out of the page based on an end-user action.

Using the AnimationExtender to fade a background color:-

Output:

In this case, when you run the example, you will see that it uses a single AnimationExtender control that is working off the Panel1 control. This connection is made using the TargetControlID property. As stated, IntelliSense is not enabled when you are typing the code that is contained within the AnimationExtender control, so you need to look in the documentation for the animations that you want to create. In the case of the previous example, the <OnClick> element is utilized to defi ne a sequence of events that needs to occur when the control is clicked. For this example, only one animation is defined within the <Sequence> element a color change to the background of the element.

Here, the <Color> element states that the background CSS property will need to start at the color #999966 and change completely to color #FFFFFF within 5 seconds (defined using the Duration property). When you open this page and click the Panel element, you will see the color change in a 5-second duration from the described start color to the end color.

Read More

Ajax autocomplete extender example in asp.net without webservice

Ajax autocomplete extender example in asp.net without webservice 

In this topic we are going to see Ajax autocomplete extender example in asp.net without webservice .

The AutoCompleteExtender control enables you to help end users find what they might be looking for when they need to type in search terms within a textbox. This feature, used on a lot of search sites today, helps in that when you start typing characters in the textbox, you get results from a datastore as a drop-down list directly below the textbox you are working with that match what you have typed so far.

To establish something similar for yourself, create a new page that contains only a ScriptManager control, an AutoCompleteExtender control, and a TextBox control. The ASP.NET portion of the page should appear as presented in below mark up.

Like the other ASP.NET AJAX controls, you extend the TextBox control using the TargetControlID property.

create a Names database and a table. Execute the following sql statements in MS sql server.

Add the following code inside the code file.

When you run this page and type the characters "a" into the textbox, the GetNames() method is called, passing in this characters. These characters are retrievable through the prefixText parameter (you can also use the count parameter, which is defaulted at 10). The Names database is called using the prefixText value and this is what is returned back to the TextBox1 control. In the end, you get a drop down list of the items that match the first three characters that were entered into the textbox.

 

It is good to know that the results, once called the first time, are cached. This caching is controlled via the EnableCaching property (it is defaulted to true). You can also change the style of the drop-down autocomplete list, configure how many elements appear, and much more with this feature.

.cs

Read More

Ajax balloon popup extender example in asp.net

Ajax balloon popup extender example in asp.net

In this topic we are going to see ajax balloon popup extender example in asp.net.

One of the most requested additions to the Ajax Control Toolkit has always been a control that provides a balloon-like UI added to an element. Finally, starting with the November 2011 edition of the Ajax Control Toolkit, the team gave in and added such a control. 

The BalloonPopupExtender adds a “balloon” to the element referenced in the TargetControlID. The actual content of the balloon resides in an arbitrary control on the page; the extender´s BalloonPopupControlID property contains the ID of that control.


The extender supports several built-in styles (BalloonStyle property) and sizes (BalloonSize property), and also custom styling. The following example shows an example of providing a cloud-like balloon for a TextBox control.

Output:

Read More

ajax calendar extender control in asp.net example

ajax calendar extender control in asp.net example 

In this topic we are going to see ajax calendar extender control in asp.net example .

Selecting a date is a common requirement of many applications. It is also one of the most common points in a form that can hinder form submission. End users are often slowed down by trying to figure out the format of the date that the form requires. The CalendarExtender control enables you to make it simple for your end users to select a date within a form. The CalendarExtender attaches to a textbox and pops up a calendar for selecting a date. By default, the calendar is shown when the textbox gets focus, but if you set the PopupButtonID to the ID of another control, the calendar becomes visible when that control is clicked.

The best way to set up fast date selection in a form is to provide a calendar that can be navigated and allow a date to quickly be selected, which will then be translated to a textual date format in the textbox. The CalendarExtender is very easy to use with just a few key properties. The TargetControlID points to the textbox that receives the selected date. The Format property specifies the string format for the date input of the textbox. The CalendarExtender control gives you all the client-side code required for this kind of action.

The follwoing example of providing a calendar control off your textbox controls.

output

When you run this page, the result is a single textbox on the page, appearing no different from any other textbox. However, when the end user clicks inside the textbox, a calendar appears directly below it, as shown in the output. Then, when the end user selects a date from the calendar, the date is placed as text within the textbox.

Some of the properties exposed from this control are FirstDayOfWeek and PopupPosition (which has the options BottomLeft, BottomRight, TopLeft, and TopRight). You can also change how the calendar is initiated on the client. Some sites offer a calendar button next to the textbox and only pop up the calendar option when the end user clicks the button. If this is something that you want to do on your pages, use the PopupButtonID property, which you must point to the ID of the image or button that you are using.

Read More

Ajax collapsible panel extender example in asp.net

Ajax collapsible panel extender example in asp.net

In this topic we are going to see ajax collapsible panel extender example in asp.net.

collapsible panel extender:-

The Collapsible Panel Extender server control enables you to collapse one control into another. When working with two Panel server controls, you can provide a nice way to control any real estate issues that you might be experiencing on your ASP.NET page.

The CollapsiblePanelExtender is similar to the Accordion control, but it does not target multiple content areas. An ASP.NET panel control is shown or hidden from view based on the user’s interaction with a given control. This enables you to hide something the user does not always need to see. The TargetControlID is shown when the ExpandControlID is clicked or hidden when the CollapseControlID is clicked. Alternatively, it can be shown or hidden based on a mouse hover if the AutoCollapse and AutoExpand properties are set to True.

The following example demonstrates the use of a CollapsiblePanelExtender to set the panel size to 0 when it is collapsed and to 300 pixels when it is expanded. Another panel is used as the selector for expanding and collapsing the panel. In addition, a label is included that is designated as the TextLabelID. The value of the Label control is changed between the ExpandedText and CollapsedText values based on the current state.

output

In this case, when the page opens for the first time you will see only the contents of Panel1 — the title panel. By default, you would usually see both controls, but because the Collapsed property is set to True in the control, you will see only Panel1. Clicking the Panel control will then expose the contents of Panel2. In fact, the contents will slide out from the Panel1 control. Tying these two controls together to perform this action is accomplished through the use of the CollapsiblePanelExtender control. This control’s TargetControlID is assigned to the second Panel control — Panel2, because this is the control that needs to expand onto the page. The ExpandControlID property is the control that initiates the expansion.

Once expanded, it is when the end user clicks Panel2 that the contents will disappear by sliding back into Panel1. This is accomplished through the use of the CollapseControlID property being assigned to Panel2. The CollapsiblePanelExtender control has a number of properties that enable you to fine-tune how the expanding and collapsing occur. For instance, you could have also set the Label1 control to be the initiator of this process and even change the text of the Label control depending on the whether Panel2 is collapsed or expanded.

Read More

color picker asp.net ajax extender control example

color picker asp.net ajax extender control example

In this topic we are going to see color picker asp.net ajax extender control example.

ColorPickerExtender

One of the difficult data points to retrieve from an end user is color. This particular data point is tough to define if you are using just text. If you have an open selection of colors, how does the end user define a darker shade of blue? For this reason, you have the ColorPickerExtender to quickly and easily extend something like a TextBox control to a tool that makes this selection process a breeze. 

The following example shows a quick and easy way to do this task.

 When this page opens, you simply have a single TextBox server control on the page. Applying focus to this TextBox control pops up the color selector.

The end user then can scroll across the color options and after the user selects one of these colors, the pop-up disappears and the hexadecimal color code is shown in the TextBox.

Read More

Display validation summary in a popup in asp .net

Display validation summary in a popup in asp .net

In this topic we are going to see how to Display validation summary in a popup in asp .net.

The ValidationSummary Server Control:-

The ValidationSummary control does not perform validations on the content input into your Web Forms. Instead, it’s a reporting control that the other validation controls on a page use. You can use this validation control to consolidate error reporting for all the validation errors that occur on a page instead of leaving it up to each individual validation control.

You might want this capability for larger forms, which have a comprehensive form-validation process. In this case, you may find having all the possible validation errors reported to the end user in a single and easily identifiable manner to be rather user-friendly. You can display these error messages in a list, bulleted list, or paragraph. This example asks the end user for her first and last name. Each textbox in the form has an associated RequiredFieldValidator control assigned to it. When the page is built and run, the user’s clicking the Submit button with no values placed in either of the textboxes causes both validation errors to fire.

validation summary in a popup:-

Output:

From this code example, you can see that the ShowSummary property is set to false — meaning that the bulleted list of validation errors are not shown on the actual web page. However, because the ShowMessageBox property is set to true, you now get these errors reported in a message box.

Read More

Display alert message in asp.net code behind

Display alert message in asp.net code behind

In this topic we are going to see how to Display alert message in asp.net code behind using C# and Vb.net

Using Page.ClientScript.RegisterClientScriptBlock:-

The RegisterClientScriptBlock method allows you to place a JavaScript function at the top of the page. This means that the script is in place for the startup of the page in the browser.

C#

vb
output

From this example, you can see that you create the JavaScript function AlertHello() as a string called myScript. Then using the Page.ClientScript.RegisterClientScriptBlock method, you program the script to be placed on the page.

Using Page.ClientScript.RegisterStartupScript

The RegisterStartupScript method is not that different from the RegisterClientScriptBlock method. The big difference is that the RegisterStartupScript places the script at the bottom of the ASP.NET page instead of at the top.

C#
VB
  Output

So what difference does it make where the script is registered on the page?
A lot, actually!
If you have a bit of JavaScript that is working with one of the controls on your page, in most cases you want to use the RegisterStartupScript method instead of RegisterClientScriptBlock.

For example:- you use the following code to create a page that includes a simple <asp:TextBox> control that contains a default value of “Hello” Then use theRegisterClientScriptBlock method to place a script on the page that utilizes the value in the TextBox1 control.

Read More

Asp.net file upload error access to the path is denied

Asp.net file upload error access to the path is denied

In this topic we are going to see asp.net file upload error access to the path is denied.

You might receive errors when your end users upload files to your web server through the FileUpload control in your application. Errors may occur because the destination folder on the server is not writable for the account used by ASP.NET. If ASP.NET is not enabled to write to the folder you want, you can enable it using the folder’s properties.

Giving asp.net proper permissions to upload files:-

First, right-click on the folder where the ASP.NET files should be uploaded and select Properties from the provided menu. The Properties dialog box for the selected folder opens. Click the Security tab to make sure the IIS_IUSRS account is included in the list and has the proper permissions to write to disk. If it is enabled, you see something similar to what is presented in Figure.

If you do not see the IIS_IUSRS account in the list of users allowed to access the folder, add it by clicking the Add button and entering IIS_IUSRS in the text area provided

Click OK, and you can then click the appropriate check boxes to provide the permissions needed for your application.

Read More

Bind array list to dropdownlist in asp.net

Bind array list to dropdownlist in asp.net

In this topic we are going to see how to Bind array list to dropdownlist in asp.net .

The DropDownList control comes in handy when you start binding it to various data stores. The data stores can be arrays, database values, XML file values, or values found elsewhere. For an example of binding the DropDownList control, this next example looks at dynamically generating a DropDownList control from one of three available arrays.

Binding string array list to dropdownlist:-

C#

In this example, the second drop-down list is dynamically generated based upon the value selected from the first drop-down list. For instance, selecting Car from the first drop-down list dynamically creates a second drop-down list on the form that includes a list of available car selections.

This is possible because of the use of the AutoPostBack feature of the DropDownList control. When the AutoPostBack property is set to True, the method provided through the OnSelectedIndexChanged event is fired when a selection is made. In the example, the DropDownList1_SelectedIndexChanged event is fired, dynamically creating the second drop-down list.

In this method, the content of the second drop-down list is created in a string array and then bound to the second DropDownList control through the use of the DataSource property and the DataBind() method.

Read More

Difference between Empty cache vs. primed cache

Difference between Empty cache vs. primed cache

In this topic we are going to see the Difference between Empty cache vs. primed cache.

Empty cache vs. primed cache:-

A web browser stores certain downloaded items for future use in a browser cache folder.Images, JavaScript, CSS, and even entire web pages are examples of cache items. Before you start looking at tools that allow you to profile a website, it’s important to understand the differences between an empty cache and a primed cache. The first time you visit a website, you won’t have a cache of that site. But as you continue to browse the website, the browser cleverly stores the components you download in this temporary folder cache. The next time you visit the same website, you’ll have a primed cache that contains the website’s cached items. The browser does this so that on subsequent visits to the same website, it can easily retrieve the components, which speeds up your download time.

The empty cache shown in figure represents the first time a user visits a site. Compare that to the primed cache for the same website. You can see the difference in both the number of HTTP requests and the total weight of the web pages. The total weight of the web page on the left is 130K; the total weight for the primed cache on the right is 39.8K.

All the components that were saved from the first visit were retrieved from the cache, thus cutting the download time and weight drastically. An important question to ask yourself when analyzing your website is “How many of my users are first-time visitors (who will have an empty cache) and how many are repeat visitors (who will have a primed cache)?” When you answer this question, based on statistics gathered while using a website analytics package, you’ll understand where to focus while you’re optimizing your website’s performance. If you don’t use a website analytics package or you don’t have enough data to determine visitor trends, it can be helpful to think about the domain of your website.

Is it an intranet website that might expect a lot of repeat visits throughout the day? Is it a site expecting to attract a lot of new visits? This mindset allows you to put yourself in the shoes of the user so you can improve and enhance their site experience. It’s also important to note that both the primed and empty caches of a browser need to be taken into account when profiling, implementing, and monitoring a web page. Sometimes you may find yourself refreshing a web page and getting skewed results because the browser is actually retrieving the components from its cache instead of fetching a fresh version on an empty cache. Most browsers will allow you to refresh a page by hitting the F5 key, which might load the page from cache. But Ctrl-F5 forces a cache refresh, and will guarantee that you’ll get the newest content. You may also find that some browsers allow you to force a cache refresh by holding Shift (or Ctrl) and clicking the refresh icon. Keep this in mind when you’re profiling your site because you might be profiling a web page that’s been updated on the server but isn’t reflected in your browser because of caching.

Read More

what is the use on minification?

what is the use on minification?

In this topic we are going to see what is the use on minification?

As a web developer, it’s important for you it’s important for you to look for imaginative ways to improve your page load times. This often involves reducing the number or weight of the HTTP requests that a user makes when loading a web page. In this topic we examine minification, which will help you make fewer HTTP requests and severely reduce the weight of your web pages. ASP.NET 4.5 has fantastic new features that allow you to apply both techniques to your web application easily and automatically.

What is minification? 

Most developer-written JavaScript or CSS contains loads of extra spaces and line breaks that don’t get run when the code is executed. Removing these unnecessary spaces and line breaks, a technique known as minification, reduces the overall size of the file and, in turn, results in faster page load time, without affecting the integrity of its contents. The code downloads and executes faster, but the code will run in the very same manner—it’s an easy win!

When CSS or JavaScript is minified, it starts to lose its readability. It’s important to understand that while humans might struggle to read the code, the browser will have no trouble processing it. This is a necessary evil because the removal of whitespace and the obfuscation that results will ultimately help the file load faster. The built-in support for minification that comes with Visual Studio 2012 is also intelligent enough that while you’re developing you’ll be able to see the full, unminified code. When you run your website in Release mode, the code will automatically get minified on the fly for you.

If we take a typical CSS file and minify it, the results compared to the original version are very different in both appearance and file size. The next listing shows a CSS snippet before it’s been minified.

As you can see, the CSS contains unnecessary spaces, tabs, and line breaks. Although this makes the code a lot easier to read and prettier to the human eye, ultimately it adds extra weight to the overall size of the file. The next listing shows you what the code looks like after it’s been minified.

Differences between the two listings are visible immediately. The code has no spaces, and the comments, tabs, and line breaks have been removed, making the code snippet a lot smaller. These two examples use a small piece of code, but imagine the difference this could make if minification were applied to all the CSS and JavaScript in your application.

JavaScript can be minified and obfuscated to reduce the file size even further. Look at the following JavaScript code before it has been minified.

The code in the next listing has been obfuscated and minified, and there’s a big difference in the readability of the file. Although the minified code isn’t easy on the human eye, it’s perfectly acceptable to use the compressed version on the server after development has been completed.

Developers often like to keep two versions of their code: one for debugging and one for deployment in a live environment. When you visit the jQuery website, you’ll notice that there’s an option to download a minified version of jQuery. The filename will often end in .min.js, which has become the standard method of naming the files. The unminified version will be named something like jquery-1.8.0.js, while the minified version will be called jquery 1.8.0.min.js. This makes it easy to identify the files while you’re developing your application.

Table contains a list of common JavaScript and CSS frameworks and the differences in their file sizes before and after minification.

Filenames	File size before minification	File size after minification	File size savings
Jquery	225.78 kb	93.28 kb	58.68%
Jquery Mobile	240 kb	91 kb	62%
Twitter Bootstrap css	98 kb	80 kb	19%

As you can see from table , the size savings vary considerably across the different files, and is probably due to factors such as whitespace, comments, and line breaks. If we can achieve this level of file size savings with no functional changes to our code, it seems obvious that minifying the code is a free and easy. If you prefer to minify your files manually, there are many online tools that allow you to do so. The online YUI compressor uses the Yahoo! YUI compressor to easily minify both JavaScript and CSS. All you have to do is paste the contents of the file into the textbox and you’ll be presented with an option to download the minified file. The web application is available at http://refresh-sf.com/yui/. Another tool for use with JavaScript is the Google Closure Compiler. It’s used in many of Google’s JavaScript apps, including Gmail, Google Web Search, Google Maps, and Google Docs. An online version of the tool is available at closurecompiler. appspot.com. There are many other tools available on the web, but keep in mind that each might use a different algorithm and a slightly different method of minification. What’s important is that they all use minification techniques that significantly reduce the size of these files. The only downside to using these online tools is that the minification process is manual; you’ll have to upload each version of your CSS and JavaScript and wait for the download before adding it back into your project.

Read More

Label control in asp.net with example

Label control in asp.net with example

In this topic we are going to see how to use Label control in asp.net with example

The ASP.NET Framework includes two controls you can use to display text in a page: the Label control and the Literal control. Whereas the Literal control simply displays text, the Label control supports several additional formatting properties.

Using the Label Control :-

Whenever you need to modify the text displayed in a page dynamically, you can use the Label control. For example, the following example dynamically modifies the value of a Label control’s Text property to display the current time.

HtmlMark up:-

C#-code

Output-

Any string that you assign to the Label control’s Text property is displayed by the Label when the control is rendered. You can assign simple text to the Text property, or you can assign HTML content.

As an alternative to assigning text to the Text property, you can place the text between the Label control’s opening and closing tags. Any text that you place before the opening and closing tags is assigned to the Text property.


By default, a Label control renders its contents in an HTML <span> tag. Whatever value you assign to the Text property is rendered to the browser enclosed in a <span> tag.

Read More