Computer Programming

Tuesday, June 16, 2015

June 16, 2015

How to create array using JQuery also insert item at run time

Array is a collection of similar item in programming language but is case of scripting language all variable treat as a variable type so we don't identify the type of it. In JQuery we have to create array at runtime, like
var array_name=[];
If you want to insert some item in it then use push(var item ) method.

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

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="Scripts/jquery-1.10.2.js"></script>
<script>
$(function(){
var array_name=[];
$('#Button1').click(function(){
var textbox_value=$('#Text1').val();
array_name.push(textbox_value);

for(var i=0;i<array_name.length;i++)
alert(array_name[i])
});
})
</script>

</head>
<body>
<form id="form1" runat="server">
<div>
Enter Your name:
<input id="Text1" type="text" value="Jacob" /><br />
<input id="Button1" type="button" value="button" />
</div>
</form>
</body>
</html>
When we click on button run JQuery function and insert item in the array.

Friday, June 12, 2015

JQUERY

June 12, 2015

How to convert decimal number to round off figure using JQuery

If you want to display decimal number to fix digit number. I mean to say i have a decimal number like 123.123 and i want to display round of number then use Jquery round method.

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

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="Scripts/jquery-1.10.2.js"></script>
<script>
$(function(){
$('#Button1').click(function(){
$('#result').html(Math.round($('#Text1').val()))
});
})
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
Enter Number: <input id="Text1" type="text" value="123.123" />
<input id="Button1" type="button" value="Round Off value" />
<br />
<label id="result" style="font-size:16px" />
</div>
</form>
</body>
</html>
When we click on the button , TextBox value will be converted into Round Off value using JQuery method.

Thursday, June 11, 2015

JQUERY

June 11, 2015

How to get Elements of HTML using id and class in JQuery

How to get the element from the html file using their id and class property. In my previous article we have already get the html element from their id property. But in this article we will get the element from their class name. Lets take a simple example to demonstrate the article.

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

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="Scripts/jquery-1.10.2.js"></script>
<script>
$(function(){
$('#Button1').click(function () {
var firstdiv = $('#first').html();
alert(firstdiv);

var getclass = $('.test').html();

alert(getclass);

});

})
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="first" style="border: 1px solid #009900; padding: 10px">
Welcome to my website
</div>

<div style="border: 1px solid #00ffff; padding: 10px" class="test">

Get This Text By class
</div>
<input id="Button1" type="button" value="Get Element By Id" />
</form>
</body>
</html>
When we click on the button a alert message have to generate with some message. Using html () method we can get the text of the tag.

Sunday, June 7, 2015

JQUERY

June 07, 2015

Check Whether string match or not using JQuery

If you want to search string from given string then you should use String class. A String class have different methods through them we can search any text from the given Text. In this example, i will take indexOf() method , its a more popular method. Actually This method work when your search characters sequence match with the given text. Now , take a simple example of it.

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

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="Scripts/jquery-1.10.2.js"></script>

<script>
$(function () {

$('#Button1').click(function () {

if ($('#Text1').val().indexOf('jacob') != -1) {
alert('string match');
return true;
}

else {

alert('string doesnt match');
return false;
}

});

})

</script>
</head>
<body>
<form id="form1" runat="server">

<div>
Example of string , exist or not
</div>
<input id="Text1" type="text" value="jacob" /><br />
<input id="Button1" type="button" value="button" />

</form>
</body>
</html>
In this example when we press the button,the entered text in the textbox match with the 'jacob' string which is defined in the index( ) method. If your entered text match then Jquery Return true other wise else. Here '-1' means , null value search.

Friday, June 5, 2015

JQUERY

June 05, 2015

How to remove content from division also remove it using Jquery methods

Remove content from the division or remove complete div from the page. In these types of problem you can use JQuery. In Jquery we have a empty( ) and remove( ) function. Both functions are used easily. Ok, let take a simple example , in which we have a division with border style and text. If i want to remove content of the div then first to find the division using JQuery by this method.

$('# id of the division')

After find the division you can use empty method, Through this method we can remove content of the division.

<%@ Page Language="C#" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="Scripts/jquery-1.10.2.js"></script>
<script>
$(function(){

$('#Button1').click(function(){
$('#contentdiv').empty();
});

$('#Button2').click(function(){
$('#contentdiv').remove();

});

})

</script>
</head>
<body>
<form id="form1" runat="server">

<div id="contentdiv" style="border: thick solid #FF0000"> Welcome to http://dotprogramming.blogspot.com</div>
<div>
<input id="Button1" type="button" value="Empty Division" />
<input id="Button2" type="button" value="Remove Division" />
</div>
</form>
</body>
</html>

Here,

We have a three element in the body section, first one is division with Text, second and third are buttons. First to place the ".js" file in the head section from script folder of your visual studio's solution or you can use "http://code.jquery.com/jquery-1.8.2.js" . Now, start the script block. In the script block start JQuery with the function. Inside the function, first of all get the first button by their id property then perform click operation on it. On the click event , generate function , in it you can get the division by also their id property then you can use empty ( ) function. Similarly do all these things with the second button.

Friday, May 29, 2015

ASP.NET

May 29, 2015

How to bind html table in asp.net c#

