Masterpages and MS Ajax

In this posting I will try to explain how masterpages work in combination with an updatepanel. I see sometimes questions about masterpages and MS Ajax and conclude that this topic could be specified a little bit more. Well a masterpage is a page that can be inherited by contentpages, you can see it as a blueprint(masterpage) and an object (contentpage). Well in my example I defined a masterpage and 3 content pages which inherited from the masterpage

solutionexplorer


When a user makes a request to your website he will never makes a request to your masterpage, only to your content pages. Below I defined a masterpage

masterpage

 

This masterpage contains the following controls:

  • Scriptmanager
  • Menu
  • ContentPlaceHolder

So the scriptmanager and the menu will be available on every contentpage that inherits from this masterpage. See the content page below.

contentpage

You can see that the menu and the scriptmanager control are grayed out, because they reside on the masterpage. Well I defined in the contentPlaceHolder an updatepanel. The thing I want to make clear is the use of an updatepanel in combination with a masterpage/contentpage.

In this situation it isn’t possible to work with partialrendering when you want to switch from ContentPage1 to ContentPage2 via the Menu which is defined on the MasterPage.Why? Well, because ContentPage1 and ContantPage2 are webpages which are self sustaining. They both got the Scriptmanager control and the menu control. These controls are inherited from the masterpage. So when you click on the menuitem (“Contentpage2”) on contentpage1 webpage. It will open a new webpage (ContentPage2). The updatepanel on contentpage1 can only be used for partialrendering on contentpage1. I hope this looks to you very simple and logical, because it is. 😉

Advertisements

