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.

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: