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 set the current tab/content on page postback

I have the following JSFiddle which changes the tab/content based on user selection: http://jsfiddle.net/sikni8/3d64w6gf/1/
HTML snippet sample:
<asp:Button ID="btnRegister" ClientIDMode="Static" runat="server" Text="Register" OnClick="btnRegister_Click" />
<!--<input type="submit" name="commit" value="Register" runat="server" />-->
The btnRegister button perform some action when clicked. When the page does a postback, how can I ensure the tab/content which was there is displayed.
For example, if I click on the Register button the page refreshes and brings the first tab/content to view. I would like to change it so that when Register button is clicked and the page reloads, it should remain with the same tab/content.
I can use sessionStorage but I would like to request some assistance.
Tried this but didn't work:
<script>
$(document).ready(function (e) {
localStorage.setItem("whichTab", $("#tabs nav ul li.tab-current"));
alert(localStorage.getItem("whichTab"));
});
</script>
I am using cbpFWTabs.js file to achieve the tab class switch which is in the fiddle.

I did something similar by using hidden field, where I stored the id/class of the current tab in hidden field and after postback I just displayed the current tab again.

MVC how to auto select check boxes whos Label contains a word that user specifies

So I've got this popup in my site with a list of checkboxes for filtering purposes. The List can be anywhere from a couple items to a hundred items. Now say the user wants to only select check boxes with the word "create" in it's label. Going through a hundred check boxes looking for creates is unruly and no ones going to want to do it. What I'm thinking is implementing a text box input at the bottom of the popup where the user can input a word, hit select and in the list of checkboxes, only the items that contain that word will be checked.
The first idea that came to mind to do this is use jquery have the button relate to a controller function which will reassess the view model based on that users string. But I'm not if that the best solution. Is there a way to do this in just the view?

Try something like this:
Your HTML:
<div class="box">
<input type="checkbox" name="check">
<label>Create</label>
</div>
<div class="box">
<input type="checkbox" name="check">
<label>Other value</label>
</div>
<div class="box">
<input type="checkbox" name="check">
<label>Create user</label>
</div>
Your JQuery code:
$(function(){
$('.box').each(function(){
var box = $(this);
if ($('label', box).html().toLowerCase().indexOf("create") > 0) {
$('input[type=checkbox]', box).attr('checked', 'checked');
}
else $('input[type=checkbox]', box).removeAttr('checked');
});
});
This is a better solution suggested by #AnoopJoshi
$("label:contains('Create')").closest(".box").find("input[type=checkbox]").prop(‌​"checked", true);
I hope this help!

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).

Create pop up panel or similar

I have a request.. where I need to create a link, then after the link is clicked.. a pop up should come up with a gridview in there but whatever is selected from that grid view I should pass it to a label on the page where the pop up was originated.. How can I do this?
I do not want to create a separate page.. just want to be able to add a gridview maybe in a panel... and then make the panel pop upon clicking on a linkbutton.
So so far, I have the panel and the gridview in the panel, how do i make it pop up?
PS : I also have Telerik just have not used it much (is there anything from there I can use)
Thank you

Have a look at the ajax control toolkit.
This example demos the popup functionality that you want.

I'd put the gridview in a DIV and hide the div. You can then use JQuery to handle showing the DIV, capturing your value selected and setting your label. This can all be done client side, avoiding any trips to the server as it seems that shouldn't be necessary for what you've described. Here's a very simple sample. I'm simply showing a textbox and the value entered is updated into the label. You'll of course want to add some styling and html here to make your div look more like a form. But it should get you started. You'll also need to include the jquery references.
<script type="text/javascript">
$(document).ready(function () {
$('.ok').click(function (e) {
//Cancel the link behavior
e.preventDefault();
$('#lbl').text($('#input').val());
$('#dialog').hide();
});
$('#btnShow').click(function (e) {
//Cancel the link behavior
e.preventDefault();
//Set the popup window to center
$('#dialog').css('top', $(window).height() / 2 - $('#dialog').height() / 2);
$('#dialog').css('left', $(window).width() / 2 - $('#dialog').width() / 2);
$('#dialog').show();
});
});
</script>
<label id="lbl">Old Value</label>
<input type="button" id="btnShow" value="Get Value" />
<div id="dialog" style="display:none; width:440px; height:200px; position:absolute; ">
<input type="text" id="input" />
<input type="button" value="OK" class="ok" style="width:70px"/>
</div>