Friday, 14 December 2012

Paging ,Join, Searching and Export Database in Gridview


Here I am designing asp.net page and define javascript for paging in a Gridview and joining query for multiple table in database and Export Record of Gridview record ....


Default.aspx
<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
    CodeFile="Default.aspx.cs" Inherits="_Default" %>
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
    <style type="text/css">
        .style1
        {
            color: #000000;
            font-size: large;
        }
        .style2
        {
            color: #000000;
        }
        .style3
        {
            text-decoration: underline;
        }
        .style4
        {
            color: #000000;
            font-family: "Book Antiqua";
        }
    </style>
    <script language="javascript" type="text/javascript">
        function pankaj() {
            if (document.getElementById("<%=TextBox1.ClientID %>").value == ""){
                alert("Please Enter Employee Date");
            document.getElementById("<%=TextBox1.ClientID %>").focus();
            return false;
        }
        }
   
    </script>
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<div class="style1">&nbsp;&nbsp;&nbsp;&nbsp; <span class="style3">Employee&nbsp; Search
    </span> </div>
<div align="center">
    <span class="style2">Enter Employee Date </span>&nbsp;
    <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
    <asp:Button ID="Button1" runat="server" onclick="Button1_Click"
        Text="Search Date" BorderStyle="None" OnClientClick="return pankaj()" />
    </div>
    <br />
    <asp:GridView ID="GridView1" runat="server" Width="912px"
        ForeColor="Black" PageSize="2"
        onpageindexchanging="GridView1_PageIndexChanging" AllowPaging="True">
        <HeaderStyle BackColor="#0099FF" ForeColor="White" Wrap="False" />
        <PagerStyle Wrap="False" />
    </asp:GridView>
    <div align="right"><span class="style4">Export Record in Word</span><asp:ImageButton
            ID="btnExcel" runat="server" ImageUrl="~/WordImage.jpg"
onclick="btnExcel_Click" /></div>
<div align="right"><span class="style4">Export Record in Word</span><asp:ImageButton
            ID="ImageButton1" runat="server" ImageUrl="~/ExcelImage.jpg"
onclick="ImageButton1_Click" /></div>
</asp:Content>

Here coding page load and click event of .cs page ..
Default.aspx.cs
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;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
using System.Drawing;
using System.Web.Security;
using System.Text;
using System.Drawing;
using System.IO;
public partial class _Default : System.Web.UI.Page
{
    SqlConnection conn = new SqlConnection("Give Database string");
    protected void Page_Load(object sender, EventArgs e)
    {
        SqlConnection conn = new SqlConnection("Give Database string");
        conn.Open();
        SqlDataAdapter da = new SqlDataAdapter("select DR1.Date1,  DR1.Emp_ID, DR1.First_Name, DR1.Last_Name, DR2.Task_id, DR2.Description,DR2.Status,DR2.Time_Hours,DR2.Time_Minutes,DR2.Total_Time,DR2.Time_Duration from DR1  inner join DR2 ON DR1.Date1=DR2.Date1", conn);
        DataSet ds = new DataSet();
        da.Fill(ds);
        GridView1.DataSource = ds.Tables[0];
        GridView1.DataBind();
    }
    protected void GridView1_PageIndexChanging(object sender, GridViewPageEventArgs e)
    {
        GridView1.PageIndex = e.NewPageIndex;
        GridView1.DataBind();
    }
    SqlDataAdapter adapter;
    protected void Button1_Click(object sender, EventArgs e)
    {
       conn = new SqlConnection("Give Database string");
       conn.Open();
       SqlDataAdapter da = new SqlDataAdapter("select DR1.Date1,  DR1.Emp_ID, DR1.First_Name, DR1.Last_Name, DR2.Task_id, DR2.Description,DR2.Status,DR2.Time_Hours,DR2.Time_Minutes,DR2.Total_Time,DR2.Time_Duration from DR1  inner join DR2 ON DR1.Date1=DR2.Date1  WHERE DR1.Date1 LIKE '%" + TextBox1.Text + "%' OR DR2.Date1 LIKE '%" + TextBox1.Text + "%'", conn);
       DataSet ds = new DataSet();
       da.Fill(ds);
       GridView1.DataSource = ds.Tables[0];
       GridView1.DataBind();
           }
    public override void VerifyRenderingInServerForm(Control control)
    {
       
    }
    protected void btnExcel_Click(object sender, ImageClickEventArgs e)
    {
        GridView1.AllowPaging = false;
       
        GridView1.DataBind();
        Response.ClearContent();
        Response.AddHeader("content-disposition", string.Format("attachment; filename={0}", "Customers.doc"));
        Response.Charset = "";
        
        Response.ContentType = "application/ms-word";
       
        StringWriter sw = new StringWriter();
        HtmlTextWriter htw = new HtmlTextWriter(sw);
        GridView1.RenderControl(htw);
        Response.Write(sw.ToString());
        Response.End();
    }