In previous article we have already learn about binding but all they have a data bound control like Gridview, FormView etc. Today i am talking about html table. In my previous article , i was already write something about html tag and their uses also write that how to use html tag in code behind file of webform. In this article we have new concept that is StringBuilder class. By the help of this class we can do any changes in single object. I mean to say that a single object hold large string. Now see a simple example of html table binding:

Source Code

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

<!DOCTYPE html>

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

Here,

Add a new webform in the website.
Add a placeHolder control in the page. Put some control in code behind file.

Code behind code

using System;
using System.Collections.Generic;
using System.Configuration;
using System.Data.SqlClient;
using System.Linq;
using System.Text;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class Default2 : System.Web.UI.Page
{
StringBuilder table = new StringBuilder();

protected void Page_Load(object sender, EventArgs e)
{
if(!Page.IsPostBack)
{
SqlConnection con = new SqlConnection();
con.ConnectionString = ConfigurationManager.ConnectionStrings["ConnectionString"].ToString();
con.Open();
SqlCommand cmd = new SqlCommand();
cmd.CommandText = "Select * from [country]";
cmd.Connection = con;
SqlDataReader rd = cmd.ExecuteReader();
table.Append("<table border='1'>");
table.Append("<tr><th>Country Id</th><th>Country Name</th>");
table.Append("</tr>");

if(rd.HasRows)
{
while(rd.Read())
{
table.Append("<tr>");
table.Append("<td>" + rd[0] + "</td>");
table.Append("<td>" + rd[1] + "</td>");
table.Append("</tr>");
}
}
table.Append("</table");
PlaceHolder1.Controls.Add(new Literal { Text = table.ToString() });
rd.Close();
}
}
}
Code Generate the following output

According to the mentioned code we have a object of StringBuilder class, through this we have to create a html table with the help of Append( ) method. By the SqlDataReader class read data one by one also insert into html table. Now, add a Literal control in the placehoder along with StringBuilder class object.

Thursday, May 28, 2015

ASP.NET

May 28, 2015

How to delete row of Gridview using Link button in ASP.NET C#

Good morning friends, I have covered many article on Gridview binding. Today i am talking about Gridview with link button.In this article we will do something different like delete row when we press the delete link button. To do this task, first to design the Gridview with link button after that perform some operation on link button.

Source Code:

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

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script>
function ConfirmationBox(countryname) {

var finalresult = confirm('Are you sure you want to delete' + countryname + 'details');
if (finalresult) {
return true;

}
else {
return false;
}
}

</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" DataKeyNames="CountryId" OnRowDataBound="GridView1_RowDataBound">
<Columns>
<asp:BoundField DataField="CountryId" HeaderText="Country Id" />
<asp:BoundField DataField="CountryName" HeaderText="Country Name" />
<asp:TemplateField HeaderText="delete">
<ItemTemplate>

<asp:LinkButton ID="LinkButton1" runat="server" OnClick="LinkButton1_Click">Delete Country</asp:LinkButton>

</ItemTemplate>

</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
</form>
<p>
 </p>
</body>
</html>

In the above mentioned code we have a script block which is used for giving confirmation message when we click on link button. Also we have a Gridview with three column , first two starting columns bind with the country table, in the third column we have a delete link button.

CodeBehind Code

using System;

using System.Collections.Generic;

using System.Configuration;

using System.Data;

using System.Data.SqlClient;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

public partial class Default3 : System.Web.UI.Page

{

SqlConnection con;

SqlCommand cmd;

DataSet ds;

public Default3()

{

con = new SqlConnection();

con.ConnectionString = ConfigurationManager.ConnectionStrings["ConnectionString"].ToString();

cmd = new SqlCommand();

ds = new DataSet();

}

protected void Page_Load(object sender, EventArgs e)

{

if(!Page.IsPostBack)

{

bindgridview();

}

private void bindgridview()

{

con.Open();

cmd.CommandText = "select * from [country]";

cmd.Connection = con;

SqlDataAdapter da = new SqlDataAdapter(cmd);

da.Fill(ds);

con.Close();

GridView1.DataSource = ds;

GridView1.DataBind();

}

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)

{

if(e.Row.RowType==DataControlRowType.DataRow)

{

string countryname = Convert.ToString(DataBinder.Eval(e.Row.DataItem, "CountryName"));

LinkButton lnkbutton = (LinkButton)e.Row.FindControl("LinkButton1");

lnkbutton.Attributes.Add("onclick", "JavaScript:return ConfirmationBox('" + countryname + "')");

}

protected void LinkButton1_Click(object sender, EventArgs e)

{

LinkButton lnk = sender as LinkButton;

GridViewRow gridrow = lnk.NamingContainer as GridViewRow;

int countryid = Convert.ToInt32(GridView1.DataKeys[gridrow.RowIndex].Value.ToString());

con.Open();

cmd.CommandText = "delete from [country] where CountryId=" + countryid;

cmd.Connection = con;

int a = cmd.ExecuteNonQuery();

con.Close();

if(a>0)

{

bindgridview();

}

}
Output of the following mentioned code

How to delete row of Gridview using Link button in ASP.NET C#

In the above mentioned code, first to bind the gridview with the DataSet. By the RowDataBound event we have to generate confirmation message using java script. So first of all get the country name by the eval method. Also get the link button from Gridview using findControl( ) method. Now you can call javaScript method on LinkButton

By the help of link button event handler we are deleting the row from the Gridview which is mentioned in the code. So first of all get the countryid from the binded gridview then execute delete statement.