Member Avatar for riyas_26

I have one page which is placed in the Master Page.

In the master page i have 1 dropdown and one GridView, dropdown is display the category , based on the dropdown list selection it will display the list of videos in the Grid.

In the content page i have the video player, in the page load it will play the video by default.

But when i choose the drop down list which is available in the master page, the page is refreshing, SO the video is start play from the first.

The content page should not refresh, So the video will continuously play.

So please advice how to stop the page refresh in the content page. please help me its urgent.

Thanks in Advance

  • 2 Contributors
  • 3 Replies
  • 110 Views
  • 18 Hours Discussion Span
  • Latest Post Latest Post by ebookfinder

Dani AI

Generated

The behavior you describe happens because the category change triggers a full server round‑trip and the video element is reconstructed, so playback restarts. is right to point toward an asynchronous approach — the practical goal is to update only the list of videos on the page without rebuilding the video element itself.

A straightforward, modern pattern is: stop the dropdown from doing a server postback, fetch the new list from a server endpoint (JSON), and replace only the grid DOM. Keep the video element (the player node and its parent) untouched so playback continues. If you are on WebForms that means removing the dropdown AutoPostBack or the server change handler and wiring a client change handler that calls an API endpoint; the endpoint can be a Web API action, an ASHX handler, or a simple JSON-returning page method.

Example client code (replace IDs/URLs to match your page):

document.getElementById('categorySelect').addEventListener('change', function() {
  var id = this.value;
  fetch('/api/videos?category=' + encodeURIComponent(id))
    .then(r => r.json())
    .then(list => {
      var grid = document.getElementById('videoGrid');
      grid.innerHTML = list.map(v => '<div class="row"><a href="#" data-src="' + v.url + '">' + v.title + '</a></div>').join('');
    })
    .catch(err => console.error(err));
});

Use event delegation to let users click a row and swap the player source without touching the player node:

document.getElementById('videoGrid').addEventListener('click', function(e){
  var a = e.target.closest('a');
  if (!a) return;
  e.preventDefault();
  var player = document.getElementById('player'); // your <video> or player element
  player.src = a.dataset.src;
  player.play();
});

Troubleshooting notes: ensure the dropdown no longer triggers server postbacks (AutoPostBack off), the JSON endpoint returns correct CORS headers if cross‑domain, and you re‑attach event handlers after any DOM replacement. For API/design references see Using Fetch, the HTML5 video element, and a quick Web API guide on creating JSON endpoints (Microsoft). This keeps the player alive while the category/grid update happens.

Recommended Answers

All 3 Replies

Member Avatar for ebookfinder

I have one page which is placed in the Master Page.

In the master page i have 1 dropdown and one GridView, dropdown is display the category , based on the dropdown list selection it will display the list of videos in the Grid.

In the content page i have the video player, in the page load it will play the video by default.

But when i choose the drop down list which is available in the master page, the page is refreshing, SO the video is start play from the first.

The content page should not refresh, So the video will continuously play.

So please advice how to stop the page refresh in the content page. please help me its urgent.

Thanks in Advance

Please use ajax to place your dropdown and grid into one update panel. Just place you video element outside the panel.

Member Avatar for riyas_26

which ajax control i have to use sir,, can u provide a sample code...

Member Avatar for ebookfinder

Since this is asp.net thread, you need only two:
The script manager control (placed before other ajax controls)
The update panel control that contains the dropdown and grid.

Hope this helps

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.