I have 3 tabs in my Page and I used JQuery UI for tabs.
<div id="tabs" style="text-align:right;">
<ul>
<li class="myTab">
Main Information</li>
<li class="myTab"><a href=<%= Url.Action("GetPartialView","Contractors") %> >Contractors</a></li>
<li class="myTab"> Consultants </li>
</ul>
<div id="tabs-1">
</div>
<div id="tabs-2">
</div>
<div id="tabs-3">
</div>
There is a "Save" button in each tab.The problem is that when for example button "Save" of contractors tab was clicked the page redirect to http://localhost:1347/xxxxx/GetPartialView and didn't fire any method.I want to save data and show user a message that shows data was saved completely.How can I do it?
Do you have the [HttpPost] attribute on top of whatever action is being called to load that page?
Related
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="">
I am using native bootstrap tabs and trying to persist state of the current tab after the page refresh. Here is my form bootstrap 3 with Tabs:
<form runat="server" id="mainForm">
<div class="Tabs">
<ul class="nav nav-tabs">
<li runat="server" id="liSectionContractPayments" onclick="return makeActiveTab('sectionA');">
<a data-toggle="tab" href="#sectionA">
Heading 1
</li>
<li runat="server" id="liSectionTracking" onclick="return makeActiveTab('sectionB');">
<a data-toggle="tab" href="#sectionB">
Heading 2
</li>
<li runat="server" id="liSectionNotes>
<a data-toggle="tab" href="#sectionC" onclick="return makeActiveTab('sectionC');">
Heading 3</li>
</ul>
<div class="tab-content">
<div id="sectionContractPayments" class="tab-pane fade">
<h4>Heading 1</h4>
Content for heading 1
</div>
<div id="sectionTracking" class="tab-pane fade">
<h4>Heading 2</h4>
Content for heading 2
</div>
<div id="sectionNotes" class="tab-pane fade">
<h4>Heading 3</h4>
Content for heading 3
</div>
</div>
</div>
<%-- This is to keep the state of current tab. --%>
<asp:HiddenField ID="SetActiveNavTab" runat="server" />
</form>
I am using a hidden field SetActiveNavTab to persist state of the current tab, to do that I have the following script:
<script>
/* Not working ... */
function activaTab2(tab) {
$('.nav-tabs a[href="#' + tab + '"]').tab('show');
};
function makeActiveTab(activeTabName) {
$('#<%=SetActiveNavTab.ClientID%>').val(activeTabName);
activaTab2($('#<%=SetActiveNavTab.ClientID%>').val(activeTabName));
alert(activeTabName + "AND" + activaTab2($('#<%=SetActiveNavTab.ClientID%>').val()););
}
/* Not working ... */
$(document).ready(function() {
function activaTab(tab) {
$('.nav-tabs a[href="#' + tab + '"]').tab('show');
};
activaTab($('#<%=SetActiveNavTab.ClientID%>').val());
});
</script>
The part which is not working is marked with comments. I can't seems to save the clicked on tab to a SetActiveNavTab hidden field. Something wrong with the script?
Also not sure if there is a better way to do that?
You need to post the some part of page rather then full page post back. i-e AJAX
AJAX allows web pages to be updated asynchronously by exchanging small amounts of data with the server behind the scenes. This means that it is possible to update parts of a web page, without reloading the whole page.
HOW IT WORKS
Source
FOR AJAX IN ASP.NET WEB FORMS
In asp.net web forms you need to put update panel
Introduction to the UpdatePanel Control
Understanding ASP.NET AJAX UpdatePanel Triggers
Our solution runs with a parent frame and a main content iframe. One of the pages in the main content iframe is set up with a series of divs used as tabs, example as follows.
<div id="topRow">
<div class="mainInformation tab tabSelected" runat="server" id="mainInformationTop">
<div class="tabLeft">
<div class="tabMain">
Main Information
</div>
</div>
</div>
<div class="executives tab" runat="server" id="executivesTop">
<div class="tabLeft">
<div class="tabMain">
Executives
</div>
</div>
</div>
</div
<div id="secondRow">
<div id="mainInformationTabGroup" runat="server" class="mainInformation tabGroup">
<div id="overview" runat="server" class="tab tabSelected overview">
<div class="tabLeft">
<div class="tabMain">
Overview
</div>
</div>
</div>
<div id="locations" runat="server" class="tab locations">
<div class="tabLeft">
<div class="tabMain">
Locations
</div>
</div>
</div>
</div>
<div id="executivesTabGroup" runat="server" class="executives tabGroup" style="display: none">
<div id="companyExecutives" runat="server" class="tab companyExecutives">
<div class="tabLeft">
<div class="tabMain">
Company Executives
</div>
</div>
</div>
<div id="affiliatedExecutives" runat="server" class="tab affiliatedExecutives">
<div class="tabLeft">
<div class="tabMain">
Affiliated Company Executives
</div>
</div>
</div>
</div
</div>
The jquery event handlers are loaded from a local .js file, example pertaining to the above HTML as follows
$('#topRow div.tab').click(function() {
$('#topRow div.tabSelected').removeClass('tabSelected');
$(this).addClass('tabSelected');
})
$('#topRow .mainInformation').click(function() {
$('#secondRow').css('display', 'block');
$('#thirdRow').css('display', 'none');
resizeAllIframes();
$('#secondRow .tabGroup').css('display', 'none');
$('#secondRow .mainInformation').css('display', 'block');
$('#secondRow .mainInformation div.tab').not('.locked').children().first().trigger('click');
});
$('#topRow .executives').click(function(){
$('#secondRow').css('display', 'block');
$('#thirdRow').css('display', 'none');
resizeAllIframes();
$('#secondRow .tabGroup').css('display', 'none');
$('#secondRow .executives').css('display', 'block');
$('#secondRow .executives div.tab').not('.locked').children().first().trigger('click');
});
(The click events just change the "src" attribute of the iframe)
The issue I'm experiencing is that sometimes when we load this tab page (and only in Internet Explorer 9+, IE7 seems to not have this issue), I'll click on a tab and nothing will happen. The hover events for the CSS are loaded just fine, but click on the tab does nothing. However, if I click one tab and nothing happens, I can click on the next and it will work fine. Similarly, if I click anywhere in the main content frame first and then on a tab, it will always fire the event handler.
We've noticed this problem happening almost entirely when we try to direct to the tabbed page from the parent frame (we have a quicksearch up there) and we use a Response.Redirect to load the iframe with the tab page. I've tried redirecting this quicksearch to a landing page inside the iframe that then uses a Response.Redirect to get us to the tab page, but it ends up with the same results. When we're clicking on a hyperlink from inside the iframe (Target="_self"), that works just fine.
This issue doesn't happen in Firefox, Chrome, or IE7, but it does in IE9+.
Does anybody have any thoughts, ideas, known bugs that I'm missing, anything like that?
this is how you bind an event to an element:
$(document).bind('click','#topRow div.tab',function() {
$('#topRow div.tabSelected').removeClass('tabSelected');
$(this).addClass('tabSelected');
});
do the exact same for the other events just change the selector part (I mean "#topRow div.tab") with the desired selectors.
I have a .net c# webform using the JQueryUI tabs Example as per the code below:
<script type="text/javascript">
$(function () {
$("#tabs").tabs();
});
</script>
<div id="tabs">
<ul>
<li>Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
<li>Tab 4</li>
</ul>
<div id="divTab1">
Showing Tab 1
</div>
<div id="divTab2">
Showing Tab 2
</div>
<div id="divTab3">
Showing Tab 3
</div>
<div id="divTab4">
Showing Tab 4
</div>
</div>
What I would like to achieve, is based on a condition in my code behind, is to hide specific tabs.
How would I go about doing this?
You can call the JQuery hide() method:
http://api.jquery.com/hide/
In code-behind, evaluate your conditions and register the hide() method invocation with ClientScriptManager.RegisterStartupScript method:
http://msdn.microsoft.com/en-us/library/system.web.ui.clientscriptmanager.registerstartupscript.aspx
I have a set of accordion panes(dynamically created) contained in an Accordion control. Basically, what I am wanting is for the user to be capable of dragging these accordion panels so that instead of
A pane
B pane
C pane
They can drag and drop it to be something like
B pane
A pane
C pane
Or whatever. Also, more importantly, I would need to be able to detect that they have changed the order. Would there be a way to have it when they "drop" the pane that it can update a hidden field or something? I don't need a postback on every single drag and drop, but rather I want for when they hit a save button for the server application to detect the order in which the panes are so that it can save this order.
I would prefer to stay away from javascript libraries, but if it would be the easiest way, then I'll consider it.
Based on petersendidit's answer but without "disappearing accordion" bug...
<div id="accordion">
<div id="section_1">
<h3>Section 1</h3>
<p>
Body 1
</p>
</div>
<div id="section_2">
<h3>Section 2</h3>
<p>
Body 2
</p>
</div>
<div id="section_3">
<h3>Section 3</h3>
<p>
Body 3
</p>
</div>
<div id="section_4">
<h3>Section 4</h3>
<p>
Body 4
</p>
</div>
</div>
and
$("#accordion").accordion({
header:'h3'
}).sortable({
items:'>div'
});
Demo at: https://jsbin.com/bitiyucasa
You can do something like this with jQuery UI:
$("#accordion").accordion()
.sortable({
items:'>.ui-accordion-header',
change: function(event, ui) {
$content = ui.item.next();
},
stop: function(event, ui) {
ui.item.after($content);
}
});
This sets $content to the content div for that header on change. And then on stop moves that content to be after the new position of the header.
HTML would be something like:
<div id="accordion">
<h3 id="section_1">Section 1</h3>
<div>
<p>
Body 1
</p>
</div>
<h3 id="section_2">Section 2</h3>
<div>
<p>
Body 2
</p>
</div>
<h3 id="section_3">Section 3</h3>
<div>
<p>
Body 3
</p>
</div>
<h3 id="section_4">Section 4</h3>
<div>
<p>
Body 4
</p>
</div>
</div>
When your user hits the "save" button you can just call:
$('#accordion').sortable( 'serialize');
Which will give you something like:
section[]=2§ion[]=1§ion[]=3§ion[]=4
This widget is probably the sort of thing you are after.
You can add links to the javascript in the head
<link rel="stylesheet" type="text/css" href="accordion.css">
<script type="text/javascript" src="Ext.ux.InfoPanel.js"></script>
<script type="text/javascript" src="Ext.ux.Accordion.js"></script>
The markup is then just a series of divs. With a little bit of effort you should be able to tie this into the accordion control or create a user control to do your bidding
<div id="acc-ct" style="width:200px;height:300px">
<div id="panel-1">
<div>My first panel</div>
<div>
<div class="text-content">My first panel content</div>
</div>
</div>
<div id="panel-2">
<div>My second panel</div>
<div>
<div class="text-content">My second panel content</div>
</div>
</div>
</div>
A preview of it is available here
Hope this helps
You could use predefined dojo control (open source javascript framework)(link text) and use this control from here (link text) .You can also integrate dojo with asp.net like on my blog (link text).
Waiting for response of your success