    protected void ImageButton1_Click(object sender, ImageClickEventArgs e)
    {
        Response.ClearContent();
           Response.Buffer = true;
              Response.AddHeader("content-disposition", string.Format("attachment; filename={0}", "Customers.xls"));
              Response.ContentType = "application/ms-excel";
              StringWriter sw = new StringWriter();
               HtmlTextWriter htw = new HtmlTextWriter(sw);
               GridView1.AllowPaging = false;
               GridView1.DataBind();
              GridView1.HeaderRow.Style.Add("background-color", "#FFFFFF");
          for (int i = 0; i < GridView1.HeaderRow.Cells.Count; i++)
      {
           GridView1.HeaderRow.Cells[i].Style.Add("background-color", "#507CD1");
       }
         int j = 1;
          foreach (GridViewRow gvrow in GridView1.Rows)
       {
         gvrow.BackColor = Color.White;
         if (j <= GridView1.Rows.Count)
         {
        if (j % 2 != 0)
         {
        for (int k = 0; k < gvrow.Cells.Count; k++)
        {
        gvrow.Cells[k].Style.Add("background-color", "#EFF3FB");
          }
          }
          }
         j++;
         }
        GridView1.RenderControl(htw);
       Response.Write(sw.ToString());
        Response.End();
         }
         }

Thursday, 6 December 2012

How To Use Ajax Dragable Panel with Java Script?



What is Ajax AJAX stands for Asynchronous JavaScript and XML.It is basically used to add script to the page which is executed and processed by the browser.Ajax is the combination of multiple technologies such as a CSS, JavaScript, CSS, DOM , and XHTML etc.

The ScriptManager Control:-

The ScriptManager control is the very important control and must be define on the page for other controls to work.
It has the basic syntax:
<asp:ScriptManager ID="Scriptmgr" runat="server">
</asp:ScriptManager>

The UpdatePanel Control :-The Update Panel  control inside it triggers a post back, the Update Panel intervenes to initiate the post asynchronously and update just that portion of the page.

<form id="form1" runat="server">
   <div>
      <asp:ScriptManager ID="scriptmgr" runat="server" />
   </div>
   
   <asp:UpdatePanel ID="updatep1" runat="server">
      <ContentTemplate>
         
      </ContentTemplate>
   </asp:UpdatePanel>
   
   
  
</form>



<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server" >
<script type="text/javascript">
    function setBodyContentHeight() {
        document.body.style.height = Math.max(document.documentElement.scrollHeight, document.body.scrollHeight) + "px";
    }
    setBodyContentHeight();
    function ClosePopup() {
        //Hide the modal popup - the update progress
        var popup = $find('<%= modalpopup1.ClientID %>');
        if (popup != null) {
            popup.hide();
        }
    }
</script> 
<script type="text/javascript">
    function setBodyContentHeight1() {
        document.body.style.height = Math.max(document.documentElement.scrollHeight, document.body.scrollHeight) + "px";
    }
    setBodyContentHeight();
    function ClosePopup1() {
        //Hide the modal popup - the update progress
        var popup = $find('<%= ModalPopupExtender1.ClientID %>');
        if (popup != null) {
            popup.hide();
        }
    }
