RegisterArrayDeclaration while using Masterpages

Discussion in 'ASP.NET / ASP.NET Core' started by 10inja, Aug 11, 2009.

Thread Status:
Threads that have been inactive for 5 years or longer are closed to further replies. Please start a new thread.
  1. 10inja

    10inja

    Hi all,
    I'm pretty new to javascript and asp.net

    I inhereted a script that displays a slideshow and it needs an array of images to display.
    When I add the script to a page that uses masterpages, it errors out as the array is not defined.

    I'm registering the array as follows:
    Page.ClientScript.RegisterArrayDeclaration("FileList", fileList.ToString());

    it works fine if I put it in a page that doesn't use a masterpage and if I put it after the end of the form tag:
    <%@PageLanguage="C#"AutoEventWireup="true"CodeFile="Default2.aspx.cs"Inherits="Default2" %>
    <!DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <    htmlxmlns="http://www.w3.org/1999/xhtml">
    <    headrunat="server">
    <title></title>
    </    head>
    <    body>
    <formid="form1"runat="server">
    <div>

    </div>
    </form>

    <tableborder="0"width="700">
    <    tr>
    <    scripttype="text/javascript"src="scripts\slideshow.js"></script>
    </    tr>
    </    table>
    </    body>
    </    html>
     
    10inja, Aug 11, 2009
    #1
  2. 10inja

    10inja

    Continued

    How do I get it to work in a page that uses master page, the following errors out that the array is not defined (in the javascript):

    <%@PageTitle=""Language="C#"MasterPageFile="~/MasterPage.master"AutoEventWireup="true"CodeFile="Default.aspx.cs"Inherits="Default2" %>
    <asp:ContentID="Content1"ContentPlaceHolderID="head"Runat="Server">
    </    asp:Content>
    <    asp:ContentID="Content2"ContentPlaceHolderID="ContentPlaceHolder1"Runat="Server">
    <    tableborder="0"width="700">
    <    tr>
    <    scripttype="text/javascript"src="scripts\slideshow.js"></script>
    </    tr>
    </    table>
    </    asp:Content>

    any help is appreciated.
     
    10inja, Aug 11, 2009
    #2
  3. wisemx

    wisemx

    ...I think you can code a HEAD section with runat="server" to overcome this.
    You should post this in the ASP.NET forums, there is a lot of activity there every single day and a lot of JavaScript developers who answer posts quickly.
    http://forums.asp.net/139.aspx
    All the best,
    Mark
     
    wisemx, Aug 11, 2009
    #3
  4. CrystalCMS

    CrystalCMS Joe

    This code snip works for me in a content page that is hosted in a master page. This is quick sample hack about code:

    Code:
            protected void Page_Load(object sender, EventArgs e)
        {
            DirectoryInfo di = new DirectoryInfo(HttpRuntime.AppDomainAppPath.ToString() + "images\\");
            if (di.Exists == true)
            {
                FileInfo[] fis = di.GetFiles("*.jpg");
                if (fis.Count() > 0)
                {
                    string jsArray = null;
                    foreach (FileInfo fi in fis)                  
                        jsArray += (!string.IsNullOrEmpty(jsArray)) ? ",'" + fi.Name + "'" : "'" + fi.Name + "'";
                    Page.ClientScript.RegisterArrayDeclaration("imageArray", jsArray);
                }
            }
        }
    ..and the result is this Javascript rendered into the page markup:

    Code:
    <script type="text/javascript"> 
//<![CDATA[
var imageArray =  new Array('img1.jpg','img2.jpg');
//]]>
</script>
     
    CrystalCMS, Aug 11, 2009
    #4
  5. 10inja

    10inja

    my code on page_load is very similar,

    in my javascript, I have

    var imageArray = jsArray;

    that's what is erroring out when using a page that uses master pages
     
    10inja, Aug 11, 2009
    #5
  6. CrystalCMS

    CrystalCMS Joe

    Hmm, this might be what's going on here; if you are using the same method as my quick hack code to render out the filename array (Page.ClientScript.RegisterArrayDeclaration) you should see that the js array ends up at the bottom of the page markup when you do a 'view source' in the browser. What I suspect you are also doing is adding a reference to the external js file that includes the slideshow js source somewhere in the page markup prior to the location where the filename array declaration is rendered. This means that if the js code in the external slideshow js file attempts to access the js filename array early before the page is fully rendered, you will get an javascript exception.

    If you think this sounds like it could be the cause you can try the method below instead. It should fix the problem if your slideshow code is trying to access the filename array before it is created because this methods renders the js out in the correct order; the js filename array first and then the slideshow js script file reference.

    Code:
            protected void Page_Load(object sender, EventArgs e)
        {
            DirectoryInfo di = new DirectoryInfo(HttpRuntime.AppDomainAppPath.ToString() + "images\\");
            if (di.Exists == true)
            {
                FileInfo[] fis = di.GetFiles("*.jpg");
                if (fis.Count() > 0)
                {
                    string jsArray = null;
                    foreach (FileInfo fi in fis)                  
                        jsArray += (!string.IsNullOrEmpty(jsArray)) ? ",'" + fi.Name + "'" : "'" + fi.Name + "'";

                    string arrayScript = "var imageArray =  new Array(" + jsArray + ");";

                    //render the filename array first 
                    Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "arrayScript", arrayScript, true);
                    //now add the include the to the external js file (if it uses the filename array early)
                    Page.ClientScript.RegisterClientScriptInclude(this.GetType(), "slideshowScript", @"scripts\slideshow.js");
                }
            }
        }
    ..renders out this js:

    Code:
    <script type="text/javascript"> 
