Share Point 2010 | Angular Js | ASP.NET | C# | jQuery
I Eat, Drink SharePoint. Everything about SharePoint 2010. From what is sharepoint to custom development.
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
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:
And here is the code behind:
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.
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
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.
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.
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.
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
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.
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:
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.
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#
Subscribe to:
Posts (Atom)