Share Point 2010 | Angular Js | ASP.NET | C#

Wednesday, November 13, 2013

Validate DropdownList using jQuery

"This post is all about how to validate DropdownList using jQuery".

DropdownList is one of the common fields we use in all kind of web forms in almost every web application. It is common to apply validations on certain fields in all web forms. Here in this post we are going to see how to validate DropdownList using jQuery.
Here in our case, I am using a simple Webform with a DropdownList and a button. The DropdownList has a collection of categories, if the user doesn’t select a category an alert event fires up saying the user to choose a category.

Also look in to these posts:
Bind a DropdownList with Database Values
How to Refresh a Webpage dynamically using jQuery
How to merge two tables into one table using jQuery

In order to do this the following code is to be followed.

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
  <title></title>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
  </script>
  <script type="text/javascript">
        $(document).ready(function () {
            $('#btnCheck').click(function () {
                if ($("#ddlCategory").val() > 0) {
                    return true;
                }
                else {
                    alert('Please choose a category')
                    return false;
                }
            })
        });
 
    </script>
</head>
<body>
    <form id="myForm" runat="server">
        <div>
            <b>Selected Category:</b>
            <asp:DropDownList ID="ddlCategory" runat="server">
                <asp:ListItem Text="--Choose--" Value="0" />
                <asp:ListItem Text="Education" Value="1" />
                <asp:ListItem Text="Sports" Value="2" />
                <asp:ListItem Text="Entertainment" Value="3" />
                <asp:ListItem Text="Business" Value="4" />
                <asp:ListItem Text="Trading" Value="5" />
            </asp:DropDownList>
            <asp:Button ID="btnCheck" Text="Check" runat="server" />
        </div>
    </form>
</body>
</html>

This is how you validate a DropdowlList using jQuery.Hope this post helps you and feel free to post your suggestions and comments on it.
For more posts on jQuery click jquery tricks

Tuesday, November 12, 2013

Bind a DropdownList with Database Values

"In this post I am going to explain you how to bind the drop-down list items with the values present in your database table".
Generally for static pages we add the drop-down list items manually. But what if the application is dynamic. We need to fetch the dropdown list items from the database accordingly.
So here i am going to explain how to bind the drop-down list with database values with a simple example
First create a table with name as Contacts in your database as below:

‘UserId’ should be the primary key and set its column property ‘Identity Specification’ to yes.
The following should be the code in your .aspx page:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <b>Selected UserName:</b>
            <asp:DropDownList ID="ddlCountry" runat="server" />
        </div>
    </form>
</body>
</html>

Also look in to these posts:
Populating GridView with Textbox values
Value Types and Reference Types in .Net
Boxing and UnBoxing in c# with Examples