24 Responses to Masterpages and MS Ajax

  1. ol3j says:

    hi
    How can I add contentpage to Scriptmanager ?

  2. dennisv says:

    hi ol3j,
    You can’t add a content page to a scriptmanager. A scriptmanager is a control which resides on you content page. This control will manage a lot of your Ajax stuff on your webpage. Hope this helps

  3. arny says:

    would you please let me download a little but esauxtive example ,i still have problem with master pages and visual studio keep on telling me that updatepanel in not an availeble control

  4. dennisv says:

    Hi arny,
    Send me an email and i will reply on it with code examples. dennisv@avanade.com.
    Regards,

  5. Vlad says:

    Just perfect explanation! Now it’s clear for me 🙂
    Thanks Dennis.

    But question still remained: reason for master page to be is to share common layout and controls between pages which don’t change between postbacks. It’s strange that AJAX doesn’t allow to use updatepannels for contentplaseholders in the master page (even though they are actually different pages).

  6. dennisv says:

    Hi Vlad,

    Well when you put a Contentplaceholder inside an UpdatePanel on the masterpage, the UpdatePanel will become available to all the contentpages which derive from them. When you put a Button and a Label inside the ContentPlaceHolder (on the contentpage) and you set in the onclick event of the button Label1.Text = DateTime.Now.ToString(); you will see that the label gets updated by partial rendering, because the ContentPlaceholder resides in the UpdatePanel on the masterpage. So the UpdatePanel will become available on every ContentPage which inherits from the masterpages. I still don’t think that it is possible to define triggers in the contentpage when the masterpage contains the updatepanel. I hope i can do some test soon and will write a post about it when i’am finished. I hope answered your question.
    Regards

  7. rezourxe says:

    Yeo!

    this is it, my problem is that thing you last posted.
    I have a contentplaceholder located inside an
    updatepanel in my MasterPage.

    I guess, that anything I do in the ContentPlace holder
    on a single page is suppoused to use the magic
    of the partial rendering.

    but it doesn’t the whole page post back.

    any help will plenty appreciated.

    Thanks in advance!

  8. Dennis says:

    Hi rezourxe,

    Can you describe what you want to do?

    When you have an updatepanel on the masterpage. Inside the updatepanel you place a contentplaceholder. Every contentpage which uses the masterpage and places controls inside the contentplaceholder will benefit from the updatepanel.

    If you still having the problem send me an email and i will send you a masterpage and a contentpage which will do the trick for you.

    Regards,

    Dennis

  9. Emma says:

    Hi,

    I have a problem, not sure if it was answered already.But I have a menu on the master page, and when I click on a link on the menu the page refreshes. How can I avoid this? I tried using an Update Panel on the Master page, but it donesn’t work. The Update Panel works within the ContentPlaceHolders fine.

    Any suggestions would be greatful
    Em

  10. Dennis says:

    Hi Emma,

    Well the menu you use on the masterpage links to other content pages (totally new pages). You should keep in mind that a masterpage is never requested by the browser. It is just a template for you content page. So when you have 2 content pages Page A and Page B. both of them use the same masterpage which contains your menu. This means that the menu is defined once (on the masterpage) but used twice (on the contentpages). In the menu you are able to navigate from Page A –> Page B and the other way around. This navigation step is the same step as moving to another website. The browser will load a whole new page (Page B). You can’t avoid the page refresh when moving to another webpage.

    AJAX technolgy is only able to refresh parts of a webpage not reload a new webpage without flickering. I hope this helps

    Kind regards,

    Dennis

  11. Emma says:

    Thanks for you response Dennis,

    Do you have any suggestions therefore for how I could ensure the content I have in the master page (the menu, company logo) doesn’t refresh, as many websites do this?

    Thanks again,
    Emma

  12. Dennis says:

    Hi Emma,

    There is a solution for the thing you want, but i think this solution isn’t very nice. You could use a Multi-view control with a couple of view controls in it. This multi-view control is responsible for displaying the right view and must be in a UpdatePanel control. When you click on the menu you just update the multi-view control by saying that it should display view 2 instead of 1. This will keep the end user on the same webpage and you only update the multiview control.

    This will give you the experience you want, but it means that all your content lives in a single webpage. Not so nice!

    One thing i like to emphasize is that masterpages are never requested by the end-user. So when you are thinking about how the navigation flow in your website will go, forget thinking about masterpages and think about contentpages. These are requested by the end-users.

    Good luck Emma

    Kind regards,

    Dennis

  13. nimo says:

    Hi Emma,

    you can use iFrame in the masterpage.

  14. Harsha says:

    I have a fileupload which is inside the update panel which is inturn inside the Mater page.Can you please help me on how to refresh the update panel on file upload

  15. dennisv says:

    Hi Harsha,

    The FileUpload Control doesn’t support asynchronous postbacks. Here is a link for a workaround:

    http://www.codeproject.com/KB/ajax/simpleajaxupload.aspx

    Good Luck!!

    Regards

  16. Regin says:

    Hi Dennis,

    I was trying to accomplish the same feat that Emma was trying to do – having menu buttons on the masterpage and trying to get different content pages without a refresh.
    Spent half a day on that and many sites did not answer to the point. Your post hit the Bull’s eye and now I know what’s wrong. Thanks a Bunch!

    Regards,
    Regin

  17. Aman Jha says:

    Hi Dennis,
    I am working with master page and have tried to keep contentplaceholder inside the update panel.
    But It is not working,update panel gives error it does not recognize any control not even …….
    What’s the problem…..
    Thanks
    Aman Jha

  18. dennisv says:

    Hi Aman,

    I would like to know why you have a contentplaceholder inside your updatepanel? UpdatePanels are only useful for partial rendering on the same page. Not for loading new webpages without any flickering. So a contentplaceholder inside a Updatepanel doesn’t make sense.

    So please explain what are you trying to achieve?

    Regards

  19. Bharpur says:

    Hii dennisv,

    My problem is that when i am using script manager in contentplaceholder in a different page an error occurs which says –
    “Element ‘Script Manager is not a known element. This can occur if there is an compilation error in the web site.”
    Please explain this.

  20. dennisv says:

    Hi Bharpur,

    If you are using a scriptmanager on a masterpage, you shouldn’t place it inside the contentplaceholder. The contentplaceholder is replaced by content you will put on your contentpage. As you can see in my second screenshot above, i put the scriptmanager outside the placeholder. When you use it this way the scriptmanager will be there when you create a contentpage which uses your materpage. I hope this will help to solve your problem, if not write a second reply.

    Regards

  21. SIlvia says:

    Wonderful example, is there a place where I can download an example of what you said?

    • dennisv says:

      Hi Silvia,

      I don’t have example code anymore. I think you could realize this within 15 minutes. Try it, if you have any questions send me an email or post a question. Steps you have to take are:
      Create a masterpage
      Put a scriptmanager on the masterpage
      Put a placeholder on the masterpage
      Create a contentpage
      Put an updatepanel on the contentpage and your done.

      Good luck!

      Regards

  22. tera baap says:

    dennisv is just stupid ……………

    point no 2 : it is possible to have partial rendering on a masterpage. FYI DENNIS VAN DE LIAR LIAR.

    read this http://msdn.microsoft.com/en-us/library/bb398864.aspx#Y3333

  23. dennisv says:

    Hi Tera,

    First of all. You have a very nice way of communicating. Second i will quote something of your link:

    “Any ASP.NET page that includes an UpdatePanel control also requires a ScriptManager control. To use UpdatePanel controls with master pages, you can put a ScriptManager control on the master page. In this scenario, the master page provides a ScriptManager control for every content page. If you do not want partial-page updates enabled for individual CONTENT PAGES, you can disable partial-page updates for those pages.”

    So there will be partial rendering on your content pages. The Master page is just a design template for your content page. So this post is describing exactly the same thing i described 4 years ago. So make up your mind before you start insulting people. 🙂

    Regards,

    Dennis

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: