Wednesday, 5 September 2012

Bind DropdownList without postback using javascript

 

Generally dropdownlist is the most useful control in our applications but in some cases it is difficult to get flexible binding. This type of binding done by javascript is more efficient and easy to handle.

This type of binding can get data from PageMethods (or) WebServices etc. By getting the data we can bind to dropdownlist through javascript.

JAVASCRIPT:

<script type="text/javascript">

        function pageLoad() {
            PageMethods.GetData(CallMethod);
        }

        function CallMethod(result) {
            var ddl = document.getElementById("ddl");
            for (D = 0; D < result.length; D++) {
                opt = new Option(result[D], result[D]);
                ddl.add(opt);
            }
        }

</script>

pageLoad function is just similar to PageLoad event is server side. In clientside pageLoad i am calling PageMethods and getting the data here. The obtained data is in the form of "List" and can be easily handled.

PAGEMETHODS:
[WebMethod(EnableSession=true)]
    public static List<string> GetData()
    {
        List<string> list = new List<string>();
        list.Add("one");
        list.Add("two");
        list.Add("three");
        list.Add("four");
        list.Add("five");
        return list;
    }

Here in this case i have done a sample list<string>. The final List will get returned to the javascript function.

Sample code will be obtained here Click Here

Friday, 27 July 2012

Upload Image and show preview without clicking any button manually


Upload Image and show preview without clicking any Button Manually


In .aspx page Directory:


<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="FileUpload.aspx.cs" Inherits="RadUpload.FileUpload" EnableEventValidation="false" %>

Script


 <script language="javascript">

        function Change(obj) {
            __doPostBack("<%= Button1.ClientID %>", "");
        }
             
    </script>


<asp:UpdatePanel ID="UPanel" runat="server">
            <ContentTemplate>
                <table width="100%">
                    <tr>
                        <td align="center">
                            <img id="imgUploadImage" runat="server" style="height: 200px; width: 200px;" />
                        </td>
                    </tr>
                    <tr>
                        <td align="center">
                            <asp:FileUpload ID="FileUpload1" runat="server" onchange="Change(this);" />
                            <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button"                Visible="False" />
                        </td>
                    </tr>
                </table>
            </ContentTemplate>
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" />
            </Triggers>
        </asp:UpdatePanel>


CodeBehind Page

protected void Button1_Click(object sender, EventArgs e)
        {
            int FileSize = FileUpload1.PostedFile.ContentLength;
            byte[] bytFileBinary = new byte[FileSize];
            FileUpload1.PostedFile.InputStream.Read(bytFileBinary, 0, (int)FileUpload1.PostedFile.ContentLength);
            imgUploadImage.Src = "data:image/png;base64," + Convert.ToBase64String(bytFileBinary);
        }

final Out Put :





Friday, 22 June 2012

How to Call Method Or Function Or Button From Java Script

Call Method Or Function Or Button From Java Script

                    Actually we can call button from java script and it will lead the post back also 

 Example  :

          First Add This Property to the Page Directory

                        EnableEventValidation="false"

      here:



      
      1) when click on button or any control call java script as below
                
              

       2) the Java script function :


       3) this OK button place in the page like this



       4) so the button OK will call in server side:



         Like this we can call Method Or Function Or Button From Java Script

Monday, 28 May 2012

Image Mouse Hover in asp.net


To show image in particular div when mouse hover on the image using asp.net

  Script

<script type="text/javascript" language="javascript">

        function ShowToolTip(con) {
            document.getElementById("div_img").style.visibility = "visible";
            document.getElementById("img_tool").src = con.src;
            document.getElementById("div_img").style.left = event.clientX;
            document.getElementById("div_img").style.top = event.clientY;
            document.getElementById("div_img").style.zIndex = "0";
        }

        function hideToolTip() {
            document.getElementById("div_img").style.visibility = "hidden";
        }

    </script>

Note:write this script in head tag


Design:


<form id="form1" runat="server">
    <div>
        <asp:Image ID="Image1" runat="server" ImageUrl="~/Images/3.jpg" Height="50px" Width="50px"
            onmouseover="ShowToolTip(this);" onmouseout="hideToolTip();" />
            <br />
            <br />
        <div id="div_img" style="height: 300px; width: 300px; border: solid 1px black; position: absolute;
            visibility: hidden;">
            <img id="img_tool" height="100%" width="100%" />
        </div>
    </div>
    </form>

Final Output:




Replace characters in javascript

In server side we have "Replace" method to replace the characters in a string but on javascript replace method will be not useful in certain cases instead of that we can do for loop to replace the particular characters and get the specific output.