</script>
<style type="text/css">
    .Dialog {
background: none repeat scroll 0 0 #E5E8D2;
border: 0px solid #466D77;
        width: 134%;
    }
body {
font-family: Verdana,Tahoma,Arial !important;
font-size: 9pt;
}
.TitleBar {
background: url("images/titleBarBg.gif") repeat-x scroll left bottom #FAFAFA;
cursor: move;
}
.Button {
background: #E9E9E9;
border: 1px solid #9B9B9B;
padding: 0.1em;
vertical-align: middle;
}
.modalPopup
{
background-color: #696969;
filter: alpha(opacity=40);
opacity: 0.0;
xindex:0;
}
    #form1
    {
        background-color: #FFFFFF;
    }
    .style1
    {
        width: 128px;
    }
</style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<asp:UpdatePanel ID="up1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
    <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
    </asp:ToolkitScriptManager>
    <asp:DragPanelExtender ID="dragpnl" runat="server" TargetControlID="pnllogin"
        DragHandleID="pnldrag">
    </asp:DragPanelExtender>
<%--<ajax:dragpanelextender ID="dragpnl" runat="server" TargetControlID="pnllogin"
        DragHandleID="pnldrag"/>--%>
<%--<ajax:modalpopupextender ID="modalpopup1" runat="server"
        BackgroundCssClass="modalPopup" TargetControlID="btnshow"
        PopupControlID="pnllogin"/>--%>
        <div><asp:Panel ID="Panel111" runat="server" Width="436px">
<div style="width: 400px">
<asp:Panel ID="Panel21" runat="server">
<table class="Dialog">
<tr>
<td class="style1"><strong>Company Name&nbsp;</strong></td><td>
    <asp:TextBox ID="t1" runat="server"></asp:TextBox>
    </td><td>
        <asp:Button ID="btnshow" runat="server" BorderStyle="None"
            style="text-decoration: underline" Text="Add More Company" Width="201px"
            BackColor="#5E909C" BorderColor="#5E909C" />
        <asp:ModalPopupExtender ID="modalpopup1" runat="server"
            BackgroundCssClass="modalPopup" PopupControlID="pnllogin"
            TargetControlID="btnshow">
        </asp:ModalPopupExtender>
    </td>
</tr>
<tr>
<td class="style1"><strong>To</strong></td><td>
    <asp:TextBox ID="t2" runat="server"></asp:TextBox>
    </td><td></td>
</tr>
<tr>
<td class="style1"><strong>From&nbsp;&nbsp;</strong>&nbsp;&nbsp;</td><td>
    <asp:TextBox ID="t3" runat="server"></asp:TextBox>
    </td><td></td>
</tr>
    <tr>
        <td class="style1">
            <strong>Achivement</strong></td>
        <td>
            <asp:TextBox ID="t5" runat="server" TextMode="MultiLine" Width="158px"></asp:TextBox>
        </td>
        <td>
            <asp:Button ID="btnshow1" runat="server" BorderStyle="None" ForeColor="#333333"
                style="text-decoration: underline" Text="Add More Achivement"
                Width="194px" BackColor="#5E909C" />
            <asp:ModalPopupExtender ID="ModalPopupExtender1" runat="server"
                BackgroundCssClass="modalPopup" PopupControlID="Panel11"
                TargetControlID="btnshow1">
            </asp:ModalPopupExtender>
        </td>
    </tr>
    <tr>
        <td class="style1">
            &nbsp;</td>
        <td>
            <asp:Button ID="Button6" runat="server" BorderColor="Gray" BorderStyle="None"
                Text="Submit" />
        </td>
        <td>
            &nbsp;</td>
    </tr>
</table></asp:Panel>
            </asp:Panel>
</div>
</div>
    <strong>&nbsp;&nbsp;&nbsp; </strong>
