-->

Saturday, October 17, 2015

jquery button created dynamically

Introduction
In this article, i will show you how to create jquery button dynamically. Example of dynamically created button using jquery. In this example, create a input tag with their attributes by using jquery. Now, after this you can append it in division.



<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>JQuery Button Created Dynamically</title>
    <script src="Scripts/jquery-1.10.2.js"></script>
  <script>
      $(document).ready(function () {
          var $bt=$('<input/>').attr({type:'button',name:'mybutton',value:'Dynamic Button'});
          $("#div1").append($bt);


      })

  </script>

</head>
<body>
 <div id="div1"></div>

</body>
</html>

Friday, October 16, 2015

Query String in web forms asp.net c#

Introduction

Query String in web forms asp.net is very important if you have a shopping products. Through this  article we will show you how to use Query String in web forms asp.net also you can say i will provide you an example of it.  If we want to pass control or variable value from one form to another form then we can use QueryString . There are many options available to pass queryString , these are.

In Hyperlink:

    <a href=”~/Default.aspx?id=10&name=Jacob”>QueryString Example</a>

In Response.Redirect method :

 Response.Redirect(“~/Default.aspx?id=10&name=Jacob”);

If we want to get queryString Parameter valuefrom url then we should use Request.QueryString  Object.
Label1.Text=Request.QueryString[“querystring parameter”].ToString();

Lets take an simple example to pass textbox value from one form to another form using QueryString.




<%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">

    protected void Button1_Click(object sender, EventArgs e)
    {
        Response.Redirect("~/Default2.aspx?name=" + TextBox1.Text);
    }

    protected void Page_Load(object sender, EventArgs e)
    {
        if (Page.Request.QueryString["name"] != null)
        {
            Label1.Text = "name of the querystring parameter is " + Page.Request.QueryString["name"];
        }
    }
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        Enter Name :
        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox><br />
        <asp:Button ID="Button1" runat="server" Text="QueryString" OnClick="Button1_Click" /><br />
        <asp:Label ID="Label1" runat="server" Text=""></asp:Label>
    </div>
    </form>
</body>

</html>
Output
Eample of QueryString in ASP.NET

How to bind CheckBoxList using Xml file in ASP.NET

XML File Introduction

XML file is a text file. basically XML file is used for carry data.
Features of XML file
1. Its a Case sensitive language.
2. Use User defined tags
3. Used for communication purpose
4. Its not a presentation language .
5. Same as HTML language.
6. Use Tree based architecture

The CheckBoxList control displays the list of data as a CheckBox from which you can make a multiple selection. The CheckBoxList control exists within the System.Web.UI.WebControls namespace. You can select multiple items in this control because In this control you have some options. The CheckBoxList control has no non-inherited methods or events.

Public Properties of DropDownList Class

SelectedIndex : Obtains or sets the index of the selected item in the control.

Application of DropDownList Control

  • In skill page where you can select your skills in given CheckBoxList options.
  • In management project where you can select multiple option in given options.

Lets take an simple example to bind CheckBoxList

Step-1. Create a XML file with <Countries> tag.

<?xml version="1.0" encoding="utf-8" ?>
<Countries>
  <country>
    <countryId>101</countryId>
    <countryName>USA</countryName>
   
  </country>
  <country>
    <countryId>102</countryId>
    <countryName>UK</countryName>

  </country
 
 
</Countries>


Step-2 : Drag one CheckBoxList from ToolBox and Drop to design window.
Step-3 : Create a DataSet instance 
Step-4 : Read XML file by ReadXML() method
Step-5 :Bind CheckBoxList with DataSet Instance.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;

public partial class Default3 : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        DataSet ds = new DataSet();
      
        ds.ReadXml(Server.MapPath("countries.xml"));
        DropDownList1.DataSource = ds;
        DropDownList1.DataTextField = "countryName";
        DropDownList1.DataValueField = "countryId";
        DropDownList1.DataBind();
       

    }

}
Output
How to bind CheckBoxList using Xml file in ASP.NET

Wednesday, October 14, 2015

WPF Slider Example: ValueChanged event, minimum and maximum

Slider : It means slide the button from left to right or vise versa. When we slide it then we can do some changes in other things like change background color etc. WPF slider control have two public properties, first one is minimum and second one is maximum. Slider works from minimum to maximum also depends on user condition.


Example :  Drag and drop a slider control on WPF design window with two attributes, which are:
  • Minimum: get or set the minimum value of the control. By default it is zero.
  • Maximum: get or set the maximum value of the control. By default it is Ten.
Now after drag the control, your xaml code look like:

<Slider Name="slider" Minimum="0" Maximum="100" Value="25" Height="25" Width="300">
</Slider>

Run the code and the slider control is on your screen, with value 25- defined above.

Slider control WPF

Ticks can be used to place the slider on exact position. We can enable ticks by using the property TickPlacement. It have four values i.e. None, Both, TopLeft and BottomRight.
  • None: it will give a simple look as in above image. 
  • TopLeft: the ticks will placed on left with vertical orientation and top with horizontal. 
  • BottomRight: the ticks will placed on right with vertical orientation and bottom with horizontal.
  • Both: It is used on both left and right, when the orientation is vertical.
The following image shows the slider control with TickPlacement set to TopLeft.

Slider control with TickPlacement in WPF

Facebook see more button using JQuery

Introduction
In this article i will show you how to show 100 characters only from lots of words and remaining words or you can say characters are hide from see more words, just like facebook.com.  In facebook.com website, when we post some article which is lengthy in words then facebook.com functionality hide words just after specified length behind the see more links. Now, today i will give an example of it.


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Facebook See More and See Less</title>
    <script src="Scripts/jquery-1.10.2.js"></script>
    <script type="text/javascript">
    $(document).ready(function () {
        var sChar = 100;
        var ellipsestxt = "...";
        var moretext = "more";
        var lesstext = "less";
        $('.more').each(function () {
            var content = $(this).html();

            if (content.length > sChar) {

                var c = content.substr(0, sChar);
                var h = content.substr(sChar - 1, content.length - sChar);

                var html = c + '<span class="moreellipses">' + ellipsestxt + '&nbsp;</span><span class="morecontent"><span>' + h + '</span>&nbsp;&nbsp;<a href="" class="facebookmorelink">' + moretext + '</a></span>';

                $(this).html(html);
            }

        });

        $(".facebookmorelink").click(function () {
            if ($(this).hasClass("less")) {
                $(this).removeClass("less");
                $(this).html(moretext);
            } else {
                $(this).addClass("less");
                $(this).html(lesstext);
            }
            $(this).parent().prev().toggle();
            $(this).prev().toggle();
            return false;
        });
    });
    </script>
    <style>
        a {
            color: #0221ac;
        }

            a:visited {
                color: #02abcd;
            }

            a.facebookmorelink {
                text-decoration: none;
                outline: none;
            }

        .morecontent span {
            display: none;
        }

        .facebookseemore {
            width: 400px;
            background-color: #f0f0f0;
            margin: 10px;
        }
    </style>
 
</head>
<body>
    <div class="facebookseemore more">
<h1>Health Tips</h1>

        Fat on face or double chin suits on a person till a limited age only.
         As age of a person increases fat free face is considered more beautiful.
         Some girls do not like their fatty cheeks because it makes them look fat.
         Fat on face can increase because of many reasons like lack of water, presence
         of fat in diet and other fatty products. And for hiding it you may do make up
         but it is not the thing which gets hided easily. Today
        we are going to tell you about some such tips which can reduce fat from your face at a great extent.


    </div>
 
</body>
</html>
Code Generate the following output
Facebook see more button using JQuery


DataSet.ReadXml( ) method example in ASP.NET C#

Introduction
In this article i will give an example of DataSet.ReadXml( ) method. Through this we can read xml file in ASP.NET C#. In this method we will pass xml file URL.
Description
I have explained more about xml like How to create xml sitemap in ASP.NET C#.

Introduction about XML

XML stands for xtensible markup language. It have many features such as:
  • Xml is used for carry data .
  • Xml structure is based on tree structure.
  • Xml is not a presentation language 
  • XML use user defined tags for making structre.
  • Xml language is a case-sensitive language. 
  • XML is a Text File 

Now at a time if you want to make a structural database in xml file then you follow some steps . these steps are:
Step-1: First defined root node like <bookstore> 
Step-2: Declare child node <bookstore> <book>
Now you can consider book tag is your table name which you create in SQL and bookstore represent the database name.
Step-3 : Declare your column name inside the <book> tag such as Title of the book, author and price of the book .
now your file look like that.
Book store tree
Step-4 repeat your step 2-3 again
Now your complete code is

<?xml version="1.0" encoding="utf-8" ?>
<bookstore>
  <book>
    <title>
      ASP.NET
    </title>
    <author>
      SCOTT
    </author>
    <price>
      20$
    </price>
  </book>
<book>
    <title>
      PHP
    </title>
    <author>
      JECOB
    </author>
    <price>
      20$
    </price>
  </book>


</bookstore>

Dataset

Dataset is a collection of data-Table. So easily you can bind any control with Dataset . Dataset is a class file which stored in System.Data namespace. Here in this example using Dataset we can read xml file from the source. 
lets take an example , How to bind GridView using XML file in ASP.NET


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

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:GridView ID="GridView1" runat="server">
        </asp:GridView>
    </div>
    </form>
</body>
</html>

Codebehind

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;

public partial class Default12 : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        DataSet ds = new DataSet();
        ds.ReadXml(Server.MapPath("XMLFile.xml"));
        GridView1.DataSource = ds;
        GridView1.DataBind();
    }
}
Output
How to bind GridView using XML file in ASP.NET

Tuesday, October 13, 2015

Use GridView.Sorting Event in ASP.NET C#

Introduction

In this article we will learn how to sort gridview data using Gridview columns.I mean to say when we click on gridview columns then data will be in ordered like ascending or descending. If you want to sort available data by using code then you should see this article.

About Sorting 

Sorting means rearranging data either ascending or descending data. you want to perform sorting of the data then you should apply technique to sort of the data . Various techniques are available in logic programming such as Bubble sort, insertion sort , quick sort , selection sort etc.
Basically GridView represents Data in 2D array. Graphical representation of 2D array is


How to sort Gridview Data in ASP.NET
Lets take an example , Firstly bind GridvView with database using the SqlDataSource. After binding the GridView you should select Enable Sorting Checkbox using ShowSmart Tag.

Enable Sorting Checkbox

Your complete Code
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default10.aspx.cs" Inherits="Default10" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
 
        <asp:GridView ID="GridView1" runat="server" AllowSorting="True" AutoGenerateColumns="False" DataKeyNames="Id" DataSourceID="SqlDataSource1">
            <Columns>
                <asp:BoundField DataField="Id" HeaderText="Id" InsertVisible="False" ReadOnly="True" SortExpression="Id" />
                <asp:BoundField DataField="namet" HeaderText="namet" SortExpression="namet" />
                <asp:BoundField DataField="Income" HeaderText="Income" SortExpression="Income" />
            </Columns>
        </asp:GridView>
        <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:ConnectionString %>" SelectCommand="SELECT * FROM [footerex]"></asp:SqlDataSource>
 
    </div>
    </form>
</body>
</html>

Output
How to sort Gridview Data in ASP.NET

How to sort Gridview Data in ASP.NET

© Copyright 2013 Computer Programming | All Right Reserved