//<![CDATA[
var imageArray =  new Array('img1.jpg','img2.jpg');//]]>
</script>
 
<script src="scripts\slideshow.js" type="text/javascript"></script>
     
    CrystalCMS, Aug 11, 2009
    #6
  7. 10inja

    10inja

    I tried that and still the same issue.
    The first thing is my script is:
    var slsContents = fileList; I got this script from your prior post in the other thread.
    I tried all page events, including PreInit, PreLoad, PreRender, Load, Init, InitComplete
    and the same result.

    the codebehind is:
    public partial class Default2 : System.Web.UI.Page
    {
    FileInfo[] rgFiles
    {
    get { return (FileInfo[])ViewState["rgFiles"]; }
    set { ViewState["rgFiles"] = value; }
    }

    protected void Page_InitComplete(object sender, EventArgs e)
    {
    if (!IsPostBack)
    {
    string prefix = "'<img src=\"";
    string postfix = "\" width=\"648\" height=\"488\">'";
    string dir = "images\\\\M-1\\\\";
    System.Text.StringBuilder fileList = new System.Text.StringBuilder();
    FileInfo[] rgFiles;
    DirectoryInfo di = new DirectoryInfo(HttpRuntime.AppDomainAppPath.ToString() + "images\\" + "M-1");
    if (di.Exists == true)
    {
    rgFiles = di.GetFiles("*.jpg");
    if (rgFiles.GetLength(0) > 0)
    for (int i = 0; i < rgFiles.GetLength(0); i++)
    {
    // "'<img src=\"~/images/mikes/noimage.jpg\" width=\"320\" height=\"240\">'"
    fileList.Append(prefix + dir + rgFiles + postfix);
    if (i < (rgFiles.GetLength(0) - 1)) fileList.Append(",");

    }
    else
    {

    fileList.Append(prefix + "images\\\\mikes\\\\noimage.jpg" + postfix);
    }
    }
    else
    {
    fileList.Append(prefix + "images\\\\mikes\\\\noimage.jpg" + postfix);
    }

    Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "fileList", fileList.ToString(), true);
    //now add the include the to the external js file (if it uses the filename array early)
    Page.ClientScript.RegisterClientScriptInclude(this.GetType(), "slideshowScript", @"scripts\slideshow.js");

    //Page.ClientScript.RegisterArrayDeclaration("fileList", fileList.ToString());
    }
    }

    }

    I even tried :
    window.onload
    {
    //var slsContents = FileList;
    var slsContents = fileList;

    and same thing.. fileList is undefined
     
    10inja, Aug 11, 2009
    #7
  8. CrystalCMS

    CrystalCMS Joe

    I think you must be overlooking something really simple. I've attached a sample working project so you can do a like for like comparison. This sample uses the slideshow script from the other post in a content page that is hosted in a master page. It works without any problem. Let me know how you get on.
     

    Attached Files:

    CrystalCMS, Aug 11, 2009
    #8
  9. CrystalCMS

    CrystalCMS Joe

    I ran your code and it was something simple (but nothing to do with the masterpage red herring ;-)). Your code behind has a bug in it. A quick look at the page source shows that it currently renders this JavaScript into the markup but as you can see it does not render a JavaScript array which is why you're getting the JavaScript exception thrown in the slide show js file:

    Code:
    <script type="text/javascript"> 
//<![CDATA[
'<img src="images\\M-1\\P160808_11.30[01].JPG" width="648" height="488">','<img src="images\\M-1\\P160808_11.30[02].JPG" width="648" height="488">'//]]>
</script>
 
<script src="scripts\slideshow.js" type="text/javascript"></script>
    It needs to be rendering out JavaScript similar to the below - the sample project I attached includes an example of this:

    Code:
    <script type="text/javascript"> 
//<![CDATA[
var imageArray =  new Array('<img src="images/P160808_11.30[01].JPG" width="320" height="240">','<img src="images/P160808_11.30[02].JPG" width="320" height="240">');//]]>
</script>
 
