We Keep Coding

Include form tag only in master page if content page not contains <form> tag?

I am using <asp:ScriptManager> and link in master page which require <Form> tag but issue is here that i have included already <form> tags in all the child content pages.
I know i just need to include <form> tag just in master page and remove from all child pages but unfortunately its not possible because there are so many content child pages which connected to this master page and also each child <form> tags contains different classes like horizental inline etc.
So i just want that i just want to include <form> tag only in master page if form tag not exist in content/child page.
If i use both in master and child/content, its showing error, its must 1 form tag.
Master page
<form id="Form2" runat="server" novalidate="" role="form" runat="server" class="form-horizontal">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<h3>Session Idle: <span id="secondsIdle"></span> seconds.</h3>
<asp:LinkButton ID="lnkFake" runat="server" />
<cc1:modalpopupextender id="mpeTimeout" behaviorid="mpeTimeout"
runat="server" popupcontrolid="pnlPopup" targetcontrolid="lnkFake"
okcontrolid="btnYes" cancelcontrolid="btnNo"
backgroundcssclass="modalBackground" onokscript="ResetSession()">
</cc1:modalpopupextender>
<asp:Panel ID="pnlPopup" runat="server" CssClass="modalPopup" Style="display: none">
<div class="header">
Session Expiring!
</div>
<div class="body">
Your Session will expire in <span id="seconds"></span> seconds.<br />
Do you want to reset?
</div>
<div class="footer" align="right">
<asp:Button ID="btnYes" runat="server" Text="Yes" CssClass="yes" />
<asp:Button ID="btnNo" runat="server" Text="No" CssClass="no" />
</div>
</asp:Panel>
<asp:ContentPlaceHolder ID="body" runat="server">
</asp:ContentPlaceHolder>
</form>
I just want to use form tag only if not in child page. how can i tackle this situation,
Thanks,

As far as I know, the ASP.NET WebForms do not support multiple form elements with runat="server" attribute. So, there is no work around to this as it is something hard coded into the project.
Anyhow, if there are suppose a thousand child pages that also have form element with runat="server" attribute, and you are too lazy to replace all of them one by one, Then you can use Visual Studio's text replacing feature and can change the form element to a div element. For that you just need to press Ctrl + H which will open a little window on top right corner asking for the text that you want to replace and another text that you want to have instead of that. See:
Notice in the screenshot I have shared, I am selecting Current Project from the drop down menu. This will search and replace every text with <form to <div in the project.
And once it has replaced all the tags starting with <form to <div then you can modify the closing text of the form tag by replacing </form with </div. Now you only have left one page.
Now, there is only the MasterPage left that you can replace back the div to form. So, this way you are manually changing only one page.
You need to click the second button that will replace all the values. There are other options to handle the find and replace that you can use as well. But, unfortunately, you cannot have multiple form tags with runat="server" attributes on it.
PS
It won't cause problem with the designs that you have and classes such as horizontal inline will be applied to those divs instead of forms and will be rendered same as the forms were being rendered on the UI.
It is always a good approach to take a backup before modifying things in bulk or changing something that is crucial and could cause a lot mess.

Make a Dropdownmenu with CSS

I would like to make a Dropdownmenu, but It is not that easy, because I am working with panels.
This is my menu. I've got the nav= menu and then I got a panel for the menu and one for the submenu. The submenupanel is not displayed by default.
Now I wan't a block which comes down, when I hover over the pnlMenu.
<div id="wrapper_menu">
<div id="menuicon">
<div class="menubar" id="menubar-top"></div>
<div class="menubar" id="menubar-mid"></div>
<div class="menubar" id="menubar-bottom"></div>
</div>
<nav id="menu">
<asp:Panel ID="pnlMenu" runat="server"></asp:Panel>
<asp:Panel ID="pnlSubmenu" runat="server">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</asp:Panel>
</nav>
</div>
This is my css code which I have. What I also need is a selector which changes an other div. I don't know if it is really posssible that it works like that, but isn't anything which should display the Dropdownmenu, I only wanted to look if I can select like that.
#pnlMenu .menu_link:hover #pnlSubmenu .submenu_link {
height:50px;
display:block;
}
Because I am working with the masterpage, there's code which gets generated.
This is my html code:

This will not work
#pnlMenu .menu_link:hover #pnlSubmenu .submenu_link {
height:50px;
display:block;
}
because it assumes that #pnlSubmenu is a child of .menu_link which it is not.
In fact #pnlSubmenu is a sibling of #pnlMenu so you may need to rethink the approach.
I suspect that the interactivity may need javascript given the HTML's current structure as there is no CSS selector that will allow you to affect the submenu div by hovering a link in the the first menu div

How can I Insert an Umbraco Item in to a url in a cshtml file, razor?

I've made an If statement containing a youtube link.
In umbraco I have a Text String box that enables a user to insert the ID of a youtube video.
<div class="module m-video">
<div class="regular">
<div class="graphics video-container">
<iframe width="100%" src="http://www.youtube.com/embed/<umbraco:Item field="youtubeId" runat="server" />?rel=0" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
But when the page loads it displays the <umbraco:Item field="youtubeId" runat="server" /> instead of what the user put in.
What work around is their to display what a user inserts into the text string box.
All must be done in razor

I would create a "YoutubeVideo" macro along with it's razor script "YoutubeVideo.cshtml". And that cshtml code would look like this:
#using umbraco.MacroEngines
#inherits umbraco.MacroEngines.DynamicNodeContext
<div class="module m-video">
<div class="regular">
<div class="graphics video-container">
<iframe width="100%" src="http://www.youtube.com/embed/#Model.youtubeId?rel=0" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
Then in your .master you could include that mascroscript like this:
<umbraco:Macro ID="Macro1" Alias="YoutubeVideo" runat="server" />
This approach may differ if you are using Umbraco 6+ with MVC, but otherwise this should do the trick.

If you are doing this inside the umbraco template editor you should be able to swap the double quotes denoting the src attribute with single quotation marks, and the umbraco item needs no change.
<iframe width="100%" src='http://www.youtube.com/embed/<umbraco:Item field="youtubeId" runat="server" />?rel=0' frameborder="0" allowfullscreen></iframe>

Jquery accordion with repeater, row details are not visible when activating row

I am trying to use the jquery accordion with a repeater. I used the sample directly from the jquery documentation. When I click on the section links, the details open and expand, but you can't see any of the text. The html output looks right to me, not sure where this is going wrong.
<script>
$(document).ready(function () {
$("#accordion").accordion();
});
</script>
<div id="accordion">
<asp:Repeater ID="respondToExceptionsList" runat="server">
<ItemTemplate>
<h3>Section 1</h3>
<div>
sdfffffffffffffff
</div>
</ItemTemplate>
</asp:Repeater>
</div>
This is the html output.
<DIV id=accordion class="ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role=tablist jQuery1315324170464="2">
<H3 aria-expanded=true class="ui-accordion-header ui-helper-reset ui-state-active ui-corner-top" role=tab tabIndex=0 jQuery1315324170464="3">
<SPAN class="ui-icon ui-icon-triangle-1-s" jQuery1315324170464="13"></SPAN><A tabIndex=-1 href="#">Section 1</A></H3>
<DIV style="HEIGHT: 19px" class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active" role=tabpanel>sdfffffffffffffff </DIV>
</DIV>

This is related to the accordion height being set to zero. I am having the same issue using the accordion in an html repeater generated using angularjs. To fix the problem, the accordion must be refreshed after the data is loaded. I found the answer in the jquery forums here.

Drag-and-drop accordion panels? (ASP.Net)

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&section[]=1&section[]=3&section[]=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