Member Avatar for ShivaSaurabh

how can i refresh the content page without refreshing the master page. i dont want to use frames, so came up with master page.i also wanted the master page to be fixed without scrolling and only the content page to be scrolled.

  • 3 Contributors
  • 2 Replies
  • 713 Views
  • 3 Weeks Discussion Span
  • Latest Post Latest Post by TimCadieux

Dani AI

Generated

Two separate problems need clear separation: (1) keep the master-page chrome from moving, and (2) update only the content region so the master layout never reloads. asked for a frames-free solution; pointed toward keeping the master static, and mentioned the server-side partial-postback option. Below are practical, modern steps and tradeoffs that extend those replies.

Keep the master chrome out of the content flow and make the content area the only independently scrollable element (size it to the viewport minus header/footer). Serve content as fragments from the server (not a full page) and fetch those fragments from the client to replace the content container. On the server return only the inner HTML for the content placeholder when a specific request flag is present so crawlers and non-JS users still get full pages on a normal load.

Minimal client-side pattern (vanilla JS):

function loadContent(url){
  fetch(url + (url.indexOf('?')>-1 ? '&' : '?') + 'partial=1')
    .then(r => r.text())
    .then(html => {
      document.getElementById('content').innerHTML = html;
      history.pushState(null, '', url);
      // re-run any init code for widgets inside the new content here
    });
}

Troubleshooting and cautions:

  • Return fragments without <html>/<head> wrappers; otherwise you’ll duplicate scripts/styles.
  • Move persistent scripts and CSS into the master so they are not reloaded on each fragment swap. Re-initialize per-page JavaScript after inserting content.
  • Watch ViewState/large payloads if using classic Web Forms; server-side “auto” partial solutions simplify coding but can carry heavier payloads.
  • Support deep links and back/forward by exposing full pages on direct requests and using history.pushState for navigation.
  • Test forms inside fragments (use delegated handlers or submit via JS) and check accessibility/SEO.

If you want convenience and server-side event wiring, the Web Forms partial-postback option is easiest; for smaller payloads and full control, use the fragment/Fetch approach with progressive enhancement.

Recommended Answers

All 2 Replies

Member Avatar for hericles

To make one section of the page stay in place while the rest scrolls use position:fixed in the CSS.So, if you have a div or relevant container in the master page use the position:fixed on that.
AJAX will let you update part of a page and should be of use to what you are trying to do.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.