<script src="scripts\slideshow.js" type="text/javascript"></script>
     
    CrystalCMS, Aug 12, 2009
    #9
  10. 10inja

    10inja

    Hey Joe... thanks a million.. I was really stuck..
    I got it to work!!

    I thought registerarraydeclaration was suppose to do that, but apparently it's not.

    So, I collect the list of files in the page_load event and in the same function I run the script to register the array (using your code):
    string arrayScript = "var imageArray = new Array(" + fileList.ToString() + ");";
    Page.ClientScript.RegisterClientScriptBlock(    this.GetType(), "arrayScript", arrayScript, true);
    then in the html markup, where I want the slideshow to show up, I run the script to display the slideshow
    <div align="center">
    <script type="text/javascript" src="scripts\slideshow.js"></script>
    </div>

    Now, it's time for me to make the donation to the script developer, it's pretty cool, I like this slide show, and so I've accomplished the following:
    1. take the load off the server by not using ajax timer
    2. run a javascript for the first time, I've learned a tad
    3. this slideshow looks and works better than the one I had as the previous one was making the page scroll up and down on it's own when the timer clicks and so it was hard to scroll up and down to see the details.

    thanks again..
     
    10inja, Aug 12, 2009
    #10
  11. 10inja

    10inja

    by the way, is that your bike? Do you ride?
     
    10inja, Aug 12, 2009
    #11
  12. CrystalCMS

    CrystalCMS Joe

    Good work - I'm glad it worked out ok. You're right, calling RegisterArrayDeclaration does indeed register a Javascript array declaration into the page markup, but you need to be a bit careful how you use it because it will always render the array declaration at the bottom of the page. This means that another script cannot be registered further up the page if it depends on the js array that has not yet been rendered..if that makes sense?

    The method you're using now should work well if you ensure that your array is declared before the slide show script include.

    That was my last bike - it was a Suzi sv650s. I don't have one at the moment but the weather is always too ropey anyway. Are you a biker too?
     
    CrystalCMS, Aug 13, 2009
    #12
  13. CrystalCMS

    CrystalCMS Joe

    I've just been over to your site and the slide show looks good but I think there's some sort of hard-coded product code bug or something like that going on..Sorry I don't mean to highlight problems but since it's a live site, I suppose you'll be happier if it's 100% right ;-)
     
    CrystalCMS, Aug 13, 2009
    #13
  14. 10inja

    10inja

    dang.. it's all messed up.. wierd as I tested it last night and it was good.
    I'll get it on soon..

    I have a 10R that I've been riding for the last few years, mostly canyon and track riding.. the weather here is always great
     
    10inja, Aug 13, 2009
    #14
  15. 10inja

    10inja

    Yes, I had a bug and i fixed it.

    But, it's all messed up on IE 7. It works great on IE 8.

    Dang it, thought my worries are over. I have no clue how to fix this thing now.
     
    10inja, Aug 13, 2009
    #15
  16. 10inja

    10inja

    okay.. so I had the script call within a <div align="center">
    I removed the div align and now it works on 7 just not aligned to the center.. I'm happy with that.
     
    10inja, Aug 13, 2009
    #16
  17. raymondp

    raymondp

    Maybe you should write a java script to test which browser version they're on and display a message that they need to use IE?
     
    raymondp, Aug 13, 2009
    #17
  18. CrystalCMS

    CrystalCMS Joe

    Hiya, here are the steps to properly centre align your details page stuff on all CSS2 compliant browsers (all the popular ones!) without breaking the layout:

    1) Add this one new rule to your default.css file:
    Code:
    #slideShow, .DetailsTable{
    margin: auto;
}
    2) Add the DetailsTable CSS class to your FormView in the details page:
    Code:
    <asp:FormView ID="FormView1" runat="server" DataKeyNames="Stock" 
        DataSourceID="ObjectDataSource1" CellPadding="15" CellSpacing="25" 
        HorizontalAlign="Center" Width="706px" [B]CssClass="DetailsTable"[/B]>
    Save, upload, clear your browser cache and then test. That should do it I think.
     
    CrystalCMS, Aug 13, 2009
    #18
  19. 10inja

    10inja

    it should be working on Opera and Firefox as well.
     
    10inja, Aug 13, 2009
    #19
  20. CrystalCMS

    CrystalCMS Joe

    The quick CrystalCMS test shows that your slide show is currently working fine on:

    Firefox 3.5.2
    IE 8.0.6001.18813
    Safari 4.0(530.17)
    Chrome 2.0.172.39

    It doesn't look too clever when using Lynx.exe but no need to worry about that ;-)

    I see your centre alignment issue is now fixed and I confirm this is also working in all of the above browsers (except Lynx!).
     
    CrystalCMS, Aug 13, 2009
    #20
  21. 10inja

    10inja


    and just like that it's all centered again.. thanks for the tip on the margins=auto css style.
     
    10inja, Aug 13, 2009
    #21
Thread Status:
Threads that have been inactive for 5 years or longer are closed to further replies. Please start a new thread.

Share This Page