Example :


           var StringChar = "this is my 324o234u324t2342p234u234t"; //Your string to get replaced
         In this case i need to remove the numbers and get the filtered output.

         Replace Method in Javascript :
         var ReplacedCharacters = String.replace("0123456789"," ");
         Output :   "this is my 324o234u324t2342p234u234t"

         In this cases we can do like this :
         var ReplacedChar = "";
         var Characters = "";
         var InValidChars = "0123456789";
         for (d = 0; d < StringChar.length; d++) {
         Characters = StringChar.charAt(d);
         if (InValidChars.indexOf(Characters) == -1) {
         ReplacedChar = ReplacedChar + Characters;
         }
         the resulting output is :   ReplacedChar = this is my output


Saturday, 26 May 2012

Word Documents and Excel Documents in IFRAME

In this below example we are converting word OR excel document to HTML.

In this case we are converting and giving converted HTML file as ""src"" to ""iframe"".

Step By Step Procedure :

1)First step is create one folder in your application which needs to maintain the documents in that because iframe will take src within the application itself,outside of the application it will not work.

2) The aspx page as follows :

    <asp:ScriptManager ID="ScriptManager2" runat="server">
    </asp:ScriptManager>
    <div>
        <table>
            <tr>
                <td valign="middle" align="center">
                    <asp:FileUpload ID="FileUpload2" runat="server" />
                    <asp:Button ID="btnView" runat="server" Text="View" onclick="btnView_Click" />
                </td>
            </tr>
            <tr>
                <td width="100%">
                    <asp:UpdatePanel ID="panel2" runat="server">
                        <ContentTemplate>
                            <div style="background-color: ThreeDFace;">
                                <asp:Label ID="lblFileName" runat="server">
                                </asp:Label>
                            </div>
                            <br />
                            <iframe id="docPreview" src="" width="100%" height="500px" frameborder="0" runat="server">
                            </iframe>
                        </ContentTemplate>
                    </asp:UpdatePanel>
                </td>
            </tr>
        </table>
    </div>


3) Add Interop.Excel & Interop.Word dll references for the application :



4) The button click event will be like this :

First get the binary data of file and save that file to its original format in documents folder.After saving the file according to the file extension convert to Html format and give the Html file as src for iframe.

private Word.ApplicationClass MSWord;       // The Interop Object for Word
private Excel.ApplicationClass MSExcel;     // The Interop Object for Excel
object Unknown = Type.Missing;        // For passing Empty values
protected void Page_Load(object sender, EventArgs e)
{
           
}

protected void btnView_Click(object sender, EventArgs e)
{
            byte[] BinaryFile = null;
            if (FileUpload2.PostedFile != null)
            {
                int FileSize = FileUpload2.PostedFile.ContentLength;
                BinaryFile = new byte[FileSize];
                FileUpload2.PostedFile.InputStream.Read(BinaryFile, 0, (int)FileUpload2.PostedFile.ContentLength);
                string FileName = FileUpload2.FileName;
                lblFileName.Text = FileName;
                string FileExtension = Path.GetExtension(FileName);
                string FolderPath = Server.MapPath("~/Documents");
                File.WriteAllBytes(FolderPath + "\\" + FileName, BinaryFile);
                if (FileExtension == ".doc" || FileExtension == ".docx")
                {
                    ConvertWordToHTML(FolderPath + "\\" + FileName, FolderPath + "\\" + FileName.Split('.')[0] + ".html");
                }
                else if (FileExtension == ".xls" || FileExtension == ".xlsx")
                {
                    ConvertExcelToHTML(FolderPath + "\\" + FileName, FolderPath + "\\" + FileName.Split('.')[0] + ".html");
                }
                docPreview.Attributes["src"] = "../Documents/" + FileName.Split('.')[0] + ".html";
            }
}

This method is used to convert WordDocument to HTML :

public void ConvertWordToHTML(object FilePath, object SaveTarget)
{
            if (MSWord == null)
                MSWord = new Word.ApplicationClass();

            try
            {
                MSWord.Visible = false;
                MSWord.Application.Visible = false;
                MSWord.WindowState = Word.WdWindowState.wdWindowStateMinimize;

                MSWord.Documents.Open(ref FilePath, ref Unknown,
                     ref Unknown, ref Unknown, ref Unknown,
                     ref Unknown, ref Unknown, ref Unknown,
                     ref Unknown, ref Unknown, ref Unknown,
                     ref Unknown, ref Unknown, ref Unknown, ref Unknown);

                object format = Word.WdSaveFormat.wdFormatHTML;

                MSWord.ActiveDocument.SaveAs(ref SaveTarget, ref format,
                        ref Unknown, ref Unknown, ref Unknown,
                        ref Unknown, ref Unknown, ref Unknown,
                        ref Unknown, ref Unknown, ref Unknown,
                        ref Unknown, ref Unknown, ref Unknown,
                       ref Unknown, ref Unknown);
            }
            catch (Exception e)
            {
            }
            finally
            {
                if (MSWord != null)
                {
                    MSWord.Documents.Close(ref Unknown, ref Unknown, ref Unknown);
                    MSWord.Quit(ref Unknown, ref Unknown, ref Unknown);
                }
            }
}

