Page.ClientScript Register a pair of javascript code

Question

How can I register a javascript code a page?

I want to put th javascript function to the aspx.page; I thing it might be like that;

   string strJS= "<script language = javascript>

        (function(images, elements) {
            var fetchImages = function() {
                if(images.length > 0) {
                    var numImages = 10;
                    while(images.length > 0 && numImages-- > 0) {
                        // assuming your elements are <img>
                        document.getElementById(elements.shift()).src = images.shift();
                        // if not you could also set the background (or backgroundImage) css property
                        // document.getElementById(elements.shift()).style.background = "url(" + images.shift() + ")";
                    }
                    setTimeout(fetchImages, 5000);
                }
            }

            // bind to window onload
            window.onload = fetchImages;
            // if you're going to use something like jquery then do something like this instead
            //$(fetchImages);
        }(['url1', 'url2', 'url3'], ['img1', 'img2', 'img3'])) </script>";

Page.ClientScript.RegisterClientScriptBlock(typeof(ui_SUBMVGInfo), "SmartPenCheck", strJS);

The second Questin is;

  ...
... 
    g(ctrlIDBirthPlaceCode).onchange();

     }}
     </script>
     <script language = javascript>
     var url1 = 'http://localhost:3645/ImageHandler.ashx?FormId=XXX.11&amp;FieldId=s1_Adiniz';
     var url2 ='http://localhost:3645/ImageHandler.ashx?FormId=XXX.11&amp;FieldId=s1_Soyadiniz';
     var url3 = 'http://localhost:3645/ImageHandler.ashx?FormId=XXX.11&amp;FieldId=s1_tarih';
     var url4 = 'http://localhost:3645/ImageHandler.ashx?FormId=XXX.11&amp;FieldId=s1_Adiniz';
     var url5 ='http://localhost:3645/ImageHandler.ashx?FormId=XXX.11&amp;FieldId=s1_Soyadiniz';
     var url6 = 'http://localhost:3645/ImageHandler.ashx?FormId=XXX.11&amp;FieldId=s1_tarih';
     var url7 = 'http://localhost:3645/ImageHandler.ashx?FormId=XXX.11&amp;FieldId=s1_Adiniz';
     var url8 ='http://localhost:3645/ImageHandler.ashx?FormId=XXX.11&amp;FieldId=s1_Soyadiniz';
     var url9 = 'http://localhost:3645/ImageHandler.ashx?FormId=XXX.11&amp;FieldId=s1_tarih';
     var url10 = 'http://localhost:3645/ImageHandler.ashx?FormId=XXX.11&amp;FieldId=s1_Adiniz';
     var url11 ='http://localhost:3645/ImageHandler.ashx?FormId=XXX.11&amp;FieldId=s1_Soyadiniz';
     var url12 = 'http://localhost:3645/ImageHandler.ashx?FormId=XXX.11&amp;FieldId=s1_tarih';
    function(images, elements) {var fetchImages = function() 
    {if(images.length > 0) {var numImages = 5;
    while(images.length > 0 && numImages-- > 0) { document.getElementById(elements.shift()).src = images.shift();
     }setTimeout(fetchImages, 5000);
    }}window.onload = fetchImages;
    }(['+url1+', '+url2+', '+url3+','+url4+', '+url5+', '+url6+','+url7+', '+url8+', '+url9+','+url10+', '+url11+', '+url12+'], ['ui_taskFormControl$ctl03$ctl00$ctl03$ui_CustomerNameImage', 'ui_taskFormControl$ctl03$ctl00$ctl03$ui_CustomerSurNameImage', 'ui_taskFormControl$ctl03$ctl00$ctl03$ui_MaritalStatusImage','ui_taskFormControl$ctl03$ctl00$ctl03$ui_SexImage','ui_taskFormControl$ctl03$ctl00$ctl03$ui_BirthDateImage','ui_taskFormControl$ctl03$ctl00$ctl03$ui_BirthPlaceCodeImage','ui_taskFormControl$ctl03$ctl00$ctl03$ui_BirthPlaceImage','ui_taskFormControl$ctl03$ctl00$ctl03$ui_IdNationalityImage','ui_taskFormControl$ctl03$ctl00$ctl03$ui_MotherOldSurNameImage','ui_taskFormControl$ctl03$ctl00$ctl03$ui_TaxNoImage','ui_taskFormControl$ctl03$ctl00$ctl03$ui_CitizenshipNoImage','ui_taskFormControl$ctl03$ctl00$ctl03$ui_HomePhoneImage']));
     </script>

     <script>
    var ui_BirthPlaceCode_a='Intertech.Utility';
    var ui_BirthPlaceCode_c='Intertech.Utility.Common';
    var ui_BirthPlaceCode_sbn='';
...
..

What do you think is it allright or how can I do that? And according to second question above; the use of the code is correct? ref:**

PS: To see my purpose please continue reading below;

There is a web site page which is coded on asp.net with using c# and ajax is enabled too.

I want a very fast loading web page; which is going to happen with the following architecture;

1- First all data is shown by the text boxes (There are 50 text boxes, it is an application form.)

