Skip to main content

create html format of data extracted from database in asp.net

Suppose we have a need to print 500 pages a time without using report and every page is on individual page then what we will do.Below is the solution.

This thing is very needed now a days as to avoid using reports in asp.net.Reports are used to display data in the output page with proper format and alignment but they are heavy and some extra features are to be included.We cal also generate output in proper format by just using HTML tags.For this we use Jquery (very simple and easy to use).

Below is the code :

First import namespace using System.Web.Services;

Then Create Web method on cs page (code behind model) to get data from database and format it in List.

[WebMethod]
    public static List<getdata> getlccodedetail(string prefixText, string studymode, string state)
    {
        try
        {
            List<getdata> li = new List<getdata>();

            if (con.State == ConnectionState.Closed)
                con.Open();
            SqlCommand cmd = new SqlCommand();
            cmd.CommandText = "pODLenvelopeformat";
            cmd.Connection = con;
            cmd.CommandType = CommandType.StoredProcedure;
            if (prefixText != "")
            {
                string check = prefixText;
                if (check[check.Length - 1]==',')
                {
                    check = check.Substring(0, check.Length - 1);
                }
                check = prefixText.Replace(",", "','");
                cmd.Parameters.AddWithValue("@lccode", check);
            }
            if (studymode != "0")
            {
                cmd.Parameters.AddWithValue("@studymode", studymode);
            }
            if (state != "0")
            {
                cmd.Parameters.AddWithValue("@state", state);
            }
            SqlDataAdapter adp = new SqlDataAdapter(cmd);
            DataSet ds = new DataSet();
            adp.Fill(ds);
            foreach (DataRow dr in ds.Tables[0].Rows)
            {
                getdata bkl = new getdata();
                bkl.lccode = dr["lccode"].ToString();
                if (dr["headname"].ToString() == "")
                {
                    bkl.LCHeadName = "---";
                }
                else
                {
                    bkl.LCHeadName = dr["headname"].ToString();
                }
                bkl.adress = dr["adress"].ToString();
                bkl.state = dr["state"].ToString();
                bkl.contact = dr["contact"].ToString();
                li.Add(bkl);
            }
            return li;
        }
        catch (Exception ex)
        {
            return null;
        }
    }



 public class getdata
    {
        private string _lccode;
        private string _LCHeadName;
        private string _Address;
        private string _State;
        private string _Contact;

        public string lccode
        {
            get
            {
                return _lccode;
            }
            set
            {
                _lccode = value;
            }
        }
        public string LCHeadName
        {
            get
            {
                return _LCHeadName;
            }
            set
            {
                _LCHeadName = value;
            }
        }
        public string adress
        {
            get
            {
                return _Address;
            }
            set
            {
                _Address = value;
            }

        }
        public string state
        {
            get
            {
                return _State;
            }
            set
            {
                _State = value;

            }
        }
        public string contact
        {
            get
            {
                return _Contact;
            }
            set
            {
                _Contact = value;
            }
        }
    }