This method is used to convert ExcelDocument to HTML :

public void ConvertExcelToHTML(string Source, string Target)
{
            if (MSExcel == null) 
                MSExcel = new Excel.ApplicationClass();

            try
            {
                MSExcel.Visible = false;
                MSExcel.Application.Visible = false;
                MSExcel.WindowState = Excel.XlWindowState.xlMinimized;

                MSExcel.Workbooks.Open(Source, Unknown,
                     Unknown, Unknown, Unknown,
                     Unknown, Unknown, Unknown,
                     Unknown, Unknown, Unknown,
                     Unknown, Unknown, Unknown, Unknown);

                object format = Excel.XlFileFormat.xlHtml;

                MSExcel.Workbooks[1].SaveAs(Target, format,
                        Unknown, Unknown, Unknown,
                        Unknown, Excel.XlSaveAsAccessMode.xlExclusive, Unknown,
                        Unknown, Unknown, Unknown,
                        Unknown);
            }
            catch (Exception e)
            {
            }
            finally
            {
                if (MSExcel != null)
                {
                    MSExcel.Workbooks.Close();
                    MSExcel.Quit();
                }
            }
}

5) Here in my example i have taken fileupload to upload word and excel documents, after selecting a file by clicking View button we can view the output just like this :

Output for WordDocument :



Output for ExcelDocument :





Friday, 25 May 2012

Word document in iframe

This is screen shot for iframe.Here In the below Screenshot iframe viewing the word document in the form of html. so i am giving html to the Iframe src.
Iframe can view excel,csv,pdf,text files etc.Pdf and Text formated files no need to be converted to html directly we can give src for that files.


Click below link to get full Example :

http://yash-maneel.blogspot.in/2012/05/word-documents-and-excel-documents-in.html

Wednesday, 23 May 2012

Culture info in RadDateTime Picker



In this example we can give culture info for localization in RadDatetimePicker.

for this below example u can get different localizations according to their country.

it is one of the property in RadDateTimePicker

for different localization we can find below link:
http://yash-maneel.blogspot.in/2012/05/different-culture-names.html

In aspx Page


 <telerik:RadDatePicker ID="RadDatePicker1" runat="server">
            <Calendar UseColumnHeadersAsSelectors="False" UseRowHeadersAsSelectors="False"
                          ViewSelectorText="x" FastNavigationSettings-EnableTodayButtonSelection="true"
                          CultureInfo="Arabic (Iraq)">
            </Calendar>
        </telerik:RadDatePicker>

Note: can change culture info according to your requirements


Final OutPut:



Different Culture Names


CULTURE ||SPEC.CULTURE||ENGLISH NAME

