Fullcalendar does not refresh events from XML file - fullcalendar

Why full calendar does not refresh events from XML file. I add one item to XML file and the fullcalendar does not refresh. Any idea?
Its asp.net and mysql and when I insert one item on my XML file I need to refresh
Here is my code:
There are 2 files asp.net and C#
If I refresh the webpage it seems to work
<%# Page Language="C#" AutoEventWireup="true" CodeFile="calendario.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.6.1/fullcalendar.min.css"/>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.12.0/moment.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.6.1/fullcalendar.min.js"></script>
<script>
$(document).ready(function () {
$('#calendar').fullCalendar({
//lang: 'pt',
header: {
left: 'prev,next,today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
eventLimit: true,
businessHours: true,
editable: true,
events: function (start, end, timezone, callback) {
$.ajax({
url: 'eventos_professor.xml',
dataType: 'xml',
data: {
// our hypothetical feed requires UNIX timestamps
start: start.unix(),
end: end.unix()
},
success: function (doc) {
var events = [];
$(doc).find('event').each(function () {
events.push({
title: $(this).attr('title'),
start: $(this).attr('start'), // will be parsed
end: $(this).attr('end'), // will be parsed
textColor: "red",
backgroundColor: "black"
});
});
callback(events);
}
});
},
selectable: true,
dayClick: function (fecha, evento, vista) {
//alert(fecha.format());
$("#myModal").modal();
}
});
$('#calendar').fullCalendar('refetchEvents');
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div class="container">
<div id="calendar">
</div>
</div>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Marcar aula</h4>
<div class="form-group">
<label for="txtData">Data:</label>
<asp:TextBox ID="txtData" runat="server" Enabled="true"></asp:TextBox>
</div>
</div>
<div class="modal-body">
<div class="row" style="background-color:darkgray;">
<div class="form-group">
<label for="DropDownList1">Escolha a Turma:</label>
</div>
<div class="col-xs-4">
<div class="form-group">
<label for="txtHorainicio">Hora início:</label>
<asp:TextBox ID="txtHorainicio" type="Time" CssClass="form-control" runat="server"></asp:TextBox>
</div>
</div>
<div class="col-xs-4">
<div class="form-group">
<label for="txtHorafim">Hora fim:</label>
<asp:TextBox ID="txtHorafim" type="Time" CssClass="form-control" runat="server"></asp:TextBox>
</div>
</div>
<div class="col-xs-4">
<div class="form-group">
<label for="CheckBox1">Repetir Evento</label>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:CheckBox ID="CheckBox1" AutoPostBack="True" runat="server" Checked="false" />
</ContentTemplate>
</asp:UpdatePanel>
</div>
</div>
</div>
<asp:UpdatePanel ID="UpdatePanel2" runat="server">
<ContentTemplate>
<div class="row">
<div id="opcoes" runat="server" visible="false">
<div class="col-md-4">
<asp:CheckBox ID="CheckBox2" Text="Registar em Férias" runat="server" />
</div>
<div class="col-md-4">
<asp:CheckBox ID="CheckBox3" Text="Registar em feriados" runat="server" />
</div>
<div class="col-md-4">
<div class="form-group">
<label for="txtDataLimite">Até à data:</label>
<asp:TextBox ID="txtDataLimite" Text="2018-12-31" CssClass="form-control" Enabled="true" runat="server"></asp:TextBox>
</div>
</div>
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</div>
<div class="modal-footer">
<div class="row">
<div class="col-xs-6 text-right">
<asp:Button ID="Button1" class="btn btn-default btn-danger" data-dismiss="modal" runat="server" Text="Close" />
</div>
<div class="col-xs-6 text-left">
<asp:Button ID="Button2" class="btn btn-default btn-success" runat="server" Text="Gravar" OnClick="Add_XML" />
</div>
</div>
</div>
</div>
</div>
</div>
</form>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>
and C# code:
protected void Add_XML(object sender, EventArgs e)
{
XElement xml = XElement.Load("mypath\\eventos_professor.xml");
xml.Add(new XElement("event",
new XAttribute("title", "Agora sim"),
new XAttribute("start", "2018-07-23 19:45:00"),
new XAttribute("end", "2018-07-23 21:45:00")));
xml.Save("mypath\\eventos_professor.xml");
}

Related

Bootstrap Modal Popup Form Code Not working

ASP.NET
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.8.19.custom.min.js" type="text/javascript"></script>
</head>
<body>
<form id="form1" runat="server">
<asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="#loginModal" />
<div class="container">
<div class = "row">
<div class="modal fade" tabindex="-1" id="loginModal"
data-keyboard="false" data-backdrop="static">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
×
</button>
<h4 class="modal-title">Login</h4>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="inputUserName">Username</label>
<input class="form-control" placeholder="Login Username"
type="text" id="inputUserName" />
</div>
<div class="form-group">
<label for="inputPassword">Password</label>
<input class="form-control" placeholder="Login Password"
type="password" id="inputPassword" />
</div>
</form>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary">Login</button>
<button type="button" class="btn btn-primary"
data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
Don't know why the above code is not working form me.
You need to change the button a bit, by adding data-toggle="modal" and data-target="#loginModal", and changing the value of OnClientClick to "return false" to prevent re-loading of page due to postback
<asp:Button ID="Button1" runat="server" Text="Button" data-toggle="modal" data-target="#loginModal" OnClientClick="return false" />
More on Bootstrap Modals (although the documentation uses a normal button)

ModalPopupExtender does not show in aspx

i try to design a popup window in my aspx page. The problem is the page is reloaded and the popup not shown!
here is the code
aspx
<asp:ScriptManager ID="ScriptManager2" runat="server"></asp:ScriptManager>
<asp:Label ID="popuplbl" runat="server"></asp:Label>
<cc1:ModalPopupExtender ID="mpe" PopupControlID="panel1" TargetControlID="popuplbl" CancelControlID="cancelbtn" runat="server"></cc1:ModalPopupExtender>
<asp:Panel ID="panet1" class="modal fade in" runat="server">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="close" aria-hidden="true" type="button" data-dismiss="modal"></button>
<h4 class="modal-title">New Study Design</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-12">
<h4>Some Input</h4>
<p><input class="col-md-12 form-control" type="text"> </p>
<p><input class="col-md-12 form-control" type="text"> </p>
</div>
</div>
</div>
<div class="modal-footer">
<button id="cancelbtn" class="btn default" type="button" data-dismiss="modal">Cancel</button>
<button class="btn blue" type="button">Add</button>
</div>
</div>
</div>
</asp:Panel>
<button runat="server" id="AddNew_StudyDesign" class="btn sbold green" title="Add New Study Design" style="width:200px" onserverclick="AddNew_StudyDesign_Click" >
Add New Study Design <i class="fa fa-plus"></i>
</button>
c#
protected void AddNew_StudyDesign_Click(object sender, System.EventArgs e)
{
mpe.Show();
}
I try using "ToolkitScriptManager" but it is not known!
<%# Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<cc1:ToolkitScriptManager ID="ScriptManager1" runat="server" />
I can see one issue,
Replace PopupControlID attribute in ModalPopupExtender ,
PopupControlID="panel1"
To
PopupControlID="panet1"
Panel ID is panet1, not panel1.
Additionally, Panel should have display style none (style="display:none;"), but you can keep as per your requirements.

Asp.Net Bootstrap Classes On <asp:DropDownList

<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>
Account Group - Add - My ASP.NET Application
</title><script src="/Scripts/modernizr-2.6.2.js"></script>
<link href="/Content/bootstrap.css" rel="stylesheet"/>
<link href="/Content/Site.css" rel="stylesheet"/>
<link href="favicon.ico" rel="shortcut icon" type="image/x-icon" /></head>
<body>
<form method="post" action="./groupAdd" id="ctl01">
<div class="aspNetHidden">
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="tRJn2Kjwvz2Puav8tcpz3Ls6wGBUmb5Ja174Y3bdllDemDMYow1wPnjeUZgjA1y+av/mqygIOqBBxlrkr1A6axhfG/Ic4fMYi6poCOfltc5MR88HYxVigJJBG3tIvHfroT0iXc0csFM0mwyzWlNttzAhjZx7Xogq99vurKroKnK4q23wfM8J72YgScmhpcujEBgtDuKzbt8o6nu6VjwNYg==" />
</div>
<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['ctl01'];
if (!theForm) {
theForm = document.ctl01;
}
function __doPostBack(eventTarget, eventArgument) {
if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
theForm.__EVENTTARGET.value = eventTarget;
theForm.__EVENTARGUMENT.value = eventArgument;
theForm.submit();
}
}
//]]>
</script>
<script src="/bundles/MsAjaxJs?v=c42ygB2U07n37m_Sfa8ZbLGVu4Rr2gsBo7MvUEnJeZ81" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
if (typeof(Sys) === 'undefined') throw new Error('ASP.NET Ajax client-side framework failed to load.');
//]]>
</script>
<script src="Scripts/jquery-1.10.2.js" type="text/javascript"></script>
<script src="Scripts/bootstrap.js" type="text/javascript"></script>
<script src="Scripts/respond.js" type="text/javascript"></script>
<script src="/bundles/WebFormsJs?v=AAyiAYwMfvmwjNSBfIMrBAqfU5exDukMVhrRuZ- PDU01" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
Sys.WebForms.PageRequestManager._initialize('ctl00$ctl08', 'ctl01', [], [], [], 90, 'ctl00');
//]]>
</script>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
Application name
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Register</li>
<li>Log in</li>
</ul>
</div>
</div>
</div>
<div class="container body-content">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="form-group">
<label for="MainContent_eGroupCode" id="MainContent_lGroupCode">Group Code</label>
<input name="ctl00$MainContent$eGroupCode" type="text" maxlength="10" id="MainContent_eGroupCode" class="form-control" style="text-transform:uppercase" />
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="form-group">
<label for="MainContent_ddGroupType" id="MainContent_lGroupType">Group Type</label>
<select name="ctl00$MainContent$ddGroupType" id="MainContent_ddGroupType" class="form-control">
<option value="IN">Incomes</option>
<option value="EX">Expenses</option>
<option value="AS">Assets</option>
<option value="LI">Liabilities</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="form-group">
<label for="MainContent_eGroupName" id="MainContent_lGroupName">Group Name</label>
<input name="ctl00$MainContent$eGroupName" type="text" maxlength="40" id="MainContent_eGroupName" class="form-control" style="text-transform:uppercase" />
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3">
<input type="submit" name="ctl00$MainContent$bSave" value="Save" id="MainContent_bSave" class="btn btn-success" />
</div>
</div>
<hr />
<footer>
<p>© 2016 - PFA</p>
</footer>
</div>
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATEGENERATOR" id="__VIEWSTATEGENERATOR" value="3AAE92F6" />
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="qSAzVSuS/WkdQ0+7cpffhRi71ZlGYos9x6mRfTlJETXx5PzLHrvJMrvKTBR+gk0eqMw6L0G8IaFchRCu2+y5qUSvQESXisN7B0rrXdNd3EB6D+zzcccmRVsiGszQD39higpryIq2R7q+im2eg0bLsdGa55i5eD7cOF8/Kh9ZNlMhO8NUTJ05Ef8LDMxYv+jB89mlh5Un6dkvjksggF8mBZp2pDYrDoGaINzbFwJzC5Q65UIgChzA9VRKUUWFG/BU" />
</div></form>
<!-- Visual Studio Browser Link -->
<script type="application/json" id="__browserLink_initializationData">
{"appName":"Firefox","requestId":"d3ed4f11e0994099a89d07a103267276"}
</script>
<script type="text/javascript" src="http://localhost:50950/1ed6bd9582884a84ad84c822a4bf5589/browserLink" async="async"></script>
<!-- End Browser Link -->
</body>
</html>
Version 2
<%# Page Title="Account Group - Add" Language="vb" AutoEventWireup="false" MasterPageFile="~/Site.Master" CodeBehind="groupAdd.aspx.vb" Inherits="PFA.groupAdd" %>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="form-group">
<asp:Label runat="server" ID="lGroupCode" Text="Group Code" AssociatedControlID="eGroupCode"></asp:Label>
<asp:TextBox runat="server" ID="eGroupCode" CssClass="form-control"></asp:TextBox>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="form-group">
<asp:Label runat="server" ID="lGroupType" Text="Group Type" AssociatedControlID="ddGroupType"></asp:Label>
<asp:DropDownList runat="server" ID="ddGroupType" CssClass="form-control">
<asp:ListItem Text="Incomes" Value="IN"></asp:ListItem>
<asp:ListItem Text="Expenses" Value="EX"></asp:ListItem>
<asp:ListItem Text="Assets" Value="AS"></asp:ListItem>
<asp:ListItem Text="Liabilities" Value="LI"></asp:ListItem>
</asp:DropDownList>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="form-group">
<asp:Label runat="server" ID="lGroupName" Text="Group Name" AssociatedControlID="eGroupName"></asp:Label>
<asp:TextBox runat="server" ID="eGroupName" CssClass="form-control"></asp:TextBox>
</div>
</div>
</div>
And the result - the dropdown is still wider than the text boxes above and below.
Please see screenshot of rendered for below. Why does the dropdownlist occupy the whole screen width while the other two controls don't? Very new to web development. Please advice and help. Many thanks. Iyer
<%# Page Title="Account Group - Add" Language="vb" AutoEventWireup="false" MasterPageFile="~/Site.Master" CodeBehind="groupAdd.aspx.vb" Inherits="PFA.groupAdd" %>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
<div class="form-group">
<asp:Label runat="server" ID="lGroupCode" Text="Group Code" AssociatedControlID="eGroupCode"></asp:Label>
<asp:TextBox runat="server" ID="eGroupCode" CssClass="form-control"> </asp:TextBox>
</div>
<div class="form-group">
<asp:Label runat="server" ID="lGroupType" Text="Group Type" AssociatedControlID="ddGroupType"></asp:Label>
<asp:DropDownList runat="server" ID="ddGroupType" CssClass="form-control" width="100%">
<asp:ListItem Text="Incomes" Value="IN"></asp:ListItem>
<asp:ListItem Text="Expenses" Value="EX"></asp:ListItem>
<asp:ListItem Text="Assets" Value="AS"></asp:ListItem>
<asp:ListItem Text="Liabilities" Value="LI"></asp:ListItem>
</asp:DropDownList>
</div>
<div class="form-group">
<asp:Label runat="server" ID="lGroupName" Text="Group Name" AssociatedControlID="eGroupName"></asp:Label>
<asp:TextBox runat="server" ID="eGroupName" CssClass="form-control"></asp:TextBox>
</div>
As Webruster says, you have specified a width of 100%. However, that's not the whole story. Even without this, Bootstrap will by default define a CSS width of 100%. Try wrapping the whole block in a <div class="col-***"> tag to better control sizes. For example, col-sm-3.
See the Bootstrap documentation for how to control form sizes.
EDIT:
After chatting with the OP for a while, it transpired that the problem is with the Content/Site.css file that's automatically generated by Visual Studio when creating a new Web Forms app. Amongst other things, it contains the following style:
/* Set widths on the form inputs since otherwise they're 100% wide */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="select"]{
max-width: 280px;
}
This is overriding the default Bootstrap behavior. Furthermore, there is not (as far as I'm aware) an input type called select. Asp.net dropdown lists render to normal select tags. So what the above style does is restrict the maximum width of several input tags, without affecting the dropdown lists.
There are two solutions. First, we can simply delete this block entirely. This will allow Bootstrap to behave as expected, as far as form elements are concerned. This would be my preference.
Second, replace input[type="select"] with simply select. If it transpires that my knowledge of input types is lacking, then add ", select" after it, rather than replacing it (don't forget the comma!)

How to show message from code behind in bootstrap's modal popup in asp.net c#

Actually what I mean is when I click the asp dot net button which is located in the modal popup.
when I click that button I want to print the message from the server that data is properly saved or not.
When I click the button bootstrap's modal pop up is vanished bcoz of the postback.
what can i do to print the mesage from server.
Below is my modal pop uo code in HTML.
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<asp:Label ID="lblMessage" runat="server" ></asp:Label>
</div>
<div class="modal-footer">
<asp:Button ID="Button2" OnClick="Button2_Click" runat="server" Text="Click Me" />
</div>
</div>
</div>
</div>
c# Code
protected void Button2_Click(object sender, EventArgs e)
{
Label1.Text = "I am called";
}
Add logic to the click event to re-open the modal after the post back OR look for an alternative method of posting back to the server such as using AJAX.
Code behind:
protected void Button2_Click(object sender, EventArgs e)
{
lblMessage.Text = "I am called";
ScriptManager.RegisterStartupScript(this, this.GetType(), "Pop", "showModal();", true);
}
.ASPX:
<head runat="server">
<title></title>
<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 showModal() {
$("#myModal").modal('show');
}
$(function () {
$("#btnShow").click(function () {
showModal();
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<input type="button" id="btnShow" value="Show Modal" />
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<asp:Label ID="lblMessage" runat="server"></asp:Label>
</div>
<div class="modal-footer">
<asp:Button ID="Button2" runat="server" Text="Click Me" OnClick="Button2_Click" />
</div>
</div>
</div>
</div>
</form>
</body>

Bootstrap DropDown closing when clicking inside input

I have a very similar to many topical problem here on StackOverflow, but none of the solutions listed solved my problem.
(
Bootstrap dropdown closing when clicked
Bootstrap dropdown propagation closing when clicked
Twitter Bootstrap cant stop a dropdown from closing on click
Twitter Bootstrap dropdown closes when clicked
)
I have a horizontal navigation bar, and in the end want to put a dropdown to log in form. However when you click inside the form closes the plumb alone.
Could someone help me ??
Thanks So Much.
My code this:
<head runat="server">
<%--<link href="../Styles/Estilos.css" rel="Stylesheet" media="all" type="text/css" />--%>
<link href="../Styles/Print_Screen.css" rel="Stylesheet" media="print" type="text/css" />
<link href="../Content/CSS/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="../Content/CSS/jasny-bootstrap.min.css" rel="stylesheet" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<asp:ContentPlaceHolder ID="head" runat="server">
<script type="text/javascript">
$(function () {
// Setup drop down menu
$('.dropdown-toggle').dropdown();
// Fix input element click problem
$('.dropdown input, .dropdown label').click(function (e) {
e.stopPropagation();
});
$('.dropdown-menu input, .dropdown-menu label').click(function (e) {
e.stopPropagation();
});
$('.dropdown-menu input').click(function (event) {
event.stopPropagation();
});
$('.dropdown-menu').on('click', function (e) {
e.stopPropagation();
});
$('.dropdown-menu').find('form').click(function (e) {
e.stopPropagation();
});
$('.dropdown-menu').click(function (e) {
e.stopPropagation();
});
})
</script>
</asp:ContentPlaceHolder>
<div class="page-header" style="margin: 10px 0 20px;">
<div id="Div1" class="container">
<div class="navbar-inner navbar-content-center" style="text-align: center;">
<img id="Img3" alt="" style="border: 0" runat="server" src="~/images/logo.png" />
</div>
</div>
</div>
<div class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span><span
class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar">
</span><span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse">
<asp:SiteMapDataSource ID="menuData" runat="server" ShowStartingNode="false" />
<asp:Repeater ID="r1" runat="server" DataSourceID="menuData">
<HeaderTemplate>
<ul class="nav navbar-nav">
</HeaderTemplate>
<ItemTemplate>
<li id="Menuitem" runat="server"><a href='<%# ((System.Web.SiteMapNode)Container.DataItem).Url %>'>
<i class='<%#((System.Web.SiteMapNode)Container.DataItem).ResourceKey%>'></i>
<%#((System.Web.SiteMapNode)Container.DataItem).Title%></a> </li>
</ItemTemplate>
<FooterTemplate>
</ul>
</FooterTemplate>
</asp:Repeater>
<form class="form" id="formLogin" runat="server">
<ul class="nav navbar-nav navbar-right">
<li id="liLogin" runat="server" class="dropdown"><a href="#" class="dropdown-toggle"
id="register" data-toggle="dropdown" style="padding: 20px 5px;"><i class="glyphicon glyphicon-cog">
</i>LOGIN</a>
<div class="dropdown-menu" style="padding: 17px;">
<div style="margin-bottom: 25px" class="input-group input-group-sm">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<asp:TextBox ID="txtLogin" runat="server" class="form-control" placeholder="username or email"
Style="width: 200px;"></asp:TextBox>
</div>
<div style="margin-bottom: 25px" class="input-group input-group-sm">
<span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
<asp:TextBox ID="txtSenha" runat="server" TextMode="Password" class="form-control"
placeholder="username or email" Style="width: 200px;"></asp:TextBox>
</div>
<div style="margin-top: 10px" class="form-group">
<!-- Button -->
<div class="col-sm-12 controls">
<asp:LinkButton ID="btnLogin" runat="server" Text="Login" CssClass="btn btn-success btn-sm btn-block"></asp:LinkButton>
</div>
<asp:Label ID="errorLabel" runat="server" Text="" Visible="false"></asp:Label>
</div>
</div>
<!-- /dropdown-menu -->
</li>
</ul>
<asp:ScriptManager ID="ScriptManager2" runat="server">
</asp:ScriptManager>
</form>
</div>
</div>
<!--/.nav-collapse -->
</div>
<script src="../Scripts/jquery-2.1.1.min.js" type="text/javascript"></script>
<script src="../Scripts/bootstrap.min.js" type="text/javascript"></script>
<script src="../Scripts/jasny-bootstrap.min.js" type="text/javascript"></script>

Resources