Above Code Will bring data from database in List Form..Now we will format it accordingly in ASPX page to display as much data we need by passing arguments and fetch data

   function GetStudentDetail() {

            var lccode = $("#<%=lccode.ClientID %>").val();
            var studymode = $("#<%=DropDownList3.ClientID %>").val();
            var state = $("#<%=DropDownList6.ClientID %>").val();
            if (lccode == "" && studymode == "0" && state == "0")
            { alert("Please select at least one option to Search !!"); }
            else if ($("#<%=ddlSize.ClientID %>").val() == 'Please Select') {
                alert("Please Select Size To Print !!");
            }
            else if ($("#<%=ddltype.ClientID %>").val() == 'Please Select') {
                alert("Please Select Post Type To Print !!");
            }
            else {
                $("#<%=loadingdiv.ClientID %>").css('display', 'block');
                $("#spanMsg").css('display', 'block');
                spanMsg
                $.ajax({
                    type: "POST",
                    url: "frmenvelopeformat.aspx/getlccodedetail",
                    contentType: "application/json; charset=utf-8",
                    data: "{'prefixText':'" + lccode + "','studymode':'" + studymode + "','state':'" + state + "'}",
                    dataType: "json",
                    success: function (response) {
                        $("#<%=loadingdiv.ClientID %>").css('display', 'none');
                        $("#spanMsg").css('display', 'none');

                        var html = "";
                        var posttype = $("#<%=ddltype.ClientID %>").val();
                        var teams = response;

                        for (var i = 0; i < teams.length; i++) {
                            html += "<div style='height:auto' target='_blank' id='ViewRecord" + i + "'>"
                            html += "<table id='Table1' width='100%' style='height: 100%; font-weight: bold; text-align: left;'>"
                            html += "<tbody>"
                            html += "<tr style='text-align:center'>"
                            html += "<td>Post Type "
                            html += "<span>" + posttype + "</span>"
                            html += "</td>"
                            html += "</tr>"

                            html += "<tr>"
                            html += "<td style='padding-left: 20px;'>TO,"
                            html += "</td>"
                            html += "</tr>"

                            html += "<tr>"
                            html += "<td style='padding-left: 20px; vertical-align: top;'>"
                            html += "<span> Service Provider Code: " + teams[i].lccode + "</span>"
                            html += "</td>"
                            html += "</tr>"

                            html += "<tr>"
                            html += "<td style='padding-left: 20px; vertical-align: top;'>"
                            html += "<span>" + teams[i].LCHeadName + "</span>"
                            html += "</td>"
                            html += "</tr>"


                            html += "<tr>"
                            html += "<td style='padding-left: 20px; vertical-align: top;'>"
                            html += "<span>" + teams[i].adress + "</span>"
                            html += "</td>"
                            html += "</tr>"

                            html += "<tr>"
                            html += "<td style='padding-left: 20px; vertical-align: top;'>"
                            html += "<span>" + teams[i].state + "</span>"
                            html += "</td>"
                            html += "</tr>"

                            html += "<tr>"
                            html += "<td style='padding-left: 20px; vertical-align: top;'>"
                            html += "<span> Phone: " + teams[i].contact + "</span>"
                            html += "</td>"
                            html += "</tr>"

                            html += "<tr>"
                            html += "<td style='padding-left: 20px; vertical-align: bottom; height: 2px;'>"
                            html += "</td>"
                            html += "</tr>"

                            html += "<tr>"
                            html += "<td style='padding-left: 20px; vertical-align: bottom;'> From: - Directorate Of Distance Education"
                            html += "</td>"
                            html += "</tr>"

                            html += "<tr>"
                            html += "<td style='padding-left: 20px; vertical-align: bottom;'>  Lovely Professional University"
                            html += "</td>"
                            html += "</tr>"

                            html += "<tr>"
                            html += "<td style='padding-left: 20px; vertical-align: bottom;'>  Jalandhar-Delhi G.T. Road (NH-1),"
                            html += "</td>"
                            html += "</tr>"

                            html += "<tr>"
                            html += "<td style='padding-left: 20px; vertical-align: bottom;'>Phagwara, Punjab (INDIA) - 144402"
                            html += "</td>"
                            html += "</tr>"

                            html += "<tr>"
                            html += "<td style='padding-left: 20px; vertical-align: bottom; height: 2px;'>"
                            html += "</td>"
                            html += "</tr>"
                            html += "</tbody>"
                            html += "</table>"

                            html += "</tbody>"
                            html += "</table>"
                            html += "</div>"
                            html += "<span Style='page-break-before: always;'> </span>"
                            $("#Content").html(html);


                        }
                        if (teams.length > 0) {
                            printContent("Content");
                        }
                        else {
                            alert("Sorry !! No Data Found");
                        }
                    }
                });

            }

            return false;
        }


PrintContent is the function to print the whole format :