af          af-ZA       Afrikaans
af-ZA       af-ZA       Afrikaans (South Africa)
ar          ar-SA       Arabic
ar-AE       ar-AE       Arabic (U.A.E.)
ar-BH       ar-BH       Arabic (Bahrain)
ar-DZ       ar-DZ       Arabic (Algeria)
ar-EG       ar-EG       Arabic (Egypt)
ar-IQ       ar-IQ       Arabic (Iraq)
ar-JO       ar-JO       Arabic (Jordan)
ar-KW       ar-KW       Arabic (Kuwait)
ar-LB       ar-LB       Arabic (Lebanon)
ar-LY       ar-LY       Arabic (Libya)
ar-MA       ar-MA       Arabic (Morocco)
ar-OM       ar-OM       Arabic (Oman)
ar-QA       ar-QA       Arabic (Qatar)
ar-SA       ar-SA       Arabic (Saudi Arabia)
ar-SY       ar-SY       Arabic (Syria)
ar-TN       ar-TN       Arabic (Tunisia)
ar-YE       ar-YE       Arabic (Yemen)
az          az-Latn-AZ  Azeri
az-Cyrl-AZ  az-Cyrl-AZ  Azeri (Cyrillic, Azerbaijan)
az-Latn-AZ  az-Latn-AZ  Azeri (Latin, Azerbaijan)
be          be-BY       Belarusian
be-BY       be-BY       Belarusian (Belarus)
bg          bg-BG       Bulgarian
bg-BG       bg-BG       Bulgarian (Bulgaria)
bs-Latn-BA  bs-Latn-BA  Bosnian (Bosnia and Herzegovina)
ca          ca-ES       Catalan
ca-ES       ca-ES       Catalan (Catalan)
cs          cs-CZ       Czech
cs-CZ       cs-CZ       Czech (Czech Republic)
cy-GB       cy-GB       Welsh (United Kingdom)
da          da-DK       Danish
da-DK       da-DK       Danish (Denmark)
de          de-DE       German
de-AT       de-AT       German (Austria)
de-DE       de-DE       German (Germany)
de-CH       de-CH       German (Switzerland)
de-LI       de-LI       German (Liechtenstein)
de-LU       de-LU       German (Luxembourg)
dv          dv-MV       Divehi
dv-MV       dv-MV       Divehi (Maldives)
el          el-GR       Greek
el-GR       el-GR       Greek (Greece)
en          en-US       English
en-029      en-029      English (Caribbean)
en-AU       en-AU       English (Australia)
en-BZ       en-BZ       English (Belize)
en-CA       en-CA       English (Canada)
en-GB       en-GB       English (United Kingdom)
en-IE       en-IE       English (Ireland)
en-JM       en-JM       English (Jamaica)
en-NZ       en-NZ       English (New Zealand)
en-PH       en-PH       English (Republic of the Philippines)
en-TT       en-TT       English (Trinidad and Tobago)
en-US       en-US       English (United States)
en-ZA       en-ZA       English (South Africa)
en-ZW       en-ZW       English (Zimbabwe)
es          es-ES       Spanish
es-AR       es-AR       Spanish (Argentina)
es-BO       es-BO       Spanish (Bolivia)
es-CL       es-CL       Spanish (Chile)
es-CO       es-CO       Spanish (Colombia)
es-CR       es-CR       Spanish (Costa Rica)
es-DO       es-DO       Spanish (Dominican Republic)
es-EC       es-EC       Spanish (Ecuador)
es-ES       es-ES       Spanish (Spain)
es-GT       es-GT       Spanish (Guatemala)
es-HN       es-HN       Spanish (Honduras)
es-MX       es-MX       Spanish (Mexico)
es-NI       es-NI       Spanish (Nicaragua)
es-PA       es-PA       Spanish (Panama)
es-PE       es-PE       Spanish (Peru)
es-PR       es-PR       Spanish (Puerto Rico)
es-PY       es-PY       Spanish (Paraguay)
es-SV       es-SV       Spanish (El Salvador)
es-UY       es-UY       Spanish (Uruguay)
es-VE       es-VE       Spanish (Venezuela)
et          et-EE       Estonian
et-EE       et-EE       Estonian (Estonia)
eu          eu-ES       Basque
eu-ES       eu-ES       Basque (Basque)
fa          fa-IR       Persian
fa-IR       fa-IR       Persian (Iran)
fi          fi-FI       Finnish
fi-FI       fi-FI       Finnish (Finland)
fo          fo-FO       Faroese
fo-FO       fo-FO       Faroese (Faroe Islands)
fr          fr-FR       French
fr-BE       fr-BE       French (Belgium)
fr-CA       fr-CA       French (Canada)
fr-FR       fr-FR       French (France)
fr-CH       fr-CH       French (Switzerland)
fr-LU       fr-LU       French (Luxembourg)
fr-MC       fr-MC       French (Principality of Monaco)
gl          gl-ES       Galician
gl-ES       gl-ES       Galician (Galician)
gu          gu-IN       Gujarati
gu-IN       gu-IN       Gujarati (India)
he          he-IL       Hebrew
he-IL       he-IL       Hebrew (Israel)
hi          hi-IN       Hindi
hi-IN       hi-IN       Hindi (India)
hr          hr-HR       Croatian
hr-BA       hr-BA       Croatian (Bosnia and Herzegovina)
hr-HR       hr-HR       Croatian (Croatia)
hu          hu-HU       Hungarian
hu-HU       hu-HU       Hungarian (Hungary)
hy          hy-AM       Armenian
hy-AM       hy-AM       Armenian (Armenia)
id          id-ID       Indonesian
id-ID       id-ID       Indonesian (Indonesia)
is          is-IS       Icelandic
is-IS       is-IS       Icelandic (Iceland)
it          it-IT       Italian
it-CH       it-CH       Italian (Switzerland)
it-IT       it-IT       Italian (Italy)
ja          ja-JP       Japanese
ja-JP       ja-JP       Japanese (Japan)
ka          ka-GE       Georgian
ka-GE       ka-GE       Georgian (Georgia)
kk          kk-KZ       Kazakh
kk-KZ       kk-KZ       Kazakh (Kazakhstan)
kn          kn-IN       Kannada
kn-IN       kn-IN       Kannada (India)
ko          ko-KR       Korean
kok         kok-IN      Konkani
kok-IN      kok-IN      Konkani (India)
ko-KR       ko-KR       Korean (Korea)
ky          ky-KG       Kyrgyz
ky-KG       ky-KG       Kyrgyz (Kyrgyzstan)
lt          lt-LT       Lithuanian
lt-LT       lt-LT       Lithuanian (Lithuania)
lv          lv-LV       Latvian
lv-LV       lv-LV       Latvian (Latvia)
mi-NZ       mi-NZ       Maori (New Zealand)
mk          mk-MK       Macedonian
mk-MK       mk-MK       Macedonian (Former Yugoslav Republic of Macedonia)
mn          mn-MN       Mongolian
mn-MN       mn-MN       Mongolian (Cyrillic, Mongolia)
mr          mr-IN       Marathi
mr-IN       mr-IN       Marathi (India)
ms          ms-MY       Malay
ms-BN       ms-BN       Malay (Brunei Darussalam)
ms-MY       ms-MY       Malay (Malaysia)
mt-MT       mt-MT       Maltese (Malta)
nb-NO       nb-NO       Norwegian, Bokmal (Norway)
nl          nl-NL       Dutch
nl-BE       nl-BE       Dutch (Belgium)
nl-NL       nl-NL       Dutch (Netherlands)
nn-NO       nn-NO       Norwegian, Nynorsk (Norway)
no          nb-NO       Norwegian
ns-ZA       ns-ZA       Northern Sotho (South Africa)
pa          pa-IN       Punjabi
pa-IN       pa-IN       Punjabi (India)
pl          pl-PL       Polish
pl-PL       pl-PL       Polish (Poland)
pt          pt-BR       Portuguese
pt-BR       pt-BR       Portuguese (Brazil)
pt-PT       pt-PT       Portuguese (Portugal)
quz-BO      quz-BO      Quechua (Bolivia)
quz-EC      quz-EC      Quechua (Ecuador)
quz-PE      quz-PE      Quechua (Peru)
ro          ro-RO       Romanian
ro-RO       ro-RO       Romanian (Romania)
ru          ru-RU       Russian
ru-RU       ru-RU       Russian (Russia)
sa          sa-IN       Sanskrit
sa-IN       sa-IN       Sanskrit (India)
se-FI       se-FI       Sami (Northern) (Finland)
se-NO       se-NO       Sami (Northern) (Norway)
se-SE       se-SE       Sami (Northern) (Sweden)
sk          sk-SK       Slovak
sk-SK       sk-SK       Slovak (Slovakia)
sl          sl-SI       Slovenian
sl-SI       sl-SI       Slovenian (Slovenia)
sma-NO      sma-NO      Sami (Southern) (Norway)
sma-SE      sma-SE      Sami (Southern) (Sweden)
smj-NO      smj-NO      Sami (Lule) (Norway)
smj-SE      smj-SE      Sami (Lule) (Sweden)
smn-FI      smn-FI      Sami (Inari) (Finland)
sms-FI      sms-FI      Sami (Skolt) (Finland)
sq          sq-AL       Albanian
sq-AL       sq-AL       Albanian (Albania)
sr          sr-Latn-CS  Serbian
sr-Cyrl-BA  sr-Cyrl-BA  Serbian (Cyrillic) (Bosnia and Herzegovina)
sr-Cyrl-CS  sr-Cyrl-CS  Serbian (Cyrillic, Serbia)
sr-Latn-BA  sr-Latn-BA  Serbian (Latin) (Bosnia and Herzegovina)
sr-Latn-CS  sr-Latn-CS  Serbian (Latin, Serbia)
sv          sv-SE       Swedish
sv-FI       sv-FI       Swedish (Finland)
sv-SE       sv-SE       Swedish (Sweden)
sw          sw-KE       Kiswahili
sw-KE       sw-KE       Kiswahili (Kenya)
syr         syr-SY      Syriac
syr-SY      syr-SY      Syriac (Syria)
ta          ta-IN       Tamil
ta-IN       ta-IN       Tamil (India)
te          te-IN       Telugu
te-IN       te-IN       Telugu (India)
th          th-TH       Thai
th-TH       th-TH       Thai (Thailand)
tn-ZA       tn-ZA       Tswana (South Africa)
tr          tr-TR       Turkish
tr-TR       tr-TR       Turkish (Turkey)
tt          tt-RU       Tatar
tt-RU       tt-RU       Tatar (Russia)
uk          uk-UA       Ukrainian
uk-UA       uk-UA       Ukrainian (Ukraine)
ur          ur-PK       Urdu
ur-PK       ur-PK       Urdu (Islamic Republic of Pakistan)
uz          uz-Latn-UZ  Uzbek
uz-Cyrl-UZ  uz-Cyrl-UZ  Uzbek (Cyrillic, Uzbekistan)
uz-Latn-UZ  uz-Latn-UZ  Uzbek (Latin, Uzbekistan)
vi          vi-VN       Vietnamese
vi-VN       vi-VN       Vietnamese (Vietnam)
xh-ZA       xh-ZA       Xhosa (South Africa)
zh-CN       zh-CN       Chinese (People's Republic of China)
zh-HK       zh-HK       Chinese (Hong Kong S.A.R.)
zh-CHS      (none)      Chinese (Simplified)
zh-CHT      (none)      Chinese (Traditional)
zh-MO       zh-MO       Chinese (Macao S.A.R.)
zh-SG       zh-SG       Chinese (Singapore)
zh-TW       zh-TW       Chinese (Taiwan)
zu-ZA       zu-ZA       Zulu (South Africa)

Convert date format in javascript


    Here in this example i am going to explain how to convert date into another format in javascript.

Example :

Here in this today's date will be obtained in the variable dt in system format and on TodayDate variable we will get the date in required format. The example formats are:
var dt = new Date();
var TodayDate = dt.format("M/d/yyyy");
var TodayDate = dt.format("M/d/yy");
var TodayDate = dt.format("MM/dd/yy");
var TodayDate = dt.format("yy/MM/dd");
var TodayDate = dt.format("yyyy-MM-dd");
var TodayDate = dt.format("dd-MMM-yy");
var TodayDate = dt.format("MM/dd/yyyy");


Saturday, 19 May 2012

show processing image when click on button and freeze background in asp.net

                           This post gives some useful information to beginner's  those don't know to design the page.
here i am just blocking the background screen to stop clicking any buttons or controls in the page. so with this u can click on particular button to freeze the screen


Example : 


             in the following example i am taking one registration form to show the processing


    after filling all the required fields click on the save button it will take some time to inseret the fields in database. in the meanwhile user should not click on any buttons or controls for that u can do the following design or logic.... 

In aspx Page:

<body>
    <form id="form1" runat="server">
  
   <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <div>
        <div style="background-color: Transparent; color: Black">
            <asp:UpdateProgress ID="UpdateProgress2" runat="server" AssociatedUpdatePanelID="UpdatePanel2"
                DisplayAfter="0">
                <ProgressTemplate>
                    <div style="top: 0px; height: 100%; background-color: White; opacity: 2.75; filter: alpha(opacity=75);
                        vertical-align: middle; left: 0px; z-index: 999999; width: 100%; position: absolute;
                        text-align: center; vertical-align: middle">
                        <table width="100%" height="100%">
                            <tr>
                                <td align="center" valign="middle">
                                    <img id="Img1" src="Processing.gif" runat="server" />
                                </td>
                            </tr>
                        </table>
                    </div>
                </ProgressTemplate>
            </asp:UpdateProgress>
        </div>
        <table width="100%">
            <tr>
                <td valign="middle" align="center" style="padding: 50px;">
                    <table width="500px" style="height: 500px; background-color: #b4cfe4;">
                        <tr>
                            <td width="100%" valign="bottom" style="padding:10px;">
                                <span style="font-family: Times New Roman; font-weight: bold; color: Red; font-size:20px;">Please fill
                                    the following form to complete registration</span>
                            </td>
                        </tr>
                        <tr>
                            <td width="100%">
                                <table width="100%">
                                    <tr>
                                        <td width="40%" align="right" style="padding: 5px;">
                                            <asp:Label ID="lblFirstName" runat="server" Text="FirstName :">
                                            </asp:Label>
                                        </td>
                                        <td width="60%" align="left" style="padding: 5px;">
                                            <asp:TextBox ID="txtFName" runat="server"></asp:TextBox>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td width="40%" align="right" style="padding: 5px;">
                                            <asp:Label ID="lblLastName" runat="server" Text="LastName :">
                                            </asp:Label>
                                        </td>
                                        <td width="60%" align="left" style="padding: 5px;">
                                            <asp:TextBox ID="txtLName" runat="server"></asp:TextBox>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td width="40%" align="right" style="padding: 5px;">
                                            <asp:Label ID="lblCity" runat="server" Text="City :">
                                            </asp:Label>
                                        </td>
                                        <td width="60%" align="left" style="padding: 5px;">
                                            <asp:TextBox ID="textCity" runat="server"></asp:TextBox>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td width="40%" align="right" style="padding: 5px;">
                                            <asp:Label ID="lblState" runat="server" Text="State :">
                                            </asp:Label>
                                        </td>
                                        <td width="60%" align="left" style="padding: 5px;">
                                            <asp:TextBox ID="txtState" runat="server"></asp:TextBox>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td width="40%" align="right" style="padding: 5px;">
                                            <asp:Label ID="lblPhone" runat="server" Text="PhoneNumber :">
                                            </asp:Label>
                                        </td>
                                        <td width="60%" align="left" style="padding: 5px;">
                                            <asp:TextBox ID="txtPhone" runat="server"></asp:TextBox>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td width="40%" align="right" style="padding: 5px;">
                                            <asp:Label ID="lblEmail" runat="server" Text="EMailID :">
                                            </asp:Label>
                                        </td>
                                        <td width="60%" align="left" style="padding: 5px;">
                                            <asp:TextBox ID="txtEmail" runat="server"></asp:TextBox>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td width="40%" align="right" style="padding: 5px;">
                                            <asp:Label ID="lblpwd" runat="server" Text="Password :">
                                            </asp:Label>
                                        </td>
                                        <td width="60%" align="left" style="padding: 5px;">
                                            <asp:TextBox ID="txtpwd" runat="server" TextMode="Password"></asp:TextBox>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td width="40%" align="right" style="padding: 5px;">
                                            <asp:Label ID="lblcpwd" runat="server" Text="ConfirmPassword :">
                                            </asp:Label>
                                        </td>
                                        <td width="60%" align="left" style="padding: 5px;">
                                            <asp:TextBox ID="txtcpwd" runat="server" TextMode="Password"></asp:TextBox>
                                        </td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                        <tr>
                            <td width="100%" align="right" style="padding-bottom: 50px; padding-right:15px;">
                                <asp:UpdatePanel ID="UpdatePanel2" runat="server">
                                    <ContentTemplate>
                                        <asp:Button ID="btnSave" Width="100px" runat="server" OnClick="lnkbtnSave_Click"
                                            Text="Save" />
                                        <asp:Button ID="btnCancel" Width="100px" runat="server" Text="Cancel" />
                                    </ContentTemplate>
                                    <Triggers>
                                        <asp:AsyncPostBackTrigger ControlID="btnSave" EventName="Click" />
                                    </Triggers>
                                </asp:UpdatePanel>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
    </div>
</form>
</body>

                 So when u click on save button the scrren will be freezed (upto finish the code written in button click) and it will come back to normal

Final Output:




Note : 1) To work with this example should place   'script manager '  in the form
           2) No need to write any code for processing image in cs page(u can write ur logic such as insert,update or etc....)


