We Keep Coding

How to create a webpage using ASP.NET and C# without using AJAX Toolkit's Tab Container?

I have a web tool(a script file generator) developed using AJAX Toolkit's Tab Container and Tab Panel.
Here's what the web tool does :
Tab 1 : Gets an ID from user and validates the same by connecting to
a DB
Tab 2 : Prompts the user to upload a file and check the format
Tab 3 : Allows the user to select a list of items
Tab 4 : Creates a script file based on items selected and allows the user to edit the file
Tab 5 : Allows the user to download the script file
Insteading of using AJAX's Tab Container, what are the other options I have?
I am not liking this because :
Switching Tab is becoming difficult when I use DefaultButton property (I tied the DefaultButton property to a button and I am able to increment the ActiveTabIndex from the corresponding autogenerated class but not when I use DefaultButton property)
The UI is not pleasing and it becomes hard to make changes

At the moment one of the most popular ways of displaying a tab control in a web page is using Twitter Bootstrap Tabs, below is a complete example to help you get started:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script type="text/javascript">
$(function () {
$('#tabs').tab();
$("#btnGoToTab2").click(function () {
$('#tabs a[href="#tabTwo"]').tab('show')
});
$("#btnGoToTab1").click(function () {
$('#tabs a[href="#tabOne"]').tab('show')
});
});
</script>
<div id="content">
<ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
<li>Tab One</li>
<li>Tab Two</li>
</ul>
<div id="my-tab-content" class="tab-content">
<div class="tab-pane active" id="tabOne">
<h1>Tab One</h1>
<input id="btnGoToTab2" type="button" value="Go To Tab 2" />
</div>
<div class="tab-pane" id="tabTwo">
<h1>Tab Two</h1>
<input id="btnGoToTab1" type="button" value="Back To Tab 1" />
</div>
</div>
</div>

How to resolve this issue with HTML menu in ASP.NET WebForms application?

I am new ASP.NET WebForms developer and I am using ASP.NET 4.5. I am struggling right now with developing the menu. I am using Bootstrap as the main style for the UI of my application. Also, I would like to keep using the normal HTML ul tags for developing this menu. However, I am struggling now with configuring the links in this menu.
The website navigation is as follows:
Home
About
Contact
Admin > Service Management
> User Managment
The first three pages; home, about and contact are under the same folder called Pages. Under Pages folder, there is another folder called Admin. This folder includes ServiceManagement and UserManagement pages. The problem which I am struggling with is that when the user is browsing ServiceManagement or UserManagement and he clicks on the link to Home page from the top menubar, he will got an error and the link will look like the following:
http://localhost:61090/Pages/Pages/About.aspx
Here's the code of the Menu:
<div class="container">
<nav class="navbar navbar-default">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".js-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">
<img src="../Assets/images/logo.png" alt="">
</a>
</div>
<div class="collapse navbar-collapse js-navbar-collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li class="dropdown mega-dropdown">
Admin <span class="fa fa-angle-down"></span>
<ul class="dropdown-menu mega-dropdown-menu row">
<li class="col-sm-3">
<ul>
<li class="">
Service Management</li>
<li class="">User Management</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<!-- /.nav-collapse -->
</nav>
</div>
So how can I resolve this issue?

Change your HTML markup from:
About
To
<asp:HyperLink ID="lnkAbout" runat="server" Text="About" NavigateUrl="~/Pages/About.aspx"></asp:HyperLink>
The key point to take from this, is that the NavigateUrl property uses a path relative to the root of your web application ~/. This makes it simple to reference pages/content from your ASPX pages etc.
HTML based approach
You could try to set the following in your Admin HTML files.
<HEAD>
<!-- Removed for brevity -->
<BASE href="http://yourURL/Pages/Admin">
<!-- Removed for brevity -->
</HEAD>
I am not 100% certain on this one so you will need to try it on your own (in the ServiceManagement and UserManagement pages only).

Place the attribute runat="server" inside the <a> tag.
For your href value, start with "~/" to identify the application root. See ASP.NET Web Site Paths.
e.g. <a runat="server" href="~/Pages/About.aspx">About</a>
You can also use the same format to link your image file:
e.g. <img runat="server" src="~/Assets/images/logo.png" alt="">

How can I add dynamic part to HTML file each X time?

