How to create twitter style nice button ?


Hi

Here is handy online tool available for creating nice twitter style button.

http://charliepark.org/bootstrap_buttons/

Here no need to our own css, this tool will create css for us and we can use in our web project.

How to display alert message from code behind file in asp.net ?


Hi

There are so many approaches to display alert message from code behind file i.e by vb.net and C#. But one of the easiest ways to display alert message using Ajax ScriptManager like this

Write code on buttonclick event like this


 protected void Button1_Click(object sender, EventArgs e)
    {
        // Here will be your some conditional code
        ScriptManager.RegisterStartupScript(this, GetType(), "showalert", "alert('Data has been added Sucessfully');", true);
    }

How to do basis validation using Javascript in asp.net ?


Hi

So many time, we will get scenario to do validation work or some other stuff using JavaScript in asp.net. Here is the basic validation syntax using JavaScript in asp.net.

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

<!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 id="Head1" runat="server">
    <title></title>
    <script type="text/javascript">
                function doValidation() {
                    var name = document.getElementById("<%=txtEmpName.ClientID%>").value;
                    var empSal = document.getElementById("<%=txtEmpSal.ClientID%>").value;
                    var empAddress = document.getElementById("<%=txtEmpAddress.ClientID%>").value;
                    if (name == "") {
                        alert("Please enter the EmpName");
                    }
                    else if (empSal == "") {
                        alert("Please enter the EmpSal");
                    }
                    else if (isNaN(empSal)) {
                        alert("Invalid EmpSal");
                    }
                    else if (empAddress == "") {
                        alert("Please enter the EmpAddress");
                    }

                }
                
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        EmpName:
        <asp:TextBox ID="txtEmpName" runat="server" />
        <br />
        <br />
        &nbsp;&nbsp;&nbsp;&nbsp; EmpSal
        <asp:TextBox ID="txtEmpSal" runat="server" />
        <br />
        <br />
        EmpAddress
        <asp:TextBox ID="txtEmpAddress" runat="server" />
        <br />
        <br />
        <asp:Button ID="btnClick" runat="server" OnClientClick="doValidation();return false;"
            Text="Submit" />
    </div>
    </form>
</body>
</html>

How to check EmailId availability on clientside using WCF and Ajax ?


EmailAvailability

Hi
So many time while creating registration page we will get scenario to check EmailId availability in database. We can do this using so many ways. But if we will do using direct c# code behind approach then full post-back will happen. So it will make so slow.

We can do this task using WCF and Ajax scriptmanager control on client side without any postback.

Step1: Create Ajax Enable WCF service like this. I hope your are knowing all the basis stuff to do this task.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Runtime.Serialization;
using System.ServiceModel;
using System.ServiceModel.Activation;
using System.ServiceModel.Web;
using System.Text;
using System.Data;
using System.Data.SqlClient;