Thank U

    

Wednesday, 16 May 2012

Increase Performance in asp.net application


It is very usefull for begineers...............

                   For every enterprise level application the key to make that application success is the responsiveness of application. ASP.NET also offers great deal of the features for developing web based enterprise application but sometimes due to avoiding best practice to write application the performance of application performance of application is not so fast as it should be. Here is the some use full suggestion to make your application super fast.

1. Always set debug=”false” in web.config production environment.

2. Always set trace=”false” in web.config production environment

3. If you are using asp.net 2.0 or higher version then always use precompiled version of your code and also prefer web application project over website. If you are using website then always publish it and then upload that precompiled version of your site in production environment.

4. Always compile your project in Release Mode before uploading application to production environment.

5. Decrease your html kb as much as you can for that use tables less html using div’s and if possible then do not give big name to your control it will increase your html kb as asp.net uses client Id to differentiate all the controls. If you are creating custom controls then you can overwrite your clientid and uniqueId.

6. Use cache api as much as possible it will decrease your server roundtrip and boost application performance. ASP.NET 2.0 or higher version provides functionality called sqlcachedependancy for your database caching. It will validate cache with your database operation like insert, update and delete and if not possible with it then use the file base caching.

7. Remove blank spaces from your html it will increase your kb. You can use regular expression to remove white spaces. I will post the code for removing white spaces next posts.

