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#

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?