I am using Netbeans to edit my HTML file. This is the first part of my HTML code file (I have some more code inside the head tags however that is not important):
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<!-- wrapper for the whole component -->
<div id="componentWrapper">
<!-- playlist -->
<div class="componentPlaylist">
<div class="menuHolder">
<div class="menuWrapper">
</div>
</div>
<div class="thumbHolder">
<div class="thumbWrapper">
The dynamic part is in my C# program that create automatic on the hard disk an event each X time and put for me in a directory some gif files along with one animated gif (the animated gif shows animation of the other gif files in the directory). In this part of the HTML after the line: <div class="thumbWrapper">
I need to add the dynamic part in this format for example:
<div class="playlist" data-address='mistique_ken_burns' data-title='mistique' data-transitionType='ken_burns' data-bgColor='#e5e5e5' data-playlistSize='165' data-duration="25000">
<ul>
<li data-address='image1' class='playlistItem' data-imagePath='media/category1/main/01.jpg' data-startScale="1.4" data-endScale="0.5" data-startPosition="tl" data-endPosition="br" data-link='http://www.google.com' data-target='_blank' data-description="hello quam. <a href='http://codecanyon.net/user/Tean' target='_blank'>Link</a>" data-youtube='F08U2yCxbYg'><a href='#'><img src='media/category1/thumb/01.jpg' width='120' height='80' alt=''/></a></li>
</ul>
</div>
There are more <li> </li> lines. The important thing here is inside the li tags:
data-address='image1' class='playlistItem' data-imagePath='media/category1/main/01.jpg'
image1 then the next one is image2 then image3 and so on...
Then playlistItem the next time I will add to the HTML a block like this inside div tags it will be playlistItem2 then playlistItem3....
And the links to the images now it's: media/category1/main/01.jpg
But next time next block it will be media/category2/main/01.jpg
Then in the end I have another some HTML code that I don't change and then in my C# program, I merge the three parts every time and upload the updated HTML file to my FTP.
The first part is static, then dynamic part, and in the end another static part.
My question is how do I build each time adding to the dynamic part?
For example on my hard disk I have new event inside one .jpg file.
The file uploaded to my FTP server.
So now the HTML code I need to add in the HTML file, for example:
<div class="playlist" data-address='mistique_ken_burns' data-title='mistique' data-transitionType='ken_burns' data-bgColor='#e5e5e5' data-playlistSize='165' data-duration="25000">
<ul>
<li data-address='image1' class='playlistItem2' data-imagePath='media/category2/main/01.jpg' data-startScale="1.4" data-endScale="0.5" data-startPosition="tl" data-endPosition="br" data-link='http://www.google.com' data-target='_blank' data-description="hello quam. <a href='http://codecanyon.net/user/Tean' target='_blank'>Link</a>" data-youtube='F08U2yCxbYg'><a href='#'><img src='media/category2/thumb/01.jpg' width='120' height='80' alt=''/></a></li>
</ul>
</div>
My question is how in C# I can dynamically update the HTML file in this part?

Hi you can use placeholders inside the html file. Those placeholders can be replaced at runtime as below:
string placeHolder = "<!--<<PLACEHOLDER>>-->";
string path = "C:\\test.html";
string dynamicContent = #"<div class='playlist' data-address='mistique_ken_burns' data-title='mistique' data-transitionType='ken_burns' data-bgColor='#e5e5e5' data-playlistSize='165' data-duration='25000'>
<ul>
<li data-address='image1' class='playlistItem' data-imagePath='media/category1/main/01.jpg' data-startScale='1.4' data-endScale='0.5' data-startPosition='tl' data-endPosition='br'
data-link='http://www.google.com' data-target='_blank' data-description='hello quam. <a href='http://codecanyon.net/user/Tean' target='_blank'>Link</a>'
data-youtube='F08U2yCxbYg'><a href='#'><img src='media/category1/thumb/01.jpg' width='120' height='80' alt=''/></a></li>
</ul>
</div>";
string content = File.ReadAllText(path).Replace(placeHolder, string.Concat(dynamicContent, placeHolder));
File.WriteAllText(path, content);

How to put an image on layout page?

I have alittle project using html, css, c# with razor syntax.
I have layout page (on the sheard folder) and I use renderbody().
On the layout page I ave an image("intro.png") that I want to be on all pages (because that I put the image on the layout page), but when I go to other pages on my little website the page doesn't apeear, it's appear only on the first page.
here is asection of my layout page:
<!-- Introduction -->
<header>
<h2>head?</h2>
</header>
<p>some text.</p>
<img src="Content/images/intro.png">
</section>
<div id="content">
#RenderBody()
<aside>
<section>
<header>
<h3>Categories</h3>
</header>
</section>
<section>
<header>
<h3>Archives</h3>
</header>
<ul>
<li>December 2008</li>
<li>January 2009</li>
<li>February 2009</li>
<li>March 2009</li>
</ul>
</section>
</aside>
</div>

instead of giving link to image this way:
<img src="Content/images/intro.png">
Use this :
<img src=#Url.Content("~/Content/images/intro.png")>
I think there is a problem with Image Path .. I think above answer will solve that problem..

Reload entire page except the User Control

My application has one master page and 5 child page to load inside it.
Contents of Master Page:
1. UserControl (Drop Down)
2. 5 Main Tabs (Child Page loads for every Main Tab Click).
Initially when application loads, all the data is loaded for Drop Down and one of the child page .
so whenever a click on one of the main tab link (its href),so whole page gets reloaded and data will be loaded again for all the controls of the page.
so , i don't want to load the data for my drop down again and again on every Main Tab Click.
As i am working on legacy application every thing is coded, i can't use Update panel for this as a solution because it requires lot of code change.
so i am looking for a solution to keep my Drop Down Data static across all the tabs, even if it refreshes for every tab click.

Why not hide the information in a div and display only each div when its clicked?
...this will keep the links static and only navigate between the pages.
Put all the code on one page:
CSS:
#content > div {
display: none;
}
#content > div:target {
display: block;
}
HTML:
<!-- All static Page data here -->
<ul>
<!-- Menu Links -->
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
<li>Page X</li>
</ul>
<div id="content">
<div id="div1">
<!-- All Page 1 Data Here -->
</div>
<div id="div2">
<!-- All Page 2 Data Here -->
</div>
<div id="div3">
<!-- All Page 3 Data Here -->
</div>
<div id="divX">
<!-- All Page X Data Here -->
</div>
</div> <!-- Closing the content div tag -->
Let me know how you get on :)
Good Luck

IMO you need to use a common place to store your data , you may use session
fill the session with data on app start -- now on every page refresh / page load keep a check if session has data don't bind the drop down (in user control).