8. For asp.net 2.0 and higher version use master pages. It will increase your performance.

9. Prefer database reader over dataset unless and until you have specific reason to use database.

10. Use ADO.NET asynchronous calls for ado.net methods. asp.net 2.0 or higher version is supporting your performance. If you are using same procedure or command multiple time then use ADO.NET Prepare command it will increase your performance.

11. Do IIS performance tuning as per your requirement.

12. Disable view state for your controls if possible. If you are using asp.net 2.0 or higher version then use asp.net control state instead of view state. Store view state in session or database by overriding the default methods for storing view state.

13. User Server.Transfer instead of response.redirect.

14. Always use inproc session state if possible.

15. Use Ajax for your application wisely. Lots of Ajax calls for a page will also decrease your performance.

16. Measure your application performance with tools like redgate profiler, firebug and whyslow from yahoo.

17. User System.Text.StringBuilder for string concatenation its 4 times more faster then the normal strings.

18. Right JavaScript in .Js files and place it as bottom of the application.

19. Use Separate CSS files for styling of application.

20. User database paging over normal paging while displaying huge amount of data.

21. Call web service from java script instead of server side. Use asynchronous calls to call a web method from web service.

       soon we will give suitable Examples for each point......................................

Monday, 14 May 2012

uploading file in rad upload and validating file size using java script or validating uploaded file size from client side