function printContent(id) {
            var height = '<%=HiddenField2.ClientID %>';
            var width = '<%=HiddenField1.ClientID %>';
            var font = '<%=HiddenField3.ClientID %>';


            if ($("#<%=ddlSize.ClientID %>").val() == '9*4') {
                height = '260';
                width = '675';
                font = '12';
            }
            else if ($("#<%=ddlSize.ClientID %>").val() == '10*4.5') {
                height = '293';
                width = '750';
                font = '17';
            }
            else if ($("#<%=ddlSize.ClientID %>").val() == '10*12') {
                height = '715';
                width = '1275';
                font = '29';
            }
            else if ($("#<%=ddlSize.ClientID %>").val() == '10*14') {
                height = '780';
                width = '1275';
                font = '31';
            }
            else if ($("#<%=ddlSize.ClientID %>").val() == '12*16') {
                height = '975';
                width = '1190';
                font = '34';
            }

            str = document.getElementById(id).innerHTML
            newwin = window.open('', 'printwin')
            newwin.document.write('<HTML>\n<HEAD>\n')
            newwin.document.write('<TITLE>Print CA</TITLE>\n')
            newwin.document.write('<style type="text/css">\n')
            newwin.document.write('*{font-size:' + font + 'px;}\n')
            newwin.document.write('html { width: ' + width + '; height: ' + height + '; }\n')
            newwin.document.write('<\/style>\n')
            newwin.document.write('<script>\n')
            newwin.document.write('function chkstate(){\n')
            newwin.document.write('if(document.readyState=="complete"){\n')
            newwin.document.write('window.close()\n')
            newwin.document.write('}\n')
            newwin.document.write('else{\n')
            newwin.document.write('setTimeout("chkstate()",2000)\n')
            newwin.document.write('}\n')
            newwin.document.write('}\n')
            newwin.document.write('function print_win(){\n')
            newwin.document.write('window.print();\n')
            newwin.document.write('chkstate();\n')
            newwin.document.write('}\n')
            newwin.document.write('<\/script>\n')
            newwin.document.write('</HEAD>\n')
            newwin.document.write('<BODY  onload="print_win()">\n')
            newwin.document.write(str)
            newwin.document.write('</BODY>\n')
            newwin.document.write('</HTML>\n')
            newwin.document.close()

        }

Comments

Post a Comment

Popular posts from this blog

show image in asp.net form from database

In order to show image from database to webform first add an image control in webpage.   <asp:Image ID="imgStudentImage" runat="server" Height="157px" Width="160px" /> Then add new webform to read image from database for example displayimage.aspx and in code behind model write the following code. public string str = //your string     public SqlConnection conn;     public SqlCommand sql = new SqlCommand();     public SqlDataReader dr;     public string strSQL;     protected void Page_Load(object sender, EventArgs e)     {         conn = new SqlConnection(str);         conn.Open();         long id = Convert.ToInt64(Request.QueryString["mId"]);         strSQL = "";         strSQL = strSQL + " SELECT snap from S...
Post a Comment
Read more

Export Doc,Access,Image,CSV,Excel,Pdf,XML,HTML,Text,Print of Gridview in Asp.net

First import itextsharp.dll in the solution and use three namespces (basically for pdf) using iTextSharp.text; using iTextSharp.text.pdf; using iTextSharp.text.html.simpleparser;          Then Use the following code :- on each button  click  protected void Page_Load(object sender, EventArgs e)         {             if (!Page.IsPostBack)             {                 BindGridDetails(GridView1);             }         }                 protected DataTable BindGridDetails(GridView GridView1)         {   ...
1 comment
Read more

Advent of code 2022 day 22 part 1

  function main(input, input1) {     let grid = input.split( '\n' );     grid.shift();     // only in big input     for ( let i = 0 ; i < 100 ; i++) {         grid[i] = '                                                  ' + grid[i];     }     //console.log(grid[100])     grid = grid.map(x => x.split( '' ))     // find first left top allowed     let temppos = - 1 ;     grid[ 0 ].forEach((element, i) => {         if (temppos == - 1 && element == '.' ) {             temppos = i;         }     });     let initpos = new pos(temppos, 0 )     // console.log(initpos)     // make grid equal shape     let...
Post a Comment
Read more