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