description:

        This Article is useful to all beginners as well as who suffering to get uploading file size in client side using java script


    So,here just i am using RAD ASYNCHRONOUS  Upload control to validate the file size .

here we are not writing single word in code behind ..everything will work only from design page itself

The page will have following content :

This namespace for ""Telerik"" to access the telerik controls in aspx page :
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

RadScriptManager is a control that replaces the script manager available in the Microsoft Ajax Extensions suite. On this radscriptmanager the three script references is need to get added to get the filesize while file uploading in progress.


<telerik:RadScriptManager ID="RadScriptManager1" runat="server">
        <Scripts>
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
        </Scripts>
    </telerik:RadScriptManager>

Note : To get the additional features in javascript we need to add the above mentioned three references in radscriptmanager.

RadCodeBlock should be used when you have server code blocks placed within the markup (most often some JavaScript functions accessing server controls).RadCodeBlock is used to isolate the code block preventing the error from appearing.
For radasynchronous upload we have given the clientside events :
1)OnClientProgressUpdating.
2)OnClientFileUploaded.

OnClientProgressUpdating we will get the Uploading file size. This obtained file size will be maintained in the global declared variable. After on OnClientFileUploaded event we will check whether the file size limit is exceeded or not. If it is exceeded the maximum limit(Here for the convenience i have taken 2MB as maximum limit you can change it as per your requirement) we will remove the file.

