Web and Mobile Apps Codeware: May 2013

Thursday, May 30, 2013

Ajax Calendar CSS | Adding Stylesheet or css to Ajax CalendarExtender in Asp.net

Hello in this post i will be showing how to add CSS or theme to a Ajax Calendar in asp.net.

Example :

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

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajax" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
.ajax__calendar_container
{
background-color: #ffffff;
border: 1px solid #d0d0d0;
}

.ajax__calendar_title
{
background-color: #d0d0d0;
padding: 3px;
}
.ajax__calendar_body
{
border: 0px;
}
.ajax__calendar_container TD
{
padding: 0px;
margin: 0px;
font-size: 11px;
}
.ajax__calendar .ajax__calendar_dayname
{
border-bottom: 1px solid #000;
}
.ajax__calendar_dayname
{
height: 17px;
width: 18px;
text-align: right;
padding: 0px 2px;
}

.ajax__calendar .ajax__calendar_active .ajax__calendar_day
{
background-color: #edf9ff;
border: 1px solid #0066cc;
color: #0066cc;
}
.ajax__calendar .ajax__calendar_day
{
border: 1px solid #ffffff;
}
.ajax__calendar .ajax__calendar_active .ajax__calendar_day
{
background-color: #000000;
color: #ffffff;
}
.ajax__calendar .ajax__calendar_day
{
border: 1px solid #ffffff;
}
.ajax__calendar_day
{
height: 17px;
width: 18px;
text-align: right;
padding: 0px 2px;
cursor: pointer;
}

.ajax__calendar_today
{
background-color: #d0d0d0;
color: #545454;
}
.ajax__calendar_hover .ajax__calendar_today
{
color: #000000;
}
.caltheme table tr td
{
padding: 0;
margin: 0; /*background-color:White;*/
padding-right: 0px;
padding-left: 0px;
border: 0px;
}

.caltheme td:hover
{
background-color: #545454;
color: #ffffff;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true" />
<asp:TextBox ID="txtDate" runat="server"></asp:TextBox>
<ajax:CalendarExtender ID="CalendarExtender1" TargetControlID="txtDate" CssClass="caltheme"
runat="server" Format="dd/MM/yyyy">
</ajax:CalendarExtender>
</div>
</form>
</body>
</html>

Output:

1. Before Applying CSS

2. After Applying CSS

Wednesday, May 29, 2013

Using Asp.net GridView Sorting and Paging Example | Implementing Paging and sorting in gridview | GridView TemplateField Sorting

In this post i will show how to use GridView sorting and paging in asp.net

Sorting:

Paging: For Paging i have mentioned pagesize as 3. Hence After every 3 Records it will display the following 3 records to the next page.

For both sorting and paging Gridview event is generated which we handled in the code behind.

Source code:

Aspx :

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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" AutoGenerateColumns="false" ShowFooter="true" OnSorting="GridView1_Sorting" OnPageIndexChanging="GridView1_PageIndexChanging"
AllowSorting="true" AllowPaging="true" PageSize="3" HeaderStyle-BorderStyle="Solid"
HeaderStyle-Font-Bold="true" OnRowCancelingEdit="GridView1_OnRowCancelingEdit"
OnRowEditing="GridView1_OnRowEditing" OnRowCommand="GridView1_OnRowCommand" OnRowUpdating="GridView1_OnRowUpdating"
OnRowDeleting="GridView1_OnRowDeleting">
<Columns>
<asp:TemplateField HeaderText="Emp ID" SortExpression="EmpDeptID">
<ItemTemplate>
<asp:Label ID="lblEmpIdItem" runat="server" Text='<%# Bind("EmpDeptID") %>'></asp:Label>
</ItemTemplate>
<EditItemTemplate>
<asp:Label ID="lblEmpIdEdit" runat="server" Text='<%# Bind("EmpDeptID") %>'></asp:Label>
</EditItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Emp Name" SortExpression="EMpName">
<ItemTemplate>
<asp:Label ID="lblEmpNameItem" runat="server" Text='<%# Bind("[EMpName]") %>'></asp:Label>
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox ID="txtEmpNameEdit" runat="server"></asp:TextBox>
</EditItemTemplate>
<FooterTemplate>
<asp:TextBox ID="txtEmpNameFooter" runat="server"></asp:TextBox>
</FooterTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Salary" SortExpression="salary">
<ItemTemplate>
<asp:Label ID="lblSalaryItem" runat="server" Text='<%# Bind("[salary]") %>'></asp:Label>
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox ID="txtSalEdit" runat="server"></asp:TextBox>
</EditItemTemplate>
<FooterTemplate>
<asp:TextBox ID="txtSalaryFooter" runat="server"></asp:TextBox>
</FooterTemplate>
</asp:TemplateField>
<asp:TemplateField>
<EditItemTemplate>
<asp:Button ID="btnUpdate" runat="server" Text="Update" CommandName="Update" ToolTip="update" />
<asp:Button ID="btnCancel" runat="server" Text="Cancel" CommandName="Cancel" ToolTip="cancel" />
</EditItemTemplate>
<ItemTemplate>
<asp:Button ID="btnEdit" runat="server" Text="Edit" CommandName="Edit" ToolTip="Edit" />
<asp:Button ID="btnDelete" runat="server" Text="Delete" CommandName="Delete" ToolTip="Delete" />
</ItemTemplate>
<FooterTemplate>
<asp:Button ID="btnAdd" runat="server" Text="Add" CommandName="AddNew" CommandArgument="<%# ((GridViewRow) Container).RowIndex %>"
ToolTip="New" />
</FooterTemplate>
</asp:TemplateField>
</Columns>
</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;
using System.Data.SqlClient;
using System.Configuration;

public partial class Grid : System.Web.UI.Page
{
string conStr = ConfigurationManager.ConnectionStrings["NORTHWNDConnectionString"].ConnectionString.ToString();

protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
bindgrid();
}
}

public void bindgrid()
{
SqlConnection s1 = new SqlConnection(conStr);
DataView dv = new DataView();
s1.Open();

string queryString = "SELECT * FROM employee";
SqlDataAdapter adapter = new SqlDataAdapter(queryString, s1);

DataSet employee = new DataSet();
adapter.Fill(employee, "employee");
if (ViewState["direction"] != null)
{
dv = new DataView(employee.Tables[0]);
dv.Sort = ViewState["sortExpression"].ToString();
}
else
{
dv = employee.Tables[0].DefaultView;
}

s1.Close();

GridView1.DataSource = dv;
GridView1.DataBind();
}

public void GridView1_OnRowCancelingEdit(Object sender, GridViewCancelEditEventArgs e)
{
GridView1.EditIndex = -1;
bindgrid();
}

public void GridView1_OnRowEditing(Object sender, GridViewEditEventArgs e)
{
GridView1.EditIndex = e.NewEditIndex;
bindgrid();
}

public void GridView1_OnRowCommand(Object sender, GridViewCommandEventArgs e)
{
if (e.CommandName == "AddNew")
{
TextBox Empname = (TextBox)GridView1.FooterRow.FindControl("txtEmpNameFooter");
TextBox Salary1 = (TextBox)GridView1.FooterRow.FindControl("txtSalaryFooter");

SqlConnection Con = new SqlConnection(conStr);
Con.Open();
SqlCommand cmd = new SqlCommand();
cmd.CommandType = CommandType.StoredProcedure;
cmd.Connection = Con;
cmd.CommandText = "InsertSP";
cmd.Parameters.AddWithValue("@empname", Empname.Text);
cmd.Parameters.AddWithValue("@sal", Salary1.Text);
cmd.Parameters.AddWithValue("@flag", 1);
cmd.ExecuteNonQuery();
cmd.Dispose();

bindgrid();
}

}
protected void GridView1_OnRowUpdating(object sender, GridViewUpdateEventArgs e)
{
GridViewRow row = GridView1.Rows[e.RowIndex];

Label EmpId = ((Label)(row.FindControl("lblEmpIdEdit")));
TextBox EmpName = ((TextBox)(row.FindControl("txtEmpNameEdit")));
TextBox Salary1 = ((TextBox)(row.FindControl("txtSalEdit")));

SqlConnection Con = new SqlConnection(conStr);
Con.Open();
SqlCommand cmd = new SqlCommand();
cmd.CommandType = CommandType.StoredProcedure;
cmd.Connection = Con;
cmd.CommandText = "InsertSP";
cmd.Parameters.AddWithValue("@empname", EmpName.Text);
cmd.Parameters.AddWithValue("@sal", Salary1.Text);
cmd.Parameters.AddWithValue("@flag", EmpId.Text);
cmd.ExecuteNonQuery();
cmd.Dispose();

GridView1.EditIndex = -1;
bindgrid();
}