And here is the code behind:

   protected void BindLocation()
    {
        
        using (SqlConnection cn = new SqlConnection("Data Source=localhost;

              Integrated Security=true;Initial Catalog=Your Database Name"))
        {
           cn.Open();
           SqlCommand cmd = new SqlCommand("Select UserId,Location FROM Contacts",cn);
           SqlDataAdapter da = new SqlDataAdapter(cmd);
           DataSet ds = new DataSet();
           da.Fill(ds);
           ddlLocation.DataSource = ds;
           ddlLocation.DataTextField = "Location";
           ddlLocation.DataValueField = "UserId";
           ddlLocation.DataBind();
           ddlLocation.Items.Insert(0, new ListItem("—Select Location--", "0"));
           cn.Close();
        }
    }

That’s all. Your location from the database gets bound to the location dropdown list of your web page. This is how you bind a dropdown list with database values.
Hope it helps you and feel free to post and suggest me with your valuable comments.

How to redirect user to a new page using jquery

This is one of very frequent functions we see in every web application. Here in this post we will see how to redirect the user from the current location to another webpage using simple jQuery. In order to redirect user to another webpage we use the ‘location’ object available in JavaScript.
Below is the method in jQuery on how to redirect user to another webpage.

var url = "http://jquerybyexample.blogspot.com";
$(location).attr('href', url);

Also look in to these posts:
How to Refresh a Webpage dynamically using jQuery
How to merge two tables into one table using jQuery

So whenever you like to redirect user to another webpage just use the location object as shown in the above code.
If you like to redirect user to a new webpage using JavaScript, follow the below lines of code.

window.location.replace("http://jquerybyexample.blogspot.com");

or

window.location.href = "http://jquerybyexample.blogspot.com";

Both the above methods redirect the user to a new webpage in the same way, but the only difference is when you use replace() the user gets redirected but the page will not be added in the browser history. So you cannot access the back button.
So it is recommended to use the second method to redirect user to a new webpage as it maintains the browser history too.
Hope you like this post and feel free to suggest and post your valuable comments.

Monday, November 11, 2013

How to Refresh or Reload a Webpage Automatically jQuery

It is quite a common thing for all of us to refresh or reload our webpages in our daily life. But generally we do refresh or reload our pages manually. Sometimes it is required for the page to get refreshed or reloaded automatically by itself. In case you have some live updates to be projected on your page it is required for that page to get reloaded automatically. For example the cricket scores get refreshed for every 10-15 seconds even if there is no change in the scoreboard.
To achieve this we can simply implement this in two ways.

Using HTML
Using jQuery

Using HTML:

<meta http-equiv="refresh" content="10">

The attribute http-equiv=”refresh” despite being a normal standard meta tag sends an HTTP command, which helps the page to get refreshed.
The content attribute holds a value in seconds which means that the page will be refreshed for every 20 seconds.

Using jQuery:

The following jQuery code reloads or refreshes the webpage automatically.

function reloadPage() {
    location.reload();
};
$(document).ready(function() {
    setTimeout("reloadPage()", 20000); 
});

location.reload() here refreshes the page for every 20000 ms.The main advantage of using location.reload() is it works for all major browsers.

Refresh page on button click:

If required you can also place a button to refresh the page on clicking.

$(document).ready(function () {
    $('#btn_Reload').click(function () {
        location.reload();
    });
});

Hence these are some of the many ways on how to refresh or reload a webpage automatically.
Hope this post helps you and please feel free to suggest and post your valuable comments.

How To Apply Themes Dynamically To Master Page?

We all use the concept of Master Pages which sets a defined style pattern to all the pages which included it. The question here is Can we dynamically change the css content in the master page? The answer is yes. You should have already known the concept of themes in which we define any number of custom styles. We actually set some default theme to our site. But what if the user likes to change the theme of the page dynamically ?
The solution is taking a dropdown list in your page and then populating them with the themes available in your application and rendering them into your master page in the Page_PreInit stage of the page life cycle.
Here is the step by step process:

Build as many themes you like under the App_Themes folder of your project
Place the corresponding css styles in your themes.
Add a dropdown list in your master page.
Bind the dropdown list items with the themes.
Select the theme you like.

. Now on changing the dropdown value the code behind should trigger like this.

 protected void Page_PreInit(object sender, EventArgs e)
    {
        string myTheme;
        myTheme = (string)Session["selectedTheme"];
        if (thm != null)
        {
            Page.Theme = myTheme;
            ddlThemes.Text = myTheme;
        }
        else
        {
            Session["selectedTheme"] = ddlThemes.Text;
            Page.Theme = "Blue";
        }
    protected void ddlThemes_SelectedIndexChanged(object sender, EventArgs e)
    {
        Session["selectedTheme"] = ddlThemes.Text;
        Server.Transfer(Request.FilePath);
    }

This is the way how you apply the themes dynamically to your master page.Hope it helps you and feel free to suggest and post your valuable comments.

For more information ,explore ASP.NET/C#

How to check date is greater or lesser than Current Date using javascript / jQuery

"This post is all about to check whether the entered date is less than or greater than the current date using jquery/javascript"
This is one of the most common scenarios we come across in most of the applications in our daily life. Selecting a date is quite a common thing or most of the times a mandatory field in our applications. The date field is used in all utilities starting from a simple application form for a school child to transactions form of a bank. But sometimes we are asked to set some validations on the date field, say to check whether the entered date is greater or lesser than the current date.
So in this post we implement a very useful validation on date field. Generally we use a date-picker to help user to select a date.But in our case we just use a textbox and enter the date in a particular format. Sometimes we come across a requirement to check that the date entered by the user should not be greater than the current date or sometimes greater than the current date.
So let us move further on how to implement this using a bit of JavaScript or jQuery. Suppose we have a couple of fields with a submit button in our page.

        Name:<input type="text" id="txtName" />
        DOB:<input type="text" id="txtDateEntered" />
        <input type="submit" id="Text1" onclick="compareDate();"/>

Note:Date should be entered in this format [dd-mm-yyyy]. Now here goes the JavaScript code on how to check whether the entered date is greater or lesser than the current date. In my JavaScripr file:

function compareDate() {
    //In javascript
    var dateEntered = document.getElementById("txtDateEntered").value; 
    // In JQuery
    var dateEntered = $("#txtDateEntered").val();
 
    var date = dateEntered.substring(0, 2);
    var month = dateEntered.substring(3, 5);
    var year = dateEntered.substring(6, 10);
 
    var dateToCompare = new Date(year, month - 1, date);
    var currentDate = new Date();
 
    if (dateToCompare > currentDate) {
        alert("Date Entered is greater than Current Date ");
    }
    else {
        alert("Date Entered is lesser than Current Date");
    }
}

This is how you check whether the entered date is greater or lesser than the current date. That’s all the simple script above does the trick for you. So try to follow the code given above and implement wherever you require.
Hope it helps you and feel free to suggest or post comments.
For more knowledge on jQuery/JavaScript ,you can explore Tricks in jQuery/JavaScript.

Friday, November 8, 2013

Cookies in ASP.NET

What is a Cookie?

Cookies in .Net are mainly used for state management. Cookies are simple files of plain text which are stored on the client’s hard disk or on browser memory. These files hold the information of the user and uses whenever required.
We all know that HTTP protocols are stateless, In order to achieve state management cookies are used to store small pieces of information on client's system which the webpage is able to read when the user visits that site.Let us see about cookies in detail.

How are Cookies originated?

When the client requests for a page to the server for the first time, the server serves the client along with a cookie. The server generates a session id and sends it to the client as a cookie.
The cookie with the session id is stored on client’s machine or in the browser memory.
Now whenever the same client requests the server, it uses the session id to recognize the client and serves it.
Only the browser and the server are involved in exchanging the cookies.
When you hit an URL to the server, it first checks across the cookies for any information related to it and if present, it is moved to the server with that information.

Simply to tell, Cookies are used to store the information on the client’s system. It contains the information which can be read by the webpage requested whenever the user visits the site.

Types of Cookies:

Cookies are classifies into two types. They are,

Persistent cookies.
Persistent cookies are also called permanent cookies. These are stored on the client’s hard disk. But it is mandatory to define an expiry date for persistent cookies. Sometimes they live till the user deletes them.
Non-Persistent cookies.
Non-Persistent cookies can be called as temporary cookies. These reside on the browser memory. No expiry date is defined for these type of cookies.

Creating a Cookie:

 //Create a cookie object
        HttpCookie userDetails_Cookie = new HttpCookie("User_Details");
        //Set values inside the cookie
        userDetails_Cookie["UserName"] = "Jimmy";
        userDetails_Cookie["Location"] = "Texas";
        //Add the cookie to the curent web response
        Response.Cookies.Add(userDetails_Cookie);

Reading values from a Cookie:

  //Retrieving cookies across the cookie name
        HttpCookie userDetails_Cookie = Request.Cookies["User_Details"];
        string username, location;
        //Checking whether the cookie existed or not
        if (userDetails_Cookie != null)
        {
            username = userDetails_Cookie["UserName"];
            location = userDetails_Cookie["Location"];
        }

Hence here we came to know what exactly a cookie is? And an idea on how do we a cookie is generated and how to write and read values from the cookie.
Hope it helps you and feel free to suggest and post comments if you have any doubts regarding.

Friday, November 1, 2013

Boxing and UnBoxing in c# with Examples

In order to understand what Boxing and Un-Boxing are, initially one need to understand what are Value Types and Reference Types.. Boxing and Un-Boxing are just the technical terms to typecast either value types to reference types or reference types to value types.

Boxing

Converting value type to reference type is called as Boxing.
Example:

 int x = 100;
 Object obj = i;

Here ‘x’ is of type int which is a value type which is taken as reference by an object ‘o’ which is a reference type.

UnBoxing

Converting a Reference type to a value type is known as UnBoxing.
Example:

Object obj = 100;
int i = (int)obj

Here just the reverse happened, object type is type-casted to integer, so its UnBoxing.

Perfomance:

Value Types will be accessed faster compared to Reference Types as they have their value directly in their own memory allocation.
Reference Types will be accessed a bit slower compared to the Value Types because they it has to refer another memory location to get the value which costs one more transaction.
But it is always recommended not to use Boxing and UnBoxing everywhere except the situation demands. Because these operations cost some additional time to execute and may show impact on the overall performance of your program if used frequently.

Thursday, October 31, 2013

Value Types and Reference Types in .Net

What is a Data Type?

Data Types in the programming scenario are the categorized sections,which are based on the type of data stored in them.Generally different types of data are stored in different memory with different structures such as stack or heap memories.
Some data types holds its data within its own memory allocation and some store only the address of the data[Data is present at some other location].So Data Types are categorized based on the way how they store their values .

Categories of Data Types
Generally we come across many data types in our programming journey like int, char, float,object etc. But to be clear all the Data Types are classified into two sections , they are:

Value Type
Reference Type

Let us discuss them in detail:

Value Type:

The Data Types which store their values directly in their stack memory are known as Value Types.
Among the built-in Data Types ,except 'String' and 'Object' all other data types are considered value types
Among user defined data types 'structure' and 'enum' are taken as value types.
Examples: All numeric data types, char bool, date, structures and enum etc.

Reference Type

Reference Types are those which store their values in heap memory and the address of those values are stored in stack memory as variables.
Among the built-in data types 'string' and 'object' are taken as Reference Types.
Among user defined data types Arrays, Class, Interface, and Delegate etc are taken as reference types.
Examples:string, object, arrays, delegates, interface etc.

Hope it helps you, Please feel free to suggest and post your valuable comments.

How to merge or combine two tables into one?

In this post I am going to explain how to merge two tables of your web page into a single table using jQuery. This may not be a frequent practice in our daily applications but let us make use of our programming skills to meet each and every requirement according to the situation.
What we need to do here is,

Create two tables in your Webform.
Output is shortened to a single table with the two tables merged.

Let the following be your HTML code:
merge.aspx:

<form id="Form1" onsubmit="return merge();" runat="server">
    <div>
        <table class="primaryTable" style="border: 1px solid grey;">
            <thead>
                <tr>
                    <td>Name</td>
                    <td>Age</td>
                </tr>
            </thead>
            <tr>
                <td>T1-ROW1-Name</td>
                <td>T1-ROW1-Age</td>
            </tr>
            <tr>
                <td>T1-ROW2-Name </td>
                <td>T1-ROW2-Age </td>
            </tr>
        </table>
        <table class="secondaryTable">
            <tr>
                <td>T2-ROW1-Name</td>
                <td>T2-ROW1-Age</td>
            </tr>
            <tr>
                <td>T2-ROW2-Name</td>
                <td>T2-ROW2-Age</td>
            </tr>
        </table>
    </div>
</form>

The above code just creates two tables with the first table having id=’primaryTable’. And the second table with id=’secondaryTable’.
Now we will use simple jQuery to merge these two tables in to one.The logic we implement here is we merge the first table’s last child of its parent element with the body of the second table.
Following is my JavaScript file.
merge.js

$(document).ready(function () {

    $(".primaryTable > tbody:last").append($(".secondaryTable > tbody").html());

$(".secondaryTable").remove();

});

That’s all ,the two tables will be merged to a single table with small piece of jQuery code. Hope it helps you. Feel free to suggest and post your valuable comments.

Tuesday, October 29, 2013

Populating GridView with Textbox values

Many times in our applications we come across storing values, Names, and some other details and display them static or dynamically. We generally use a Gridview to populate them with our values entered in our form.
In this post I will explain you with a simple example on how to populate or store values in a grid view which displays the details statically in our webpage.
Let this be my HTML Code:

<html>
<head runat="server">
    <title>Populating Grid with Form Values</title>
</head>
<body>
    <form id="myForm" runat="server">
        <div>
            My Value 1:<asp:textbox id="txtVal1" runat="server"></asp:textbox>
            <br />
            My Value 2:<asp:textbox id="txtVal2" runat="server"></asp:textbox>
            <br />
            My Value 3:<asp:textbox id="txtVal3" runat="server"></asp:textbox>
            <asp:gridview id="myGrid" runat="server">
            </asp:gridview>
            <br />
            <asp:button id="btnSave" runat="server" onclick="btnSubmit_Click" text="submit" />
        </div>
    </form>
</body>
</html>

The above html generates a form with three textboxes and a submit button and a Gridview. When I enter some values in the textboxes and click the submit button the values get populated in the grid and displayed statically.
The logic behind generating a pattern for the grid and populating the details in it goes here:
Code Behind:

protected void btnSubmit_Click(object sender, EventArgs e)
        {
            DataTable dt = new DataTable();
            if (myGrid.Rows.Count == 0)
            {
                dt = MakeTable();
 
            }
            else
            {
                dt = (DataTable)ViewState["dt"];
            }
            DataRow dr = dt.NewRow();
            dr[0] = txtVal1.Text;
            dr[1] = txtVal2.Text;
            dr[2] = txtVal3.Text;
            dt.Rows.Add(dr);
            myGrid.DataSource = null;
            myGrid.DataSource = dt;
            myGrid.DataBind();
            ViewState.Add("dt", dt);
        }
        DataTable MakeTable()
        {
            DataTable Mydt = new DataTable();
            DataColumn column1 = new DataColumn("column1");
            column1.DataType = System.Type.GetType("System.String");
            Mydt.Columns.Add(column1);
 
            DataColumn column2 = new DataColumn("column2");
            column2.DataType = System.Type.GetType("System.String");
            Mydt.Columns.Add(column2);
 
 
            DataColumn column3 = new DataColumn("column3");
            column3.DataType = System.Type.GetType("System.String");
            Mydt.Columns.Add(column3);
            return Mydt;
        }

On running this code we can see that the details from the textboxes get populated in the gridview and displayed on our web page.
Hope it helps you and especially for those who are fresh developers.

Share Point 2010 | Angular Js | ASP.NET | C# | jQuery

tabs

Wednesday, November 13, 2013

Validate DropdownList using jQuery

Tuesday, November 12, 2013

Bind a DropdownList with Database Values

How to redirect user to a new page using jquery

Monday, November 11, 2013

How to Refresh or Reload a Webpage Automatically jQuery

Using HTML:

Using jQuery:

Refresh page on button click:

How To Apply Themes Dynamically To Master Page?

How to check date is greater or lesser than Current Date using javascript / jQuery

Friday, November 8, 2013

Cookies in ASP.NET

What is a Cookie?

How are Cookies originated?

Types of Cookies:

Creating a Cookie:

Reading values from a Cookie:

Friday, November 1, 2013

Boxing and UnBoxing in c# with Examples

Boxing

UnBoxing

Perfomance:

Thursday, October 31, 2013

Value Types and Reference Types in .Net

How to merge or combine two tables into one?

Tuesday, October 29, 2013

Populating GridView with Textbox values