Refresh only content page without refreshing master page

Hi, most likely you need to use a jQuery control similar to these: horizontal tabs https: //jqueryui.com/tabs/ or vertical tabs https://jqueryui.com/resources/demos/tabs/vertical.html
where you can switch tabs without refreshing page.

Then assign a css class to the tabs ex: "mytab" and id each tab container ex: is a div "mytab_name1"


$(function() { //include js events within this
$('.mytab').click(function() { //tab click event, note the "." here means css class
var id = $(this).attr('id'); //to get div id ex: "mytab_name1"
var divid = '#' + id;
$(divid).empty(); //clear the div contents, note the "#" here means id

//retrieve data with Ajax ex:
//in data (this is optional) you can pass some identifier (or multiple) to indicate which dynamic content will loaded on server..."parameter1" or whatever you name it will be paramter in WebMethod
$.ajax({
type: "POST",
url: "url to method [declare this as static and WebMethod]",
data: {
parameter1: id
},
success: function (response) {
//check if "response.SomeProperty" is sufficient or "response.d.SomeProperty" as you're using ASP.NET Web Forms
var html = '<p>' + response.SomeProperty + '</p>'; //build your div content using the response
$(divid).append($.parseHTML(html)); //render the string as html elements and insert inside the div
//the tabs will remain the same but contents of div should change on tab change
},
error: function () {
//handle any error ex:
var html = '<p>Error loading data</p>';
$(divid).append($.parseHTML(html));
}
});
});
});

Are these controls related to vertical menu? Did you try the suggestion above and whether it worked?