protected virtual void GridView1_OnRowDeleting(object sender, GridViewDeleteEventArgs e)
{
GridViewRow row = GridView1.Rows[e.RowIndex];
Label EmpId = ((Label)(row.FindControl("lblEmpIdItem")));

SqlConnection Con = new SqlConnection(conStr);
Con.Open();
SqlCommand cmd = new SqlCommand();
cmd.CommandType = CommandType.StoredProcedure;
cmd.Connection = Con;
cmd.CommandText = "DelSP";
cmd.Parameters.AddWithValue("@empid", EmpId.Text);
cmd.ExecuteNonQuery();
cmd.Dispose();
bindgrid();
}

protected void GridView1_Sorting(object sender, GridViewSortEventArgs e)
{
ViewState["sortExpression"] = e.SortExpression;
string direction = string.Empty;
if (SortDirection == SortDirection.Ascending)
{
SortDirection = SortDirection.Descending;
ViewState["direction"] = "DESC";
}
else
{
SortDirection = SortDirection.Ascending;
ViewState["direction"] = "ASC";
}
bindgrid();
}
public SortDirection SortDirection
{
get
{
if (ViewState["SortDirection"] == null)
{
ViewState["SortDirection"] = SortDirection.Ascending;
}
return (SortDirection)ViewState["SortDirection"];
}
set
{
ViewState["SortDirection"] = value;
}
}

protected void GridView1_PageIndexChanging(object sender, GridViewPageEventArgs e)
{
GridView1.PageIndex = e.NewPageIndex;
bindgrid();
}
}

Tuesday, May 28, 2013

Using serialization and Deserialization in Asp.net | Example of serialization and Deserialization in asp.net

Serialization : Converting object to stream of bytes

DeSerialization : Doing reverse of serialization i.e Stream of bytes to object

Advantages of using serialization :

1. Transferring object from one domain to other.
2. passing object to web service.
3. Passing object from one application to other.

Example:

Now In the below example i have created a emp class and have mentioned [Serializable] above the method emp, so that after the object is created for this class it can be serialized. Now In the main method i will assign values to the emp object and then using binary formatter i will convert that object into binary format and then save it as a stream file. we can use any filestream name and any custom extensions. We can check the stream file created as it get saved in the following path :
application -- > bin--> Debug folder.

This stream file we can transfers wherever we require and then deserialize to convert back from binary format to object.

Code for Serialization :

using System;
using System.Text;
using System.IO;
using System.Runtime.Serialization;
using System.Runtime.Serialization.Formatters.Binary;

namespace ConsoleApplication5
{
class Class1
{
public static void Main(String[] args)
{
//----------Serialization------------------
Emp Obj = new Emp();
Obj.EmpId = 1;
Obj.EmpName = "ChandanSingh";
Obj.EmpSalary = "10000";

IFormatter formatter = new BinaryFormatter();
Stream stream = new FileStream("SerializationFile.csl", FileMode.Create, FileAccess.Write, FileShare.None);
formatter.Serialize(stream, Obj);
stream.Close();
Console.WriteLine("Serialization Process Completed");
Console.ReadLine();
}

}

[Serializable()]
public class Emp
{
public int EmpId;
public string EmpName;
public string EmpSalary;
}

}

Code for DeSerialization :

using System;

using System.Text;

using System.IO;

using System.Runtime.Serialization;

using System.Runtime.Serialization.Formatters.Binary;

namespace ConsoleApplication5

{

class Class1

{

public static void Main(String[] args)

{

//-------- DeSerialization------------------

IFormatter formatter = new BinaryFormatter();

Stream stream = new FileStream("SerializationFile.csl", FileMode.Open, FileAccess.Read, FileShare.Read);

Emp obj = (Emp)formatter.Deserialize(stream);

stream.Close();

Console.WriteLine("EmpId:" + obj.EmpId);

Console.WriteLine("EmpName:" + obj.EmpName);

Console.WriteLine("EmpSalary:" + obj.EmpSalary);

Console.ReadLine();

}

[Serializable()]

public class Emp

{

public int EmpId;

public string EmpName;

public string EmpSalary;

}

Result:

Serialization

DeSerialization :

Monday, May 27, 2013

SQL Server correlated and uncorrelated Subqueries Example and Explanation | Difference between correlated and uncorrelated Subqueries with Example

1. Correlated Sub Query :

Correlated sub query are those which work on row by row basis. As for every row it takes the values from the main Query into the sub-query to return a value. Thus it is dependent on the main query i.e Outer Query.

Suppose we have a table like this below :

And we want the output as

To get the result column in the above image we will make use of a correlated query to get the desired output.

Query:

SELECT *,  ( SELECT Sum(m.Name1)
  FROM MATHTBL M
  WHERE m.id <= m2.id
  ) AS Result
FROM MATHTBL m2

The Inner Query is called as Correlated Query.

2. Uncorrelated Subquery :

The uncorrelated query is not dependent on the main query. It Just provides the values

