I have been working in ASP.NET Web Applications (not MVC) for a while at work. I really would like to use the twitter bootstrap framwork. I think it looks great and has a lot of the work already taken care of for you. I cannot seem to get it to work with ASP server controls. I know that the css is probably trying to change the asp:Button tag to an HTML tag. I just have no idea how to get these to work together. I get the following error.
Warning 2 //file location : ASP.NET runtime error: The base class includes the field 'btnTest', but its type (System.Web.UI.HtmlControls.HtmlButton) is not compatible with the type of control (System.Web.UI.WebControls.Button). //File location 21 1 FalconFutbolClub
When rendering the site to debug, I get the following error:
Control 'mainContentHolder_btnTest' of type 'Button' must be placed inside a form tag with runat=server.
I think it would be really annoying to try to manage postbacks with javascript. I really would just like to use regular ASP server controls, hence the whole reason of using ASP.NET Web Applications. Please help.
EDIT: Code. Here is the master page and my default.
Master Asp:
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="FalconFutbolClub.SiteMaster" %>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Falcon Futbol</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="What's in your toybox?">
<meta name="author" content="Pure Parties">
<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="assets/css/style.css">
<link rel="stylesheet" type="text/css" href="assets/css/bootstrap-responsive.css">
<link rel="shortcut icon" href="images/favicon.ico">
<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
<link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">
<style>
body {
padding-top: 85px; /* 60px to make the container go all the way to the bottom of the topbar */
}
</style>
<asp:ContentPlaceHolder ID="headerContentHolder" runat="server" />
</head>
<body>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">Falcon Futbol</a>
<div class="nav-collapse">
<ul class="nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<div class="container">
<div class="row">
<div span="12">
<asp:ContentPlaceHolder ID="mainContentHolder" runat="server" />
</div>
</div>
</div>
<script src="assets/js/jquery.js"></script>
<script src="assets/js/bootstrap-transition.js"></script>
<script src="assets/js/bootstrap-alert.js"></script>
<script src="assets/js/bootstrap-modal.js"></script>
<script src="assets/js/bootstrap-dropdown.js"></script>
<script src="assets/js/bootstrap-scrollspy.js"></script>
<script src="assets/js/bootstrap-tab.js"></script>
<script src="assets/js/bootstrap-tooltip.js"></script>
<script src="assets/js/bootstrap-popover.js"></script>
<script src="assets/js/bootstrap-button.js"></script>
<script src="assets/js/bootstrap-collapse.js"></script>
<script src="assets/js/bootstrap-carousel.js"></script>
<script src="assets/js/bootstrap-typeahead.js"></script>
<script type="text/javascript">
$('.carousel').carousel({
interval: 2000
})
</script>
</body>
</html>
Master C#
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace FalconFutbolClub
{
public partial class SiteMaster : System.Web.UI.MasterPage
{
protected void Page_Load(object sender, EventArgs e)
{
}
}
}
Default aspx:
<asp:Content ID="content1" ContentPlaceHolderID="headerContentHolder" runat="server">
<script type="text/javascript">
</script>
</asp:Content>
<asp:Content ID="content2" ContentPlaceHolderID="mainContentHolder" runat="server">
<div class="container">
<header class="jumbotron subhead" id="overview">
<h1>Falcon Futbol</h1>
<p>Event registration forms can be filled out here.</p>
<asp:Label ID="clickedTest" runat="server" />
</header>
<div class="span12">
<blockquote>
<p>Event registration form 1.</p>
<small>March 17, 2012</small>
</blockquote>
<div class="span4">
<asp:Button id="btnTest" runat="server" onclick="btnForm1_Click" Text="test" />
</div>
</div>
</div>
</asp:Content>
Default C#:
using System;
using System.Collections.Generic;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Xml.Linq;
using System.IO;
namespace FalconFutbolClub
{
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void btnForm1_Click(object sender, EventArgs e)
{
clickedTest.Text = "Clicked!";
}
}
}
Looks like you answered this yourself! Just to follow up on it - normally just after the body tag of a masterpage you would have a form tag:
<body>
<form id="form1" runat="server" >
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<!-- omitted code from above -->
</div>
</div>
</form>
</body>
Related
Scenario :
I cannot make my asp:DropDownList style correctly.
It works perfectly but it doesn't match the rest of the form. Specifically, the rest of the form has a smaller footprint, no background, and a border.
Todo :
We want dropdowns with a border and white background (like those found on bootstraps form page) (I am sorry - I can't post images yet).
Tried Case :
To debug, I made a naked page with only a dropdown and a text box to compare to. Here is that code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<link rel="stylesheet" href="css/bootstrap.css">
<link href="css/bootstrap-select.css" rel="stylesheet" />
<link rel="stylesheet" href="css/style.css">
<link type="text/css" href="css/jquery-ui.min.css" rel="stylesheet" />
<link type="text/css" href="css/jquery-ui.structure.min.css" rel="stylesheet" />
<link type="text/css" href="css/jquery-ui.theme.min.css" rel="stylesheet" />
</head>
<body>
<form id="form1" runat="server">
<div class="col-5">
<asp:TextBox runat="server" id="notmuch0" CssClass="form-control"></asp:TextBox>
<asp:DropDownList ID="DropDownList1" CssClass="form-control-sm" runat="server"><asp:ListItem>1</asp:ListItem></asp:DropDownList>
</div>
</form>
<!-- Javascript-->
<script src="js/jquery.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/bootstrap-select.js"></script>
<script src="js/core.min.js"></script>
<script src="js/script.js"></script>
<script src="js/popper.min.js"></script>
</body>
</html>
When we run the code, it creates the following mess for the drop down:
<div class="col-5">
<input name="notmuch0" type="text" id="notmuch0" class="form-control">
<select name="DropDownList1" id="DropDownList1" class="form-control-sm select2-hidden-accessible" tabindex="-1" aria-hidden="true">
<option value="1">1</option>
</select><span class="select2 select2-container select2-container--bootstrap select2-container--below" dir="ltr" style="width: 48px;"><span class="selection"><span class="select2-selection select2-selection--single" role="combobox" aria-haspopup="true" aria-expanded="false" tabindex="0" aria-labelledby="select2-DropDownList1-container"><span class="select2-selection__rendered" id="select2-DropDownList1-container" title="1">1</span><span class="select2-selection__arrow" role="presentation"><b role="presentation"></b></span></span></span><span class="dropdown-wrapper" aria-hidden="true"></span></span>
</div>
And it looks the wrong way still (no border, still a background)
I have tried working with the bootstrap selectpicker - but it seems that .net ignores EVERYTHING we do to change the class.
I have about 4 hours of research into this - and still nothing Can you help please? Will try anything.
Please suggest. Thank you.
Try remove jquery-ui.
Only use bootstrap.
I'm using two asp.net ckeckboxes (chk1, and chk2) in a Web Forms project with MasterPage, and I'd like when I click over chk1, the chk2 becomes disable and viceverse without refreshing the entire page, so I'm using updatepanel to achieve this, I just implement the CheckedChanged event on the chk1 and put its AutoPostBack attribute to "true", and everything is ok.
The problem is when I try to implement the bootstrap-switch plugin (the two checkboxes seems like bootstrap-switch perfectly), but the problem is that when I click on the chk1, then the CheckedChanged is not fired, so the enable property of the chk2 is not affected.
I think the problem is when the user clicks on the chk1, in fact the click happens over the span's element's of the bootstrap-switch instead of the chk1 itself.
Please help, sorry for the english.
Update 1:
This is the source code of the page when it is running (right click on the browser), so you can see the bootstrap-switch libraries needed are present:
<html lang="es">
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>
- Mi aplicación ASP.NET
</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="/Content/bootstrap-switch/bootstrap3/bootstrap-switch.css" rel="stylesheet"/>
<link href="favicon.ico" rel="shortcut icon" type="image/x-icon" /></head>
<body>
<form method="post" action="./Test" 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="__LASTFOCUS" id="__LASTFOCUS" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="h5sbkKDqDt9VeL5xnED+gV4kWiRKNFZBx2sOsl8K60EaOVXCuj7iQZJ3QAjjzsLsrj7CnOY8SUD81Mv51jUBYfWpQL0EHuQO3uPa8Yczm/eLjURJjkDTB57Iw5RJUitxpbKigIF0l4NevEGllIgA8hU3zjrDgSCrPtUA3qs7CJO+/ukopmdmKjOkgTjjWniVywgiMskpJEGPl3fzldVSaqkj8Ikbh+OElJUyureaFxNDS7bLq90ZhlVeNNZxorYyvtaj1HxMgniGxdfx0eClL+RD3ksd+mO6kkzV8mSXx+ykvf+A3Z2gcV0wjAcfpc09oxBF8vvsEtwBbJ+WbDlZLnGqn5W7GAFmmqD2l3e8AAFO6Sh0++Ivr057G/pw+FyebisB2dEOZeb2KZbNxL9/imrP/bBFcKrcyPeGiRUaXtjd7VPTXnD8Vox3T97yjv4P" />
</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('Error al cargar el marco de trabajo de cliente ASP.NET Ajax.');
//]]>
</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 src="Scripts/bootstrap-switch.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
Sys.WebForms.PageRequestManager._initialize('ctl00$ctl09', 'ctl01', ['tctl00$MainContent$UpdatePanel1','MainContent_UpdatePanel1'], ['ctl00$MainContent$chk1','MainContent_chk1'], [], 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>
Nombre de la aplicación
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Inicio</li>
<li>Acerca de</li>
<li>Contacto</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Registrarse</li>
<li>Iniciar sesión</li>
</ul>
</div>
</div>
</div>
<div class="container body-content">
<div class="col-sm-2">
<input id="MainContent_chk1" type="checkbox" name="ctl00$MainContent$chk1" onclick="javascript:setTimeout('__doPostBack(\'ctl00$MainContent$chk1\',\'\')', 0)" class="BSswitch" data-size="mini" data-on-text="Si" data-off-text="No" /><label for="MainContent_chk1">Check 1</label>
</div>
<div id="MainContent_UpdatePanel1">
<input id="MainContent_chk2" type="checkbox" name="ctl00$MainContent$chk2" /><label for="MainContent_chk2">Check 2</label>
</div>
<hr />
<footer>
<p>© 2016 - Mi aplicación ASP.NET</p>
</footer>
</div>
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATEGENERATOR" id="__VIEWSTATEGENERATOR" value="75BBA7D6" />
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="3l2FbHNq3NkXeXDBNuO5RZ4xOmC254tC8PhZRAdihltuEWASclMPM3jqhsB2rrjNHLrlioMYf4cBMhfvlMRCUVMkZXg6Bmvc06rKj2GCmkK97sprq9puXxVbM2rKg+DDwC9aG2lPJIcCLM1viuOkLw==" />
</div></form>
<script>
$("[class='BSswitch']").bootstrapSwitch();
</script>
<!-- Visual Studio Browser Link -->
<script type="application/json" id="__browserLink_initializationData">
{"appName":"Internet Explorer","requestId":"41bd03d14e3342bebd4c2f830342b157"}
</script>
<script type="text/javascript" src="http://localhost:30137/825094549df74919a4a0dc141549d775/browserLink" async="async"></script>
<!-- End Browser Link -->
</body>
</html>
And now this is the Test.aspx file:
<%# Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Test.aspx.cs" Inherits="TestBSswitch.Test" %>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
<div class="col-sm-2">
<asp:CheckBox ID="chk1" AutoPostBack="true" Text="Check 1" OnCheckedChanged="chk1_CheckedChanged" runat="server" />
</div>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:CheckBox ID="chk2" Text="Check 2" runat="server" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="chk1" />
</Triggers>
</asp:UpdatePanel>
</asp:Content>
And now this is the Test.aspx.cs file:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace TestBSswitch
{
public partial class Test : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
chk1.InputAttributes.Add("class", "BSswitch");
chk1.InputAttributes.Add("data-size", "mini");
chk1.InputAttributes.Add("data-on-text", "Si");
chk1.InputAttributes.Add("data-off-text", "No");
chk2.InputAttributes.Add("class", "BSswitch");
chk2.InputAttributes.Add("data-size", "mini");
chk2.InputAttributes.Add("data-on-text", "Si");
chk2.InputAttributes.Add("data-off-text", "No");
}
protected void chk1_CheckedChanged(object sender, EventArgs e)
{
if (chk1.Checked)
{
chk2.Enabled = false;
}
else
{
chk2.Enabled = true;
}
}
}
}
In the last file I have posted: "Test.aspx.cs", in the Page_Load event I have to add that attributes manually to the "chk1" in order to obtain the "switch" effect, because if I put that attributes ("data-size", "data-on-text", "data-off-text", and "class") in the aspx editor then it does not work at runtime, and if I delete that lines of code then the CheckedChanged works, but the style of the switch does not work.
Hope I have explain me in more detail, any question please ask me.
I just had to figure out a similar situation. Since bootstrap-switch prevents the CheckedChanged event from firing, I would recommend using jquery and the switchChange event provided by bootstrap-switch instead, like so:
$('#<%= chk1.ClientID%>').on('switchChange.bootstrapSwitch', function (event, state) {
if (state) { //if chk1's switch is set to true
$('#<%= chk2.ClientID%>').bootstrapSwitch('disabled', true);
}
else {
$('#<%= chk2.ClientID%>').bootstrapSwitch('disabled', false);
}
});
I am making a login form for student and teacher. The code for login form is
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="TeacherLogin.aspx.cs" Inherits="E_T_Manager.TeacherLogin" %>
<!DOCTYPE html>
<html lang="en">
<head>
<!-- start: Meta -->
<meta charset="utf-8">
<title>Login Page</title>
<meta name="description" content="Bootstrap Metro Dashboard">
<meta name="author" content="Dennis Ji">
<meta name="keyword" content="Metro, Metro UI, Dashboard, Bootstrap, Admin, Template, Theme, Responsive, Fluid, Retina">
<!-- end: Meta -->
<!-- start: Mobile Specific -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- end: Mobile Specific -->
<!-- start: CSS -->
<link id="bootstrap-style" href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-responsive.min.css" rel="stylesheet">
<link id="base-style" href="css/style.css" rel="stylesheet">
<link id="base-style-responsive" href="css/style-responsive.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800&subset=latin,cyrillic-ext,latin-ext' rel='stylesheet' type='text/css'>
<!-- end: CSS -->
<!-- The HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<link id="ie-style" href="css/ie.css" rel="stylesheet">
<![endif]-->
<!--[if IE 9]>
<link id="ie9style" href="css/ie9.css" rel="stylesheet">
<![endif]-->
<!-- start: Favicon -->
<link rel="shortcut icon" href="img/favicon.ico">
<!-- end: Favicon -->
<style type="text/css">
body { background: url(img/bg-login.jpg) !important; }
</style>
</head>
<body>
<div class="container-fluid-full">
<div class="row-fluid">
<div class="row-fluid">
<div class="login-box">
<form class="form-horizontal" id="frm" runat="server">
<div class="icons">
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="UserName" ErrorMessage="Username is required." ForeColor="#CC0000">Username is required.*</asp:RequiredFieldValidator><br />
<asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ControlToValidate="Pwd" ErrorMessage="Password is required." ForeColor="#CC0000">Password is required.*</asp:RequiredFieldValidator>
</div>
<h2>Login to your account</h2>
<fieldset>
<div class="input-prepend" title="Username">
<span class="add-on"><i class="halflings-icon user"></i></span>
<asp:TextBox class="input-large span10" ID="UserName" runat="server" placeholder="Type UserName"></asp:TextBox>
</div>
<div class="clearfix"></div>
<div class="input-prepend" title="Password">
<span class="add-on"><i class="halflings-icon lock"></i></span>
<asp:TextBox class="input-large span10" ID="Pwd" runat="server" placeholder="Type Password"></asp:TextBox>
</div>
<div class="clearfix"></div>
<div class="input-prepend" title="Role">
<span class="add-on"><i class="halflings-icon lock"></i></span>
<asp:DropDownList ID="Roles" runat="server" class="input-large span10">
<asp:ListItem>Select Role</asp:ListItem>
<asp:ListItem>Teacher</asp:ListItem>
<asp:ListItem>Student</asp:ListItem>
</asp:DropDownList>
</div>
<div class="clearfix"></div>
<div class="button-login">
<asp:Button class="btn btn-primar" ID="T_S_login" runat="server" Text="Login" OnClick="T_S_login_Click" />
</div>
<div class="clearfix"></div>
</form>
<hr>
<h3>Forgot Password?</h3>
<p>
No problem, click here to get a new password.
</p>
</div><!--/span-->
</div><!--/row-->
</div><!--/.fluid-container-->
</div><!--/fluid-row-->
<!-- start: JavaScript-->
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/jquery-migrate-1.0.0.min.js"></script>
<script src="js/jquery-ui-1.10.0.custom.min.js"></script>
<script src="js/jquery.ui.touch-punch.js"></script>
<script src="js/modernizr.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.cookie.js"></script>
<script src='js/fullcalendar.min.js'></script>
<script src='js/jquery.dataTables.min.js'></script>
<script src="js/excanvas.js"></script>
<script src="js/jquery.flot.js"></script>
<script src="js/jquery.flot.pie.js"></script>
<script src="js/jquery.flot.stack.js"></script>
<script src="js/jquery.flot.resize.min.js"></script>
<script src="js/jquery.chosen.min.js"></script>
<script src="js/jquery.uniform.min.js"></script>
<script src="js/jquery.cleditor.min.js"></script>
<script src="js/jquery.noty.js"></script>
<script src="js/jquery.elfinder.min.js"></script>
<script src="js/jquery.raty.min.js"></script>
<script src="js/jquery.iphone.toggle.js"></script>
<script src="js/jquery.uploadify-3.1.min.js"></script>
<script src="js/jquery.gritter.min.js"></script>
<script src="js/jquery.imagesloaded.js"></script>
<script src="js/jquery.masonry.min.js"></script>
<script src="js/jquery.knob.modified.js"></script>
<script src="js/jquery.sparkline.min.js"></script>
<script src="js/counter.js"></script>
<script src="js/retina.js"></script>
<script src="js/custom.js"></script>
<!-- end: JavaScript-->
</body>
</html>
And the code behind is
using System;
using System.Data;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data.SqlClient;
using System.Configuration;
using System.Web.Security;
namespace E_T_Manager
{
public partial class TeacherLogin : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void T_S_login_Click(object sender, EventArgs e)
{
try
{
string connc = #"Data Source=KHAWAR-PC.\SQLEXPRESS;Initial Catalog=ETManager;Integrated Security=True";
SqlConnection con = new SqlConnection(connc);
con.Open();
string query = "SELECT * FROM Users WHERE UserName ='"+UserName.Text+"' and Password='"+Pwd.Text+"' and Roles='"+Roles.SelectedValue+"'";
SqlDataAdapter da = new SqlDataAdapter(query,con);
DataTable dt = new DataTable();
da.Fill(dt);
if (dt.Rows.Count > 0)
{
Session["New"] = UserName.Text;
Response.Redirect("Teacher.aspx");
}
else
{
Response.Write("<script>alert('Invalid UserName or Password or Role Type')</script>");
}
}
catch (Exception)
{
throw;
}
}
}
}
My problem is that I have implemented it for the login to teacher so far but I was failed to do so for student area. Can anybody tell me how to make user login either as a teacher or a student with sessions.
well, I am facing a problem in accessing label control of master page in its code behind file when i build solution it give error:
"the name 'lbllogin' does not exist in current context"
can anyone tell me how can i resolved this issue ....
this is my masterpage.master file code:
<%# Master Language="C#" AutoEventWireup="true" CodeFile="Masterpage.master.cs" Inherits="Masterpage" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>My WebSite</title>
<script type="text/javascript" src="JavaScript/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
function mainmenu() {
$(" #nav ul ").css({ display: "none" });
$(" #nav li ").hover(function () {
$(this).find('ul:first').css({ visibility: "visible", display: "none" }).show(400);
}
, function () {
$(this).find('ul:first').css({ visibility: "hidden" });
});
}
$(document).ready(function(){
mainmenu();
});
</script>
<link rel="stylesheet" type="text/css" href="~/Styles/StyleSheet.css" />
</head>
<body>
<form id="form1" runat="server">
<div id="wrapper">
<div id="banner">
</div>
<div id="navigation">
<ul id="nav">
<li>Home</li>
<li>Review
<ul>
<li>Coffee</li>
<li>Coffee Shops</li>
<li>Coffee Brands</li>
</ul>
</li>
<li>Shop</li>
<li>About</li>
<li>Management</li>
<ul>
<li>Coffee</li>
<li>Users</li>
</ul>
</ul>
<div id="login" align="right">
<asp:Label ID="lbllogin" runat="server" Text="" ForeColor="White"></asp:Label>
<asp:LinkButton ID="LinkButton1" runat="server" ForeColor="White" OnClick="LinkButton1_Click" >LinkButton</asp:LinkButton>
</div>
</div>
<div id="content_area">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
<div id="sidebar">
</div>
<div id="footer">
<p>All rights reserved.</p>
</div>
</div>
</form>
</body>
</html>
and this is my code behined
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class Masterpage : MasterPage
{
//protected global::System.Web.UI.WebControls.Label lbllogin;
//protected global::System.Web.UI.WebControls.LinkButton LinkButton1;
protected void Page_Load(object sender, EventArgs e)
{
lbllogin.Text = "error";
}
protected void LinkButton1_Click(object sender, EventArgs e)
{
}enter code here
}
Try accessing control using 'This' keyword..
e.g
This.lbllogin.Text = "error";
Hope this helps..
I am using kendo ui Mobile ModalView in my aspx page but i am unable to get the required output.On click of button it is showing the same page. I am new to Kendo ui. Please anyone help me.please refer kendo ui mobile modal view and suggest me how to use it in my project.
My code is
<head runat="server">
<title>Untitled Page</title>
<link href="CSS/kendo.common.css" rel="stylesheet" type="text/css" />
<%--<link href="CSS/kendo.dataviz.min.css" rel="stylesheet" type="text/css" />--%>
<link href="CSS/kendo.default.css" rel="stylesheet" type="text/css" />
<link href="CSS/kendo.mobile.all.css" rel="stylesheet" type="text/css" />
<link href="CSS/Example.css" rel="stylesheet" type="text/css" />
<script src="Js/jquery1.7.1.min.js" type="text/javascript"></script>
<script src="CSS/kendo.min.js" type="text/javascript"></script>
<script type="text/javascript">
function closeModalViewLogin() {
$("#modalview-login").data("kendoModalView").open();
}
</script>
<script type="text/javascript">
var app = new kendo.mobile.Application(document.body);
</script>
</head>
<body>
<form id="form1" runat="server">
<div data-role="view" id="modalview-camera" data-title="HTML5 Camera">
<img src="../../content/mobile/modalview/lens.png" class="camera-image" /><br />
<a data-role="button" data-rel="modalview" href="#modalview-login" id="modalview-open-
button">Login</a>
</div>
<div data-role="modalview" id="modalview-login" style="width: 95%; height: 80%;">
<div data-role="header">
<div data-role="navbar">
<span>Login</span>
<a data-click="closeModalViewLogin" data-role="button" data-
align="right">Cancel</a>
</div>
</div>
<ul data-role="listview" data-style="inset">
<li><label for="username">Username:</label> <input type="text" id="username" />
</li>
<li><label for="password">Password:</label> <input type="password" id="password" />
</li>
</ul>
<a data-click="closeModalViewLogin" id="modalview-login-button" type="button" data-
role="button">Login</a>
<a data-click="closeModalViewLogin" id="modalview-reg-button" type="button" data-
role="button">Register</a>
</div>
</form>
</body>
If you look at the example of the code you have used as starting point # http://demos.kendoui.com/mobile/modalview/index.html - you will find out that position of script tags with calls to Kendo framework are located at the bottom of the body tag, if you place them above the body as is shown in your example code, at that stage there is nothing to execute the script on. You need to move them at the correct place. Alternatively use jQuery ready command and call Kendo scripts from there.
$(document).ready(function () {
$("p").text("The DOM is now loaded and can be manipulated.");
});
Additionally, you can initialize the mobile application on the form, instead of the body, since the Views should be direct descendants of the application element.
Change code as per requirements
<html>
<head runat="server">
<title>Model view sample</title>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://cdn.kendostatic.com/2012.2.710/js/kendo.mobile.min.js"></script>
<link href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.mobile.all.min.css" rel="stylesheet" />
<script type="text/javascript">
function closeModalViewLogin() {
$("#modalview-login").data("kendoModalView").open();
}
</script>
</head>
<body>
<div data-role="view" id="modalview-camera" data-title="HTML5 Camera">
<a data-role="button" data-rel="modalview" href="#modalview-login" id="modalview-open-button">Login</a>
<div data-role="modalview" id="modalview-login" style="width: 95%; height: 80%;">
<div data-role="header">
<div data-role="navbar">
<span>Login</span>
<a data-click="closeModalViewLogin" data-role="button" data-align="right">Cancel</a>
</div>
</div>
<ul data-role="listview" data-style="inset">
<li>
<label for="username">Username:</label>
<input type="text" id="username" />
</li>
<li>
<label for="password">Password:</label>
<input type="password" id="password" />
</li>
</ul>
<a data-click="closeModalViewLogin" id="modalview-login-button" data-role="button">Login</a>
<a data-click="closeModalViewLogin" id="modalview-reg-button" data-role="button">Register</a>
</div>
</div>
<script type="text/javascript">
var app = new kendo.mobile.Application(document.body);
</script>
</body>
</html>
This works fine.
Note
1: Model view should always use within <div data-role="view" ...>...</div>
2: Intialize kendo mobile application after document to be ready
(i.e var app = new kendo.mobile.Application(document.body))