Nikolaos Kantzelis ASP.Net Blog

This blog will focus on ASP.NET Framework

Sponsors

About Me

Great Blogs

July 2010 - Posts

How to change the master page depending on the client's browser

In one of my seminars on ASP.Net, I was asked a question from a student regarding master pages and the various browser appications.

He basically asked if it was possible to have a different master page depending on the client's browser.

My initial answer was to find the browser's version programmatically and according to this value to have a particular master page dynamically assigned during the PreInit stage of the Page lifecycle.

But there is a simpler way.At first we need to create a website using Visual Studio 2008/2010.

Then copy the original Site.master page to the root directory of the website and rename it to AnotherSite.master.

Then we need to copy and paste in the root direcotory the Site.css and rename it to NewSite.css.

So we have now two master pages and two .css files.

Edit the AnotherSite.master and change the css reference

from

Snippet

 <link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
to
Snippet
 <link href="~/Styles/NewSite.css" rel="stylesheet" type="text/css" />
 Now we do need to make some changes to the Newsite.css file.
 you can change the background color, for example
Snippet
Snippet
body   
{
 background:#efefef;
 ....

 The page layout

Snippet

.page
{
    width1200px;

 

Now we can go add a new web form to our page. We will call it "Anotherpage.aspx".

Select as a master page the AnotherSite.master.

Then go to the "Source" of the newly created page and edit the Page directive according to the following line.

 Snippet

<%@ Page Title="" Language="C#" mozilla:MasterPageFile="~/AnotherSite.master" 
ie:MasterPageFile="~/Site.master" AutoEventWireup="true"
 CodeFile="MyNewPage.aspx.cs" Inherits="MyNewPage" %>
 
Run your application with IE and Firefox and notice the respective masterpages
being applied to the web page.
Hope it helps!!! 
Posted: Jul 26 2010, 10:11 PM by nikolaosk | with 3 comment(s) |
Filed under: ,
ASP.Net and JQuery - How to access all textboxes using JQuery

I am going to start a series of posts on ASP.Net and JQuery that will explain a lot of common tasks that can be accomplished using this fantastic open source Javascript library.

Initially I found out about JQuery when I did browse Scott's Gu blog post. Have a look here as well if you want to see the official announcement from the JQuery people.

It is widely known that JQuery ships now with Visual Studio. You can find it as a seperate download here.

Sadly, we canot cover the basics of JQuery in this post so here are a few resources for you to focus on

In this first post I will show you how to access all textboxes using JQuery.

We will demonstrate this with a step by step example. I will use Visual Studio 2010. You can also use Visual Studio 2008 if you do not have Visual Studio. Express editions work fine.

1) Create an ASP.Net website. Choose an appropriate name for your site.

2) Now we have the default web site ready. We will add some textboxes in the default.aspx page

so the code-markup looks like this

Snippet

  <asp:TextBox ID="Txt1" runat="server" Text="MyFirstTextBox"></asp:TextBox><br />
        <asp:TextBox ID="Txt2" runat="server" Text="MySesondTextBox"></asp:TextBox><br />
        <asp:TextBox ID="Txt3" runat="server" Text="MyThirdTextBox"></asp:TextBox><br />
        <asp:TextBox ID="Txt4" runat="server" Text="MyFourthTextBox"></asp:TextBox><br />
        <asp:Button ID="btn1" runat="server" Text="Display" />
  <p id="showselected"></p>

 3) In the Site.master file before the </head> tag add this line of code

Snippet

<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>

4) In the <head> section of the Site.master page we need to add the actual  JQuery code that makes the selection of the textboxes text possible

Snippet

 <script>
         $(function () {
             $('input[id$=btn1]').click(function (e) {
                 e.preventDefault();
                 $("#showselected").text('')
                .append($("input:text").map(function () {
                    return $(this).val() || null;
                }).get().join("<br/>  "));
             });

          
         });
    </script>
 

When the button is clicked, the postback is prevented using e.preventDefault().We then use a
Selector to match all input elements of type text (input:text) I am using the map function to iterate though the textbox controls.

We do apply a filter , which is that we do not want to have textboxes with empty values appended in the paragraph with id "showselected". Run your application and check that everything works ok.

5) If you want to display only some textboxes you can use a class property.

So you can add in the markup

Snippet

 <asp:TextBox ID="Txt5" runat="server" Text="MyFifthTextBox" CssClass="sel"></asp:TextBox><br />
 <asp:TextBox ID="Txt6" runat="server" Text="MySixthTextBox" CssClass="sel"></asp:TextBox><br />

Now we need to modify our JQuery code.Add this code just below the code we entered in the <head> section of the Site.master page.

Snippet

  $('input[id$=btn2]').click(function (e) {
                e.preventDefault();
                $("#showselected").text('')
                .append($("input.sel").map(function () {
                    return $(this).val() || null;
                }).get().join("<br/>  "));
            });

Run your application and check that everything works ok. Only the content of the last two textboxes will be shown.

I have tested this JQuery example with all the modern browsers.Please note that you do need to have a basic understanding of JQuery to fully understand this and the following JQuery & Asp.net tutorials.

Hope it helps.

More Posts