 required to the main query.

Example:

SELECT empname
FROM Employee
WHERE empid IN (
  SELECT empid
  FROM empsalary
  WHERE empsal > 1000
  )

Saturday, May 25, 2013

using wsHttpBinding endpoint with transport security for a WCF Service in asp.net

hi in this post i will show how to use wsHttpBinding endpoint with transport security for a WCF Service in Asp.net.

Go to the webconfig file of the WCF application:

1. After defining the implementation of the methods which are going to be exposed by the service, we will go to the web.config file here will define the service behavior, endpoint(wsHttpBinding) and transport security.

<?xml version="1.0"?>
<configuration>

<system.web>
<compilation debug="true" targetFramework="4.0" />
</system.web>
<system.serviceModel>

<bindings>
<wsHttpBinding>
<binding name="SecurityByTransport">
<security mode="Transport">
<transport clientCredentialType="Windows" />
</security>
</binding>
</wsHttpBinding>
</bindings>

<behaviors>
<serviceBehaviors>
<behavior name="ServiceBehavior">
<serviceMetadata httpGetEnabled="true" />
<serviceDebug includeExceptionDetailInFaults="false" />
</behavior>
</serviceBehaviors>
</behaviors>

<services>
<service behaviorConfiguration="ServiceBehavior" name="WcfService5.Service1">
<endpoint binding="wsHttpBinding" contract="WcfService5.IService1"/>
<endpoint address="mex" binding="mexHttpBinding"
name="MetadataBinding" contract="IMetadataExchange"/>
</service>

</services>
</system.serviceModel>
<system.webServer>
<modules runAllManagedModulesForAllRequests="true"/>

<directoryBrowse enabled="true"/>
</system.webServer>

</configuration>

2. Run the project to check the desired output

Thursday, May 23, 2013

call a asp.net wcf service using jquery | Ajax Json Call to WCF using Jquery

Hi in post i will show how to call a asp.net wcf service using jquery.

1. Take a new website empty template add aspx page and wcf service page.

2. Go to App_Code --> IService.cs to define the method signature.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Runtime.Serialization;
using System.ServiceModel;
using System.Text;
using System.ServiceModel.Web;

[ServiceContract]
public interface IService
{
[OperationContract]
[WebInvoke(Method = "POST", ResponseFormat = WebMessageFormat.Json)]
string GetDate(string Date);
}

3. Go to App_Code --> Service.cs to write the implementation for the declared method signature.

using System;

using System.Runtime.Serialization;

using System.ServiceModel;

using System.Text;

using System.Web.Script.Serialization;

using System.ServiceModel.Activation;

[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]

public class Service : IService

{

public string GetDate(string Date)

{

return "'Hello World' Todays Date is : " + Date.ToString();

}

4. Now in the Web.config file i will define the address, binding, contract and service behaviours for the WCF Service

Under the configuration tag add this:

<system.serviceModel>

</behavior>

</serviceBehaviors>

</behavior>

</endpointBehaviors>

</behaviors>

</identity>

</endpoint>

</service>

</services>

</system.serviceModel>

5. Now writing the jquery ajax code to call the wcf service.

var d = new Date();

function CallWCF() {

$.ajax({

type: "POST",

contentType: "application/json; charset=utf-8",

url: '<%=ResolveUrl("~/Service.svc/GetDate") %>',

data: '{"Date": "' + d.toDateString() + '"}',

processData: true,

dataType: "json",

success: ServiceSucceeded,

error: ServiceFailed

});

}

function ServiceFailed(output) {

Log('Service call failed: ' + output.status + ' ' + output.statusText);

}

function ServiceSucceeded(output) {

var outputValue = output.d;

Log("Service call Success: <br/> " + outputValue);

}

function Log(displayValueFromService) {

$("#DisplayOutput").append('<br/>' + displayValueFromService);

}

</script>

</head>

<body>

</div>

</body>

</html>

6. Result:

To check whether column exists or not in DataTable or Dataset in Asp.net

To Remove a column from DataTable or Dataset in Asp.net

For Dataset:

DataSet ds = new DataSet();
ds = GetData();
ds.Tables[0].Columns.Contains("EmpName");

For DataTable:

DataTable dt = new DataTable();
dt = GetData();
dt.Columns.Contains("EmpName");

To Remove a column from DataTable or Dataset in asp.net

To check whether column exists or not in DataTable or Dataset in Asp.net

For Dataset:
DataSet ds = new DataSet();

ds = GetData();

ds.Tables[0].Columns.Remove("EmpName");

Alternative way:
ds.Tables[0].Columns.RemoveAt(columnIndex);

For DataTable:
DataTable dt = new DataTable();
dt = GetData();

dt.Columns.Remove("EmpName");

Alternative way:
dt.Columns.RemoveAt(columnIndex);

Wednesday, May 22, 2013

[Resolved] SQL Error: Cannot schema bind view 'viewName' because name 'tableName' is invalid for schema binding. Names must be in two-part format and an object cannot reference itself.

Error Description:

Msg 4512, Level 16, State 3, Procedure EMPVIEW, Line 4
Cannot schema bind view 'DBO.EMPVIEW' because name 'EMPLOYEE' is invalid for schema binding. Names must be in two-part format and an object cannot reference itself.

Explanation:
Such an Error occur when we create a view with schema binding and the table name we are using in it is without the schema name.

Add the schema name along with the table name in the script like tableName to dbo.tableName.
Hence it will resolve the error getting generated.

Example:

Tuesday, May 21, 2013

Ajax ModalPopupExtender Demo in Asp.net | Ajax ModalPopupExtender Example

Hello In this post i will be demonstrating on how to use Ajax ModalPopupExtender control in asp.net.

Example:

1. On linkbutton click I will be showing the Ajax modal popup Screen. On the modal popup screen i will bind a gridview with some sample Data.

2. Below is the code

Aspx:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ModalPopup.aspx.cs" Inherits="Mailjavascript" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajax" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
.modalBackground
{
background-color: Gray;
filter: alpha(opacity=50);
opacity: 0.7;
}
</style>
</head>
<body>
<form runat="server">
<ajax:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</ajax:ToolkitScriptManager>
<asp:LinkButton ID="LinkButton1" runat="server">Click Me</asp:LinkButton>

<asp:Panel ID="Panel1" runat="server" BorderColor="Black" BackColor="White" Height="300px"
Width="800px" HorizontalAlign="Center">
<asp:GridView ID="GridView1" runat="server">
</asp:GridView>
<br />
<br />
<asp:Button ID="Ok" runat="server" Text="submit" OnClick="Button2_Click" />
<asp:Button ID="can" runat="server" Text="cancel" />
</asp:Panel>

<ajax:ModalPopupExtender ID="MPE" runat="server" TargetControlID="LinkButton1" PopupControlID="Panel1"
BackgroundCssClass="modalBackground" CancelControlID="can">
</ajax:ModalPopupExtender>
</form>
</body>
</html>

Codebehind:

using System;
using System.Web;
using System.Web.UI;
using System.Configuration;
using System.Data;
using System.Data.SqlClient;

public partial class Mailjavascript : System.Web.UI.Page
{
string conStr = ConfigurationManager.ConnectionStrings["NORTHWNDConnectionString"].ConnectionString.ToString();
protected void Page_Load(object sender, EventArgs e)
{
SqlConnection s1 = new SqlConnection(conStr);
s1.Open();

string queryString = "SELECT * FROM employee";
SqlDataAdapter adapter = new SqlDataAdapter(queryString, s1);

DataSet employee = new DataSet();
adapter.Fill(employee, "employee");

s1.Close();

GridView1.DataSource = employee.Tables[0];
GridView1.DataBind();
}

protected void Button2_Click(object sender, EventArgs e)
{
MPE.Show();
}
}

3. Result:

1. Click on linkButton

2. ModalPopExtender Screen