Totally n00b question, Im making my first ASP.NET website, with the added twist of using IUI framework that makes things look nice on the iPhone.
How do I hookup the whitebutton to go and verify the user and password on the database?
How do I make the brower go to a different window if the password was good else...
How do I append a message like "password incorrect" on the current page?
I am a c# programmer by default and totally lost in this new field. Please not I cannot make an it doesnt seem to work with IUI.
Master
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="Cover_Plus.SiteMaster" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head runat="server">
<title></title>
<meta name="viewport" id="viewport" content="width=device-width, user-scalable=0, initial-scale=1.0" />
<link href="iui/iui.css" rel="stylesheet" type="text/css" />
<link title="default" href="iui/t/default/default-theme.css" rel="stylesheet" type="text/css" />
<script type="application/x-javascript" src="iui/iui.js"></script>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<link rel="apple-touch-icon" href="img/touch-icon-iphone.png" />
<link rel="apple-touch-icon" sizes="72x72" href="img/touch-icon-ipad.png" />
<link rel="apple-touch-icon" sizes="114x114" href="img/touch-icon-iphone4.png" />
<link rel="apple-touch-startup-image" href="img/startup.png" />
<asp:ContentPlaceHolder ID="HeadContent" runat="server"> </asp:ContentPlaceHolder>
</head>
<body>
<asp:ContentPlaceHolder ID="MainContent" runat="server"/>
</body>
</html>
Default.aspx
<%# Page Title="Cover Plus" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Cover_Plus._Default" %>
<%--Header--%>
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
<script type="text/javascript">
</script>
</asp:Content>
<%--Body--%>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<div class="toolbar">
<h1 id="pageTitle">System Login</h1>
</div>
<div class="panel" selected="true" id="loginPanel">
<h2>Login to Cover Plus</h2>
<fieldset>
<div class="row">
<label>Name</label>
<input type="text" name="ident" text="hhh" placeholder="Your login" />
</div>
<div class="row">
<label>Password</label>
<input type="password" name="password" placeholder="Your password" />
</div>
</fieldset>
<form id="Form1" title="Index" name="formname" method="POST">
<a class="whiteButton" type="submit" href="javascript:formname.submit()">Login me in!</a>
</form>
</div>
</asp:Content>
UPDATE :
I think a screenshot may be helpful.
The problem is that "whitebutton" seems to be what I have to use, its not like an asp.net server side button, thus I cannot simply double click to hookup the click event.
I tried Humpty Dumptys method, but it doesnt call the Verify() method in my .CS file at all. I tried with just onclick="Login();" instead of Javascript:Login(); both dont work.
UPDATE 2:
The works at the bottom, but as soon as I replace the Input to Textbox see what happens ...
Many Thanks In Advance
Final Solution :
<div class="toolbar">
<h1 id="pageTitle">Login</h1>
</div>
<div id="pnlLogin" class="panel" selected="true" >
<h2>Login Details</h2>
<form ID="fLogin" runat="server" class="panel" selected="true" >
<fieldset>
<div class="row">
<label>Name</label>
<asp:TextBox id="txtUserName" runat="server" placeholder="Your username" />
</div>
<div class="row">
<label>Password</label>
<asp:TextBox id="txtPassword" textmode="Password" runat="server" placeholder="Your password" />
</div>
</fieldset>
<asp:LinkButton id="btnLogin" class="whiteButton" text="Log me in!" runat="server" onclick="Login_Clicked" />
</form>
</div>
Basically the form was decorated with "class=panel" and the asp: style controls were used to connect to the backend.
You have to validate the user details on your buttonclick event.
If you have a database fields to username and password you can create a function which accept username and password and verify against the database.
eg. in your button click event you can do something similar
var status = verifyUser(username,password);//might return Boolean value
if(!status)
somelable.text = "username or password incorrect";
else
// do something - redirect to some page may be
also have a read at this article about Validating ASP.NET Server Controls and if you willing to use asp.net membership provider,Use Membership in ASP.NET and Validating User Credentials Against the Membership User
if use still not understand ...
modify your code something similar to this
your fronted
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<fieldset>
<div class="row">
<label>Name :</label>
<asp:TextBox ID="txbUserName" runat="server"></asp:TextBox>
</div>
<div class="row">
<label>Password :</label>
<asp:TextBox ID="txbPassword" runat="server"></asp:TextBox>
</div>
<div class="row">
<asp:Button ID="btnLogin" runat="server" Text="Button" CssClass ="whiteButton"
onclick="btnLogin_Click" />
<asp:Label ID="lblError" runat="server" Text="Label"></asp:Label>
</div>
</fieldset>
</asp:Content>
Your Backend
protected void btnLogin_Click(object sender, EventArgs e)
{
var username = txbUserName.Text;
var password = txbPassword.Text;
if(!string.IsNullOrEmpty(username) && !string.IsNullOrEmpty(password))
{
if(!VerifyUser(username,password))
{
lblError.Text = "username or password incorrect";
}
}
}
// I recommend this function to be in a separate class but for example
public static Boolean VerifyUser(string username,string password)
{
//
return true or false
}
WebForms, as it appears you're using, generally has a page-wide <form runat="server">. This will usually be defined as part of the MasterPage (~/Site.master in your case) and can usually be found just a few lines after the <body> tag.
If your site has this form, communication with the server is then handled through server-side Controls (marked with runat="server"):
<asp:TextBox ID="Username" Text="hhh" runat="server"
placeholder="Your Login" />
<asp:TextBox ID="Password" TextMode="Password" runat="server"
placeholder="Your password" />
<asp:LinkButton ID="Login" Text="Login me in!" runat="server"
CssClass="whitebutton" OnClick="Login_Clicked" />
Each server-side control represents regular HTML that it generates during rendering, so the above would become something like this:
<input id="ct100_Username" name="ct100$Username" type="text" value="hhh" placeholder="Your Login" />
<input id="ct100_Password" name="ct100$Password" type="password" placeholder="Your password" />
<a id="ct100_Login" class="whitebutton" href="javascript:__doPostBack('ct100$Login','')">Login me in!</a>
(Note: The actual client-side IDs and names may be a lot different than the examples here.)
The ID attributes of these server-side controls are generally mapped to properties/fields of the Page class, so this.Username will return the TextBox instance representing the 1st <asp:TextBox />.
With AutoEventWireup="True", as you have, you would then define the method that was specified in the OnClick of the <asp:LinkButton /> as part of the Page class:
protected void Login_Clicked(object sender, EventArgs e)
{
var user = Username.Text;
var pass = Password.Text;
if (ValidateUser(user, pass))
// etc.
}
Related
I keep getting this syntax error on the browser. I am not sure what am I missing here.
Basically I am trying to make a request to an external web api which takes an array of checked check box values as parameters passed in query parameter.
Here is my javascript.
function lookup() {
var query = document.getElementById("sform").value;
// var res = PageMethods.lookupfromjs_Click(query, onSuccess, onError);
var dttypeList;
$('#Button1').click(function() {
$('input[type=\"checkbox\"]').each(function(){
dttypeList.push(this.name);
alert( $.toJSON(dttypeList));
});
});
}
Here is the html
<!DOCTYPE html>
<head runat="server">
<title></title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js" type="text/javascript"></script>
<script src="Scripts/lookup.js" type="text/javascript"></script>
<script src="Scripts/getdatatype.js" type="text/javascript"></script>
</head>
<body>
<section class="webdesigntuts-workshop">
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true" >
</asp:ScriptManager>
<div>
<asp:TextBox type="search" name="search" id="sform" placeholder="What are you looking for?" runat="server" />
<asp:TextBox type="search" name="hdnText" id="hdnText" runat="server" />
<button id="Button1" onclick="lookup()" type="button">Search</button>
</div>
<div>
<p> </p>
</div>
<div>
<button id="Getdtbtn" type="button" onclick="getDatatypes()">Get Datatypes</button>
</div>
</form>
</section>
</body>
</html>
Does the lookup function even need to be declared? With the limited HTML snippet you posted, I tried to cobble something closer together resembling what you may have been trying to achieve:
var query = document.getElementById('sform').value;
var dtypeList = [];
$('#Button1').click(function() {
$('input[type="\checkbox\"]').each(function() {
dtypeList.push(this.name);
alert(JSON.stringify(dtypeList));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="sform">
<label for="Hello">Hello</label>
<input type="checkbox" name="Hello">
<label for="World">World</label>
<input type="checkbox" name="World">
<button id="Button1" type="button">Search</button>
</form>
This still loops through all of the checkboxes and spits them out to an alert once you click the button.
Also, please refer to this post about $.toJSON(): https://stackoverflow.com/a/7759630/3611025
I have a aspx page with a placeholder in an update panel. The user control is attached to the placeholder depending the value of a dropdown on the page. The user control loads correctly, but it seems that the click event of the button is not firing. I've put a breakpoint in the .js file, but it never goes into the js function. Not sure if the javascript is even loaded.
The aspx page:
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Page.aspx.cs" Inherits="UserControlTest.Page" %>
<%# Register Src="~/TestUserControl.ascx" TagPrefix="uc1" TagName="TestUserControl" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script src="Scripts/testUserControl.js"></script>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="sm1" runat="server"></asp:ScriptManager>
<div>
<h4>This is the page</h4>
<div class="form-group">
<label class="col-md-5 control-label" for="selUserControl">Enquiry Type <span class="glyphicon glyphicon-asterisk pull-right" style="color:red"></span> </label>
<div class="col-md-7">
<asp:DropDownList ID="selUserControl" CssClass="form-control reqrd" runat="server" OnSelectedIndexChanged="selUserControl_SelectedIndexChanged" AutoPostBack="True"></asp:DropDownList>
</div>
</div>
<div id="divUserControl">
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:PlaceHolder runat="server" ID="phUserControl" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="selUserControl" />
</Triggers>
</asp:UpdatePanel>
</div>
</div>
</form>
</body>
</html>
The aspx.cs page:
protected void selUserControl_SelectedIndexChanged(object sender, EventArgs e)
{
TestUserControl uc = (TestUserControl)LoadControl("~/TestUserControl.ascx");
uc.ID = "ucUserControl";
phUserControl.Controls.Add(uc);
}
The .ascx page:
<%# Control Language="C#" AutoEventWireup="true" CodeBehind="TestUserControl.ascx.cs" Inherits="UserControlTest.TestUserControl" %>
<div>
<h4>This is the User Control</h4>
</div>
<div class="form-group">
<div class="col-md-7">
<input type="button" id="btnPress" class="btn" value="Press!" />
</div>
</div>
The .js file:
$(document).ready(function () {
$("#btnPress").click(function () {
alert('Hi There from User Control');
});
});
By the time your js is run, #btnPress doesn't exist on the page (or at least the original #btnPress doesn't. #DelightedD0D is right. I'd look into using event delegates and attaching them to your document. This way you can attach/detach as many #btnPress as you'd like and your clicks will bubble to document and be handled by the delegate.
$(document).on('click', '#btnPress', function(){
alert('Hi There from User Control');
});
Im programming my first asp.net website
To work on iPhone safari.
My code in default.aspx body :
<div id="pnlLogin" class="panel" selected="true" >
<h2>Login Details</h2>
<form ID="fLogin" runat="server" class="panel" selected="true" >
<fieldset>
<div class="row">
<label>Name</label>
<asp:TextBox id="txtUserName" runat="server" placeholder="Your username" />
</div>
<div class="row">
<label>Password</label>
<asp:TextBox id="txtPassword" textmode="Password" runat="server" placeholder="Your password" />
</div>
</fieldset>
<asp:LinkButton id="btnLogin" class="whiteButton" text="Log me in!" runat="server" onclick="Login_Clicked" />
</form>
</div>
In backend .cs file of default.aspx :
protected void Login_Clicked(object sender, EventArgs e)
{
var username = txtUserName.Text;
var password = txtPassword.Text;
if (username == "masi" && password == "pass")
{
Response.Redirect("ControlPanel.aspx");
}
}
Full Page Source from DESKTOP Safari :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head><title>
Cover Plus
</title><meta id="viewport" name="viewport" content="width=device-width, user-scalable=0, initial-scale=1.0" /><link href="iui/iui.css" rel="stylesheet" type="text/css" /><link title="default" href="iui/t/default/default-theme.css" rel="stylesheet" type="text/css" />
<script type="application/x-javascript" src="iui/iui.js"></script>
<link rel="apple-touch-icon" href="img/touch-icon-iphone.png" /><link rel="apple-touch-icon" sizes="72x72" href="img/touch-icon-ipad.png" /><link rel="apple-touch-icon" sizes="114x114" href="img/touch-icon-iphone4.png" /><link rel="apple-touch-startup-image" href="img/startup.png" />
<script type="text/javascript">
function login()
{
var isVerified = Verify();
if (isVerified) {
ident.setAttribute("placeholder", "valid");
}
}
</script>
</head>
<body>
<div class="toolbar">
<h1 id="pageTitle">Login</h1>
</div>
<div id="pnlLogin" class="panel" selected="true" >
<h2>Login Details</h2>
<form method="post" action="Default.aspx" id="fLogin" class="panel" selected="true">
<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="/wEPDwUKLTY2NzcyMzEwM2Rk+CbfIXzzsip63MXaBjBxcQhbraDzpmAHkc6FH4cZIiE=" />
</div>
<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['fLogin'];
if (!theForm) {
theForm = document.fLogin;
}
function __doPostBack(eventTarget, eventArgument) {
if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
theForm.__EVENTTARGET.value = eventTarget;
theForm.__EVENTARGUMENT.value = eventArgument;
theForm.submit();
}
}
//]]>
</script>
<div class="aspNetHidden">
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWBALC/9DxDQKMrfuqAgKOsPfSCQKRnIq9D4GV4RtvQeooslP0bkLhJVOPoPu6Gt6b0rGrW9P8fPbK" />
</div>
<fieldset>
<div class="row">
<label>Name</label>
<input name="ctl00$MainContent$txtUserName" type="text" id="MainContent_txtUserName" placeholder="Your username" />
</div>
<div class="row">
<label>Password</label>
<input name="ctl00$MainContent$txtPassword" type="password" id="MainContent_txtPassword" placeholder="Your password" />
</div>
</fieldset>
<a id="MainContent_btnLogin" class="whiteButton" href="javascript:__doPostBack('ctl00$MainContent$btnLogin','')">Log me in!</a>
</form>
</div>
</body>
</html>
Problem :
It works fine on desktop safari/chrome, I type masi/pass and press the button and goes to new page, but on iPhone it gives me a javascript error in the console and does nothing.
it says :
Javascript: Error
undefined
ReferenceError: Can't find variable: __doPostBack
I am completely clueless as to what to do.
Update - Solution:
I randomly deleted the little bit of javascript I had in the header (that did next to nothing) and now its working fine.
The problem is the default way ASP.net treats unknown browsers... such as the iPhone. Even though it would be nice to assume unknown browsers could use javascript... you can specify what capabilities that a browser has in the section of web.config or machine.config.
Check out http://slingfive.com/pages/code/browserCaps/ for an updated browsercaps config file for asp.net
Here is an example of a case to match GECKO Based Browsers (Netscape 6+, Mozilla/Firefox, ...)
Reference: this question and answer.
<case match="^Mozilla/5\.0 \([^)]*\) (Gecko/[-\d]+)(?'VendorProductToken' (?'type'[^/\d]*)([\d]*)/(?'version'(?'major'\d+)(?'minor'\.\d+)(?'letters'\w*)))?">
browser=Gecko
<filter>
<case match="(Gecko/[-\d]+)(?'VendorProductToken' (?'type'[^/\d]*)([\d]*)/(?'version'(?'major'\d+)(?'minor'\.\d+)(?'letters'\w*)))">
type=${type}
</case>
<case> <!-- plain Mozilla if no VendorProductToken found -->
type=Mozilla
</case>
</filter>
frames=true
tables=true
cookies=true
javascript=true
javaapplets=true
ecmascriptversion=1.5
w3cdomversion=1.0
css1=true
css2=true
xml=true
tagwriter=System.Web.UI.HtmlTextWriter
<case match="rv:(?'version'(?'major'\d+)(?'minor'\.\d+)(?'letters'\w*))">
version=${version}
majorversion=0${major}
minorversion=0${minor}
<case match="^b" with="${letters}">
beta=true
</case>
</case>
</case>
I'm using ajax togglebuttonextender to set image to radibuttons.
In javascript when I change the status of radibutton, togglebuttonextender status is not changed..
is there a way to set checked false of togglebuttonextender in js?
Please refer to the following example which demonstrates in javascript how to:
Get the state of a togglebuttonextender,
Change the state of a togglebuttonextender, and
Set the togglebuttonextender to false.
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %>
<%# Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<!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>
<script type="text/javascript">
function getcheckstate() {
var e = $find("tb");
alert(e._element.checked);
}
function change() {
var e = $find("tb");
e._element.click();
//e._element.checked = (!e._element.checked); // <--- Dont use this method because it requires you hover your mouse over the image in order for it to update.
}
function changetofalse() {
var e = $find("tb");
if (e._element.checked) e._element.click();
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<asp:CheckBox ID="CheckBox1" runat="server" />
<asp:ToggleButtonExtender
ID="tbe"
TargetControlID="CheckBox1"
ImageWidth="22"
ImageHeight="22"
CheckedImageUrl="http://findicons.com/files/icons/1050/pidgin_old_tango_smilies/24/good.png"
UncheckedImageUrl="http://findicons.com/files/icons/1050/pidgin_old_tango_smilies/24/bad.png"
runat="server"
BehaviorID="tb" />
<br /><br />
<input type="button" onclick="getcheckstate()" value="Get Checkbox Checked State" />
<br />
<input type="button" onclick="change()" value="Change Checkbox Checked State" />
<br />
<input type="button" onclick="changetofalse()" value="Set Checkbox Checked State To False" />
</div>
</form>
</body>
</html>
Call other extender's _checkChangedHandler() method on click of radio button in JavaScript.
i have the following function in default.aspx.....i have webusercontrol which have 10 checkboxes and 1 button .... i want when i click on button1 of user control then it can access the function of default.aspx ...page ...if i dragged the usercontrol to default.aspx
Normally if i use 10 checkboxes and 1 button in default.aspx then it works fine ... if i use 10checkboxes and 1button in usercontrol then drag that usercontrol in default.aspx then it will not work ..
what was the problem ...how to fix this ?
<%# Page Language="VB" AutoEventWireup="false" CodeFile="Default2.aspx.vb" Inherits="Default2" %>
<%# Register src="WebUserControl.ascx" tagname="WebUserControl" tagprefix="uc1" %>
<!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>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<uc1:WebUserControl ID="WebUserControl1" runat="server" />
</div>
</form>
<script src ="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
<script type="text/javascript">
$("#'<%=Button1.ClientID %>'").click(function(){
var vCheckedCBCount = $("input:checkbox").filter(function(index){
return $(this)[0].checked == true;
}).length;
if(vCheckedCBCount > 1)
{
alert('You cannot check more than 1 check box.');
return false;
}
});
</script >
</body>
</html>
Try this one -->
------------------------------------ASPX Code------------------------------------------------------------------------------
ASPX:
<%# Register Src="~/UserControl/WebUserControl.ascx" TagName="ucCheckBox" TagPrefix="UC" %>
<UC:ucCheckBox ID="ucCheckBox" runat="server" />
JAVASCRIPT:
$(document).ready(function(){
$("input:submit[id$='btnSubmit']").click(function(){
var vCheckedCBCount = $("input:checkbox").filter(function(index){
return $(this)[0].checked == true;
}).length;
if(vCheckedCBCount > 5)
{
alert('You cannot check more than 5 check box.');
return false;
}
});
});
------------------------------------ASPX Code------------------------------------------------------------------------------
-------------------------------User control code--------------------------------------
UserControl:
<%# Control Language="C#" AutoEventWireup="true" CodeFile="WebUserControl.ascx.cs" Inherits="UserControl_WebUserControl" %>
<asp:CheckBox ID="CheckBox1" runat="server" /><br />
<asp:CheckBox ID="CheckBox2" runat="server" /><br />
<asp:CheckBox ID="CheckBox3" runat="server" /><br />
<asp:CheckBox ID="CheckBox4" runat="server" /><br />
<asp:CheckBox ID="CheckBox5" runat="server" /><br />
<asp:CheckBox ID="CheckBox6" runat="server" /><br />
<asp:CheckBox ID="CheckBox7" runat="server" /><br />
<asp:CheckBox ID="CheckBox8" runat="server" /><br />
<asp:CheckBox ID="CheckBox9" runat="server" /><br />
<asp:CheckBox ID="CheckBox10" runat="server" /><br />
<asp:Button ID="btnSubmit" runat="server" Text="Continue" />
-------------------------------User control code--------------------------------------
Try
$("#'<%=Button1.ClientID %>'").click(function(){
});
A usercontrol implements INamingContainer Interface. So in order to get the elements using id you need to get the runtime generated id by using .ClientID.
When you added the usercontrol to default.aspx, the ID of Button1 changed to userControl1_Button1
So you need to change $("#Button1").click(function() so that it will always have the correct name for the button:
$("# + <%=Button1.ClientID %> +").click(function()