<asp:Panel ID="pnllogin" runat="server" Width="436px">
<div style="width: 400px">
<asp:Panel ID="pnldrag" runat="server">
<table class="Dialog" width="100%">
<tr style= " background-image:url(bg_filter_header.gif)" class="TitleBar">
<td style="color:white">
<img src="close.gif" align="right" style="cursor:pointer" alt="Close" onclick="ClosePopup()"/>
    Company Details</td>
</tr>
<tr>
<td>
<table width="100%" border="0px" align="left" style="">
<!-- login id -->
<tr>
<td align="right">Company Name:</td>
<td align="left">
<asp:TextBox ID="txtUsername" runat="server"></asp:TextBox>
</td>
</tr>
<!-- password -->
<tr>
<td align="right">To:</td>
<td align="left">
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</td>
</tr>
    <tr>
        <td align="right">
            From</td>
        <td align="left">
            <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
        </td>
    </tr>
    <tr>
        <td align="right">
            Achivement</td>
        <td align="left">
            <asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>
        </td>
    </tr>
<tr>
<td></td>
<td>
<asp:Button ID="btnsubmit" runat="server" Text="Submit" CssClass="Button"
        onclick="btnsubmit_Click" />
<asp:Button ID="btnCancel" runat="server" Text="Cancel" CssClass="Button"  />
</td>                            
</tr>
<tr>
<td align="right">
<input type="checkbox" />
</td>
<td align="left">Remember User ID</td>                              
</tr>
</table>
</td>
</tr>
</table>
</asp:Panel>
</div>
</asp:Panel>
    <asp:DragPanelExtender ID="DragPanelExtender12" runat="server"
        TargetControlID="Panel11" DragHandleID="pnllogin2">
    </asp:DragPanelExtender>
<%--<ajax:dragpanelextender ID="DragPanelExtender12" runat="server"
        TargetControlID="Panel11" DragHandleID="pnllogin2"/>--%>
<%--<ajax:modalpopupextender ID="ModalPopupExtender1" runat="server"
        BackgroundCssClass="modalPopup" TargetControlID="btnshow1"
        PopupControlID="Panel11"/>--%>
<asp:Panel ID="Panel11" runat="server" Width="435px">
<div style="width: 400px">
<asp:Panel ID="pnllogin2" runat="server">
<table class="Dialog" width="100%">
<tr style= " background-image:url(bg_filter_header.gif)" class="TitleBar">
<td style="color:white">
<img src="close.gif" align="right" style="cursor:pointer" alt="Close" onclick="ClosePopup1()"/>
    Achivement&nbsp; Details</td>
</tr>
<tr>
<td>
<table width="100%" border="0px" align="center" style="">
<!-- login id -->
<tr>
<td align="right">Achivement</td>
<td align="left">
<asp:TextBox ID="TextBox4" runat="server"></asp:TextBox>
</td>
</tr>
<!-- password -->
<tr>
<td align="right">&nbsp;</td>
<td align="left">
    <asp:Button ID="Button4" runat="server" CssClass="Button" Text="Submit"
        onclick="Button4_Click" />
    <asp:Button ID="Button5" runat="server" CssClass="Button" Text="Cancel" />
</td>
</tr>
    <tr>
        <td align="right">
            &nbsp;</td>
        <td align="left">
            &nbsp;</td>
    </tr>
    <tr>
        <td align="right">
            &nbsp;</td>
        <td align="left">
            &nbsp;</td>
    </tr>
<tr>
<td></td>
<td>
    &nbsp;</td>                           
</tr>
<tr>
<td align="right">
    &nbsp;</td>
<td align="left">&nbsp;</td>                               
</tr>
</table>
</td>
</tr>
</table>
</asp:Panel>
</div>
</asp:Panel></ContentTemplate>
</asp:UpdatePanel>
</asp:Content>

What is ASP.NET? Components of ASP.NET

ASP.Net Definition -It is used for creating web-based applications.ASP.Net is a web development platform provided by Microsoft. ASP.NET i...