2- When the web Page is requested and loaded, then I want all the photos are shown near the each text boxes 10 by 10 from top of the page till the end of it. (Each photo is between 5 kb - 20 kb; )

I know ImageHandler's the question is how can I put all these idea into real life? some examples and ideas will be great ! thanks This issue has been answered and you may have a look -> here

Regards Bk

Answer 1

Are you asking if your script will work, or are you asking if this is a good way to add it to the page?

Inserting the script in to the page in that way will certainly work, but best practice would say you do a check first:

if (!Page.ClientScript.IsClientScriptBlockRegistered(this.GetType(), "SmartPenCheck"))
    Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "SmartPenCheck", strJS, false);

Doing it this way though is a little messy. You cannot replace the script without recompiling the app. You don't get the caching you would have from having it in a separate javascript file. It is a lot harder to debug. It is messy to read in the .cs file.

You want to save this method of adding javascript for when you need to insert dynamic values into the javascript (like control IDs), or you need to change which script is inserted based on some other criteria.

Answer 2

   string strSmartPenJs = "<script language = javascript>" +
                           " var url1 = 'http://localhost:3645/ImageHandler.ashx?FormId=xxx.11&amp;FieldId=s1_Adiniz';" +
                           " var url2 ='http://localhost:3645/ImageHandler.ashx?FormId=xxx.11&amp;FieldId=s1_Soyadiniz';" +
                           " var url3 = 'http://localhost:3645/ImageHandler.ashx?FormId=xxx.11&amp;FieldId=s1_tarih';" +
                             " var url4 = 'http://localhost:3645/ImageHandler.ashx?FormId=xxx.11&amp;FieldId=s1_Adiniz';" +
                           " var url5 ='http://localhost:3645/ImageHandler.ashx?FormId=xxx.11&amp;FieldId=s1_Soyadiniz';" +
                           " var url6 = 'http://localhost:3645/ImageHandler.ashx?FormId=xxx.11&amp;FieldId=s1_tarih';" +
                             " var url7= 'http://localhost:3645/ImageHandler.ashx?FormId=xxx.11&amp;FieldId=s1_Adiniz';" +
                           " var url8 ='http://localhost:3645/ImageHandler.ashx?FormId=xxx.11&amp;FieldId=s1_Soyadiniz';" +
                           " var url9 = 'http://localhost:3645/ImageHandler.ashx?FormId=xxx.11&amp;FieldId=s1_tarih';" +
                             " var url10 = 'http://localhost:3645/ImageHandler.ashx?FormId=xxx.11&amp;FieldId=s1_Adiniz';" +
                           " var url11='http://localhost:3645/ImageHandler.ashx?FormId=xxx.11&amp;FieldId=s1_Soyadiniz';" +
                           " var url12 = 'http://localhost:3645/ImageHandler.ashx?FormId=xxx.11&amp;FieldId=s1_tarih';" +
                         " var fetchImages=function (){" +
                         "if(images.length > 0) {" +
                          "var numImages = 5;" +//5 er 5 er göster
                          "while(images.length > 0 && numImages-- > 0) {" +
         "document.getElementById(elements.shift()).src =images.shift();" +

         "}"+
           "  setTimeout(fetchImages, 5000); " +
           "}" +
        "};" +
        "window.onload = fetchImages;" +
        "var images=[url1, url2, url3,url4, url5, url6,url7,url8, url9,url10, url11, url12];" +
        "var elements=['" + ((System.Web.UI.HtmlControls.HtmlInputControl)(ui_CustomerNameImage)).Name + "', '" + ((System.Web.UI.HtmlControls.HtmlInputControl)(ui_CustomerSurNameImage)).Name + "', '" + ((System.Web.UI.HtmlControls.HtmlInputControl)(ui_MaritalStatusImage)).Name + "','" + ((System.Web.UI.HtmlControls.HtmlInputControl)(ui_SexImage)).Name + "','" + ((System.Web.UI.HtmlControls.HtmlInputControl)(ui_BirthDateImage)).Name + "','" + ((System.Web.UI.HtmlControls.HtmlInputControl)(ui_BirthPlaceCodeImage)).Name + "','" + ((System.Web.UI.HtmlControls.HtmlInputControl)(ui_BirthPlaceImage)).Name + "','" + ((System.Web.UI.HtmlControls.HtmlInputControl)(ui_IdNationalityImage)).Name + "','" + ((System.Web.UI.HtmlControls.HtmlInputControl)(ui_MotherOldSurNameImage)).Name + "','" + ((System.Web.UI.HtmlControls.HtmlInputControl)(ui_TaxNoImage)).Name + "','" + ((System.Web.UI.HtmlControls.HtmlInputControl)(ui_CitizenshipNoImage)).Name + "','" + ((System.Web.UI.HtmlControls.HtmlInputControl)(ui_HomePhoneImage)).Name + "'];"+
                         "</script>";

            Page.ClientScript.RegisterClientScriptBlock(typeof(ui_SUBMVGInfo), "SmartPenPutImages", strSmartPenJs);

it worked like this. thanks a lot slugster and justin. you saved my day!