[ServiceContract(Namespace = "")]
[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
public class Service
{
	// To use HTTP GET, add [WebGet] attribute. (Default ResponseFormat is WebMessageFormat.Json)
	// To create an operation that returns XML,
	//     add [WebGet(ResponseFormat=WebMessageFormat.Xml)],
	//     and include the following line in the operation body:
	//         WebOperationContext.Current.OutgoingResponse.ContentType = "text/xml";
    [OperationContract]
    public string CheckEmailId(string emailID)
    {
        string status = string.Empty;
        // Add your operation implementation here
        using (SqlConnection con = new SqlConnection("Data Source=.\\SQLEXPRESS;AttachDbFilename=|DataDirectory|\\Database.mdf;Integrated Security=True;User Instance=True"))
        {
            using (SqlCommand cmd = new SqlCommand("Select EmailId from tblEmail where EmailId=@EmailId", con))
            {
                cmd.Parameters.AddWithValue("@EmailId", emailID);
                DataTable dt = new DataTable();
                SqlDataAdapter da = new SqlDataAdapter(cmd);
                da.Fill(dt);
                if (dt.Rows.Count > 0)
                {
                    status = "Available";
                }
                else
                {
                    status = "Not Available";
                }
                return status;

            }
        }
    }

	
}


Step 2: Consume the Service using ScriptManager in aspx page like this

Step 3: Call the WCF method using Javascript like this

function EmailIdCheck() {
Service.CheckEmailId(document.getElementById(‘txtEmailId’).value, onSuccess, null, null);

}

function onSuccess(result) {

// $get(“lblmsg”).innerHTML = result;
if(result == ‘Available’)
{
// Img1.src = tick.png;
var imgDisplay = $get(“imgDisplay”);
imgDisplay.src = “tick.png”;
imgDisplay.style.display = “block”;
$get(“lblmsg”).innerHTML = “Sorry this EmailId has been taken.”;
$get(“lblmsg”).style.color = “green”;
}
else {
// Img1.src = unavailable.png;
var imgDisplay = $get(“imgDisplay”);
imgDisplay.src = “unavailable.png”;
imgDisplay.style.display = “block”;
$get(“lblmsg”).innerHTML = “Not Available”;
$get(“lblmsg”).style.color = “red”;
}

}

Step 4: On aspx Textbox onblur event call the javascript method like this

Now you can validate the EmailId on client side using this few steps

Here is the complete .aspx code

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

<!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 language="javascript" type="text/javascript">
        function EmailIdCheck() {
            Service.CheckEmailId(document.getElementById('txtEmailId').value, onSuccess, null, null);
           
        }

        function onSuccess(result) {

            // $get("lblmsg").innerHTML = result;
            if(result == 'Available')
            {
                // Img1.src = tick.png; 
                var imgDisplay = $get("imgDisplay");
                imgDisplay.src = "tick.png";
                imgDisplay.style.display = "block";
                $get("lblmsg").innerHTML = "Sorry this EmailId has been taken.";
                $get("lblmsg").style.color = "green";
            }
            else {
                //  Img1.src = unavailable.png;
                var imgDisplay = $get("imgDisplay");
                imgDisplay.src = "unavailable.png";
                imgDisplay.style.display = "block";
                $get("lblmsg").innerHTML = "Not Available";
                $get("lblmsg").style.color = "red";
            }

        }

</script>

    <style type="text/css">
        .style1
        {
            width: 100%;
        }
        .style2
        {
            width: 276px;
        }
        .style3
        {
            width: 102px;
        }
        .style4
        {
            width: 144px;
        }
        .style5
        {
            width: 19px;
        }
    </style>

</head>
<body>
    <form id="form1" runat="server">
    <div>
 
        <br />
        <table class="style1">
            <tr>
                <td class="style2">
                    &nbsp;</td>
                <td class="style3">
                    Email Id:&nbsp;&nbsp;</td>
                <td class="style4">
                    <asp:TextBox ID="txtEmailId" onblur="EmailIdCheck();"  runat="server" />
                </td>
                <td class="style5">
                     <img id = "imgDisplay" alt="" src="" style = "display:none"/></td>
                <td>
                     <asp:Label ID="lblmsg" runat="server"/> </td>
            </tr>
            <tr>
                <td class="style2">
                    &nbsp;</td>
                <td class="style3">
                    &nbsp;</td>
                <td class="style4">
                    &nbsp;</td>
                <td class="style5">
                    &nbsp;</td>
                <td>
                    &nbsp;</td>
            </tr>
            <tr>
                <td class="style2">
                    &nbsp;</td>
                <td class="style3">
                    EmpName:</td>
                <td class="style4">
                    <asp:TextBox ID="txtName" runat="server" />


     
       

                </td>
                <td class="style5">
                    &nbsp;</td>
                <td>
                    &nbsp;</td>
            </tr>
            <tr>
                <td class="style2">

        <asp:ScriptManager ID="ScriptManager1" runat="server">
        <Services>
        <asp:ServiceReference Path="~/Service.svc" />
        </Services>
        </asp:ScriptManager>


                </td>
                <td class="style3">
                    &nbsp;</td>
                <td class="style4">
                    &nbsp;</td>
                <td class="style5">
                    &nbsp;</td>
                <td>
                    &nbsp;</td>
            </tr>
        </table>

    </div>
    </form>
</body>
</html>


.

Posted in Ajax, WCF. 1 Comment »

DateTime Conversion issue with C# in asp.net


Hi
So many times we will scenario to convert to string to DateTime while saving in Database and DateTime to string while displaying on textbox of page. If we donot use the exact conversion format then it will create so much problem.

a. String to DateTime Format
Suppose in database I have declared some field as DateTime then I have to pass the input as DateTime only.

objBE.DeliveredDate = DateTime.ParseExact(txtDeliveredDate.Text, “dd/MM/yyyy”, null);

Note: Here objBE.DeliveredDate field is DateTime which have been declared in BE layer.

b. DateTime to String Format

Supposed if we have to fetch the date from database and to display on Textbox then obviously we have to convert into string format. So we can do like this

DateTime aDate = Convert.ToDateTime(dt.Rows[0][“ArrivalDate”]);
txtArrivalDate.Text = aDate.ToString(“dd/MM/yyyy”);

How to return value from Javascript Function ?


JSFunction
Hi

Function is the heart of java script. If you will do anythings in java script then you have to write function.

While working on asp.net project so many time we get scenario to retun value from some function and display somewhere.

But here we can do like C# method. We have to include retun at end of function like this


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

<!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 type="text/javascript">
        function sayHello() {
            var msg = "I m from Javacript";
            return msg;
        }

        function doSomething() {
            var msg1 = sayHello();
            document.getElementById('<%=txtMsg.ClientID %>').value = msg1;
            
        }

    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <asp:Button ID="btnclick" runat="server" OnClientClick="doSomething();return false;" Text="Click Here" />
    <br />
    <br />
    <asp:TextBox ID="txtMsg" runat="server" />
    </div>
    </form>
</body>
</html>


Arrays in javascript


Hi

Array is very important concept in JavaScript.Here i m including the basis concept of JavaScript Arrays

What is an array in JavaScript ?
An Array is a special variable, which can hold more than one value at a time
Ways of creating arrays in javascript
An array can be created in 3 ways
1. Regular way

var empName = new Array(5);
empName[0] = “Ram”;
empName[1] = “Mohan”;
empName[2] = “Hari”;
empName[3] = “Chandradev”;
empName[4] = “Rajan”;

2. Condensed Way

var empName = new Array(“Ram”, “Mohan”, “Hari”,”Chandradev”);

3. Literal Way

var empName = [“Ram”, “Mohan”, “Hari”,”Chandradev”];

Way of Access Arrays
Var name= empName[0];

In array there are so many inbuilt function
Like
1.Push
2.Pop
3.shift
4.Slice
5.Sort
6.Concate
7.Join
8. toStrings

Sample code for Slice function

//for Slice functionality
function ArrayTestSlice() {
var empName = [“Ram”, “Mohan”, “Arjun”, “Chandradev”];
var sEmpName = empName.slice(1);
var s1EmpName = empName.slice(1, 3);
alert(sEmpName); // output: Mohan,Arjun,Chandradev
alert(s1EmpName); // output: Mohan,Arjun

}

Complete code for Array in Javascript


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

<!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 type="text/javascript">

        //First ways 
        function ArrayTestRegular() {
            var empName = new Array(5);
            empName[0] = "Ram";
            empName[1] = "Mohan";
            empName[2] = "Hari";
            empName[3] = "Chandradev";
            empName[4] = "Rajan";
            for (var i = 0; i < empName.length; i++) {
                // console.log(empName[i]);
                //alert(empName[i]);
                document.writeln(empName[i]);
            }
        }

        //Second ways
        function ArrayTestLiteralWay() {
            var empName = ["Ram", "Mohan", "Hari","Chandradev"];
            empName.sort();
            for (var i = 0; i < empName.length; i++) {
               // alert(empName[i]);
                document.writeln(empName[i]);
            }
        }

        // 3rd Ways
        function ArrayTestCondensed() {
            var empName = new Array("Ram", "Mohan", "Hari", "Chandradev");
            empName.sort();
            for (var i = 0; i < empName.length; i++) {
                 alert(empName.valueOf());
               // document.writeln(empName[i]);
            }

        
            
        }
    
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <asp:Button ID="btnClick" runat="server" OnClientClick="ArrayTestCondensed();return false;" Text="Submit" /> 
    </div>
    </form>
</body>
</html>