How to create water text mark on asp.net textbox ?


DefaultSearch

Hi

We can create water text mark on asp.net textbox using two approach
a. Using ajax toolkit
b.Using Jquery

Recently i used this feature in one of my personal project using jquery like this. Here is the complete working code


<%@ Page Language="C#" AutoEventWireup="true" CodeFile="SearchForm.aspx.cs" Inherits="SearchForm" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
     <script type="text/javascript">
         $(document).ready(function () {
             var searchBox = $("#<%=txtName.ClientID %>");
             searchBox.focus(
             function () {
                 if (searchBox.val() == this.title) {
                     searchBox.removeClass("defaultCSS");
                     searchBox.val("");
                 }
             });

             searchBox.blur(
             function () {
                 if (searchBox.val() == "") {
                     searchBox.addClass("defaultCSS");
                     searchBox.val(this.title);
                 }

             });
             searchBox.blur();
         });
     
     </script>
     <style type="text/css" media="screen">
     .defaultCSS
     {
         color:#CCCCCC;
         font-style:italic;
     }
     
     </style>

</head>

<body>
    <form id="form1" runat="server">
    <div>
    <p><asp:TextBox ID="txtName" runat="server" Width="150px" ToolTip="Enter the city Name"/><asp:Button ID="btnSearch" runat="server" Text="Search" /></p>
        
    </div>
    </form>
</body>
</html>


Advertisements

How to create rounded button in asp.net using css 3.0 ?


RoundButton
Hi

Css 3.0 has been added one of excellent feature to create the rounded button without using any background image with few line of css code. We can create the rounded button in asp.net using css 3.0 like this.


<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default3.aspx.cs" Inherits="Default3" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
<style type="text/css">
.roundcorner
{
border:2px solid #a1a1a1;
padding:5px 50px; 
background:#dddddd;
width:70px;
border-radius:25px;
-moz-border-radius:35px; /* Firefox 3.6 and earlier */
}
</style>
</head>
<body>
 <form id="form1" runat="server">
 <br />
<div><asp:Button ID="btnHome" runat="server" CssClass="roundcorner" Text="Home" /> </div> <br />
<div><asp:Button ID="Button1" runat="server" CssClass="roundcorner" Text="About Us" /> </div> <br />
<div><asp:Button ID="Button2" runat="server" CssClass="roundcorner" Text="Contact Us" />  </div> <br />
<div><asp:Button ID="Button3" runat="server" CssClass="roundcorner" Text="Address" />  </div> <br />
</form>
</body>
</html>



How to select value of html radio button list using Javascript ?


radio1
Hi
One of my friend, asked with me, how to select the value of html radio button list using Javascript ?

In html radio button list, we can select the value like this


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/jscript">
        function getResults() {
            var radios = document.getElementsByName("group1");

            for (var i = 0; i < radios.length; i++) {
                if (radios[i].checked) {
                    alert(radios[i].value);
                    break;
                }
                        }

//            if (radios[0].checked) {
//                alert('Male');
//            }
//            else {
//                alert('Female');
//            }

           
        }
    
    </script>
</head>
<body>
<input type="radio" value="Male" id="radio1" name="group1" /> Male  
<input type="radio" value="Female" id="radio2" name="group1" /> Female <br />
<br />
<input type="button" id="btnClik" value="Click Here" onclick="getResults();" />
</body>
</html>


How to implement remember me functionality using cookie in asp.net ?


Cookies
Hi

So many time we will get scenario to remember some frequently used data on browser only for example userId and password of some site. Then we can do this task using cookies in asp.net like this


using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (Request.Cookies["UserName"] != null)
        {
            txtuserName.Text = Request.Cookies["Username"].Value;
        }

    }
    protected void btnClick_Click(object sender, EventArgs e)
    {

        if (CheckBox1.Checked)
        {
            Response.Cookies["Username"].Value = txtuserName.Text;
            Response.Cookies["Username"].Expires = DateTime.Now.AddDays(7);
        }
    }
}

How to call javascript on button click without postback in asp.net ?


Hi

One time i was giving interview, then i got this question, “How to call javascript on button click without postback in asp.net ?”

It is very simple trick, we can call like this

<asp:Button ID="btnClick" runat="server" text="Click here" OnClientClick="Hello();return false;" />

How to access the content page control from master page click event ?


masterpage

Hi

One time, i was asked this question in one of my interview “How to access the content page control from master page click event ?”

here is the exact answer, we can access the content page from master page click event using Findcontrol like this

protected void btnClick_Click(object sender, EventArgs e)
{
TextBox txtbox1 = (TextBox)ContentPlaceHolder1.FindControl(“Textbox1”);
if (txtbox1 != null)
{
txtbox1.Text = “Content Textbox”;
}
}

Note: I have written this code in master page on btnclick event

How to design master page with proper CSS ?


masterpage
Hi

I have seen so many person used to design the master page in asp.net without writting CSS just like drag, drop and so many hardcoded alignment with in that master page. But it is not a good practice ane even though html page will look so dirty.

For design any master, you can write proper external css class which will be applicable in all the page like this

Step1: Write this in external CSS file

html
{
font-family:Tahoma;
font-size:14px;
font-style:normal;
background-color:Silver;
}
.Content
{
margin:auto;
width:700px;
background-color:white;
border:Solid 1px black;
}

Note: here whatever css you will write in html portion that will be applicable to all the pages where you will call css file reference.

Step 2: drag and drop the css reference in master header portion
Step3 : Call the CSS class in master in like

<form id=”form1″ runat=”server”>
<div class=”Content”>
<div>This is the header part</div>
<asp:Button ID=”btnClick” runat=”server” Text=”Click Here”
onclick=”btnClick_Click” />
<asp:ContentPlaceHolder id=”ContentPlaceHolder1″ runat=”server”>

</asp:ContentPlaceHolder>
<div>This is the footer part</div>
</div>
</form>