Note : The maximum file size limit will be checked in the form of bytes(Here 2MB=2097152bytes).


.aspx page:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="FileSizeRadUpload.aspx.cs"
    Inherits="RadUpload.FileSizeRadUpload" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<!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">
    <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
        <Scripts>
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
        </Scripts>
    </telerik:RadScriptManager>
    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">

        <script type="text/javascript">

            var UploadedFileSize = 0;           
            function OnProgressUpdating(sender, args) {
                UploadedFileSize = args.get_data().fileSize;
            }
            function OnFileUploaded(sender, args) {
                alert(UploadedFileSize);
            if(UploadedFileSize > 2097152)
                var numberOfFiles = sender._uploadedFiles.length;
                sender.deleteFileInputAt(numberOfFiles - 1);
            }
            
        </script>

    </telerik:RadCodeBlock>
    <div>
        <telerik:RadAsyncUpload ID="RadAsyncUpload1" OnClientProgressUpdating="OnProgressUpdating"
            OnClientFileUploaded="OnFileUploaded" runat="server" EnableFileInputSkinning="false">
        </telerik:RadAsyncUpload>
    </div>
    </form>
</body>
</html>



Saturday, 12 May 2012

Copy only numbers from textbox using javascript

 In this Example i am Describing , Copy only numbers or numeric characters in the text box..
here if we copy characters + numbers it will copy only Numbers

Here is the Example :

1)Copy data from Textbox :




2) Paste in another Textbox :


3) Final OUTPUT :



TextBox oncopy :

oncopy="return CopyNumericOnly(this);"

Script :

function CopyNumericOnly(obj) {
            var textboxvalue = obj.value;
            var strValidChars = "0123456789";
            var strChar;
            var FilteredChars = "";
            for (d = 0; d < textboxvalue.length; d++) {
                strChar = textboxvalue.charAt(d);
                if (strValidChars.indexOf(strChar) != -1) {
                    FilteredChars = FilteredChars + strChar;
                }
            }
            window.clipboardData.setData('Text', FilteredChars);
            return false;
        }