My problem is that I want to get the preview of the image after the user chooses one,
but unfortunately nothing is happening. I don't understand why.
Can anyone help me out?
Here is my aspx:
<div class="container-fluid">
<div class="row-fluid">
<div class="btn-toolbar">
<asp:Button runat="server" CssClass="btn btn-primary" ID="OK_btn" Text="OK" OnClick="OK_btn_Click" />
<asp:LinkButton PostBackUrl="ClientMembershipDetailList.aspx"
OnClientClick="return blockConfirm('Are you sure you want to cancel?', event, '')"
CausesValidation="false"
runat="server" CssClass="btn btn-primary" ID="Cancel_btn" Text="Cancel" />
</div>
</div>
<div class="well tab-primary ui-tabs">
<ul class="nav nav-tabs ui-tabs-nav">
<li class="active">Member Details</li>
<li>Dependants</li>
<li>Medical History</li>
</ul>
<div id="myTabContent" class="tab-content">
<div class="tab-pane active in" id="home">
<div class="span6">
<div class="form-horizontal">
<div class="control-group">
<label class="control-label">Client:</label>
<div class="controls with-tooltip">
<asp:HiddenField runat="server" ID="ID_txt" />
<asp:TextBox runat="server" CssClass="input-large" ID="ClientID_Txt" Enabled="false" />
</div>
</div>
<asp:ScriptManagerProx ID="ScriptManager1" runat="server" />
<div class="control-group">
<label class="control-label">Picture</label>
<div class="controls with-tooltip">
<asp:HiddenField runat="server" ID="Picture_Txt" />
<asp:Image runat="server" Width="100" ImageUrl="~/Images/Pictures/PictureNA.jpg"
Height="120" ID="Picture_Img" />
<asp:AsyncFileUpload ID="AsyncFileUpload1" runat="server" OnUploadedComplete="AsyncFileUpload1_UploadedComplete"
UploadingBackColor="SteelBlue" />
<%--<asp:FileUpload runat="server" ID="PictureFileUpload" />--%>
</div>
</div>
and this is the aspx.cs,
protected void AsyncFileUpload1_UploadedComplete(object sender, AjaxControlToolkit.AsyncFileUploadEventArgs e)
{
System.Threading.Thread.Sleep(5000);
if (AsyncFileUpload1.HasFile)
{
string fileName = Server.MapPath("Images/") + Guid.NewGuid().ToString();
AsyncFileUpload1.SaveAs(fileName);
}
}
Make sure your image is inside an Ajax UpdatePanel and then, in your UploadedComplete handle, set the image source to that uploaded image.
For that, you need to save your image in a public visible place in your website.
Example:
protected void AsyncFileUpload1_UploadedComplete(object sender, AjaxControlToolkit.AsyncFileUploadEventArgs e)
{
if (AsyncFileUpload1.HasFile)
{
string fileName = Server.MapPath("Images/") + Guid.NewGuid().ToString();
AsyncFileUpload1.SaveAs(fileName);
Picture_Img.ImageUrl = "~/Images" + Guid.NewGuid().ToString();
}
}
Related
Good evening guys, I would like to get some help with my code, the onclick event in my register button won't fire up if I have a modal in my masterpage, but If I remove it, it works. Any suggestion on what should I do? Here is my code
<div class="container mt-5 mb-5">
<div class="row justify-content-center">
<div class="col-lg-8">
<div class="card">
<header class="card-header">
Log in
<h4 class="card-title mt-2">Sign up</h4>
</header>
<article class="card-body">
<div class="form-row mt-3">
<div class="col form-group">
<asp:Label ID="lblLastname" CssClass="col-form-label" runat="server" Text="Lastname:"></asp:Label>
<asp:TextBox ID="txtLastname" CssClass="form-control" runat="server" MaxLength="30" required="required"></asp:TextBox>
</div>
<div class="col form-group">
<asp:Label ID="lblFirstname" CssClass="col-form-label" runat="server" Text="Firstname:"></asp:Label>
<asp:TextBox ID="txtFirstname" CssClass="form-control" runat="server" MaxLength="30" required="required"></asp:TextBox>
</div>
</div>
<div class="form-row mt-3">
<div class="col form-group">
<asp:Label ID="lblUsername" CssClass="col-form-label" runat="server" Text="Username:"></asp:Label>
<asp:TextBox ID="txtUsername" CssClass="form-control" runat="server" MaxLength="40" required="required"></asp:TextBox>
</div>
<div class="col form-group">
<asp:Label ID="lblPassword" CssClass="col-form-label" runat="server" Text="Password:"></asp:Label>
<asp:TextBox ID="txtPassword" CssClass="form-control" runat="server" TextMode="Password" required="required"></asp:TextBox>
</div>
</div>
<div class="form-row mt-3">
<div class="col form-group">
<asp:Label ID="lblEmail" CssClass="col-form-label" runat="server" Text="Email:"></asp:Label>
<asp:TextBox ID="txtEmail" type="email" CssClass="form-control" runat="server" MaxLength="50" required="required"></asp:TextBox>
</div>
<div class="col form-group">
<asp:Label ID="lblPhoneNumber" CssClass="col-form-label" runat="server" Text="Phone Number:"></asp:Label>
<asp:TextBox ID="txtPhoneNumber" CssClass="form-control" runat="server" MaxLength="11" required="required"></asp:TextBox>
</div>
</div>
<div class="form-row mt-3">
<div class="col form-group">
<asp:Label ID="lblGender" CssClass="col-form-label" runat="server" Text="Gender:"></asp:Label>
<asp:DropDownList ID="ddlGender" CssClass="form-control" runat="server">
<asp:ListItem Value="0">Please select your gender</asp:ListItem>
<asp:ListItem>Male</asp:ListItem>
<asp:ListItem>Female</asp:ListItem>
</asp:DropDownList>
</div>
<div class="col form-group">
<asp:Label ID="lblBirthdate" CssClass="col-form-label" runat="server" Text="Birth Date:"></asp:Label>
<asp:TextBox ID="txtBirthdate" type="date" CssClass="form-control" runat="server" required="required"></asp:TextBox>
</div>
</div>
<div class="form-row mt-4">
<div class="col form-group">
<asp:Button ID="btnClear" CssClass="btn btn-danger btn-block" runat="server" CausesValidation="False" OnClick="btnClear_Click" Text="Reset" UseSubmitBehavior="False" />
</div>
<div class="col form-group">
<asp:Button ID="btnRegister" CssClass="btn btn-success btn-block" runat="server" OnClick="btnRegister_Click" Text="Register" />
</div>
</div>
</article>
<div class="border-top card-body text-center">Have an account? Log In</div>
</div>
</div>
</div>
</div>
And this is my code behind:
protected void btnClear_Click(object sender, EventArgs e) {
txtFirstname.Text = "";
txtLastname.Text = "";
txtUsername.Text = "";
txtPassword.Text = "";
txtEmail.Text = "";
txtPhoneNumber.Text = "";
txtBirthdate.Text = "";
ddlGender.SelectedValue = "0";
Response.Write("<script>alert('Successfully Cleared!')</script>");
}
protected void btnRegister_Click(object sender, EventArgs e) {
SqlConnection conn = new SqlConnection(#"Data Source=(LocalDB)\MSSQLLocalDB;AttachDbFilename=|DataDirectory|eMerch.mdf;Integrated Security=True");
conn.Open();
SqlCommand cmd = new SqlCommand("uspAddUser", conn);
cmd.CommandType = CommandType.StoredProcedure;
cmd.Parameters.AddWithValue("#uName", SqlDbType.NVarChar).Value = txtUsername.Text.Trim();
cmd.Parameters.AddWithValue("#uPassword", SqlDbType.NVarChar).Value = txtPassword.Text.Trim();
cmd.Parameters.AddWithValue("#responseMessage", SqlDbType.NVarChar);
cmd.ExecuteNonQuery();
Response.Write("<script>alert('User Registration Success!')</script>");
conn.Close();
}
and this is my code for the modal in master page:
<div class="modal fade" runat="server" id="LoginModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-center modal-login">
<asp:UpdatePanel ID="upLogin" runat="server" ChildrenAsTriggers="false" UpdateMode="Conditional">
<ContentTemplate>
<div class="modal-content">
<div class="modal-header">
<div class="avatar">
<img src="../Images/web/Avatar_Login.png" alt="Avatar">
</div>
<h4 class="modal-title">Member Login</h4>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body">
<div class="alert alert-danger collapse text-center" id="errorCredentials">
Invalid Credentials
</div>
<div class="form-group">
<label class="col-form-label">Username:</label>
<asp:TextBox ID="txtUsername" runat="server" CssClass="form-control" required="required"></asp:TextBox>
</div>
<div class="form-group">
<label class="col-form-label">Password:</label>
<asp:TextBox ID="txtPassword" runat="server" CssClass="form-control" TextMode="Password" required="required"></asp:TextBox>
</div>
<div class="form-group">
<asp:Button ID="btnLogin" runat="server" CausesValidation="False" Text="Login" CssClass="btn btn-primary btn-lg btn-block login-btn" OnClick="btnLogin_Click"/>
</div>
</div>
<div class="modal-footer">
Forgot Password?
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</div>
Okay i think its because you are using required="required" attribute in your code to make certain fields mandatory. When you click the register button it is causing this check validation on all fields so the ones in your modal div as well as the ones in card div. This is why its not getting to your register_onclick event. (the fields username and password or not validated as they are not entered)
You should be able to prove this by removing the required="required" from the password and username textboxes in the modal.
To add validation you could use the asp:RequiredFieldValidator instead of the required attribute for the textboxes etc you want to to make mandatory. see below
https://learn.microsoft.com/en-us/dotnet/api/system.web.ui.webcontrols.requiredfieldvalidator?view=netframework-4.8
You can also add validation groups using so each button only validates certain controls. see below
https://learn.microsoft.com/en-us/previous-versions/aspnet/ms227424(v=vs.100)
Hope this helps. Please let me know if its worked.
It looks okay from the code but its difficult to tell whats happening without the rest of you code. what does your code for the button click events look like. e.g. below.
protected void btnRegister_Click(object sender, EventArgs e)
{
}
protected void btnClear_Click(object sender, EventArgs e)
{
}
Edit: i have just tried your code in a blank webforms project and it worked for me including the validation checks. so the error must be some where else on your page / in your project. The picture below shows it running and i set a break point on the btnRegister_Click event which its hitting when i press the button after filling in all the required fields.
My Example of your code running
You're doing nothing wrong with UseSubmitBehavior = false
Microsoft says:
Use the UseSubmitBehavior property to specify whether a Button control uses the client browser's submit mechanism or the ASP.NET postback mechanism. By default the value of this property is true, causing the Button control to use the browser's submit mechanism. If you specify false, the ASP.NET page framework adds client-side script to the page to post the form to the server.
https://learn.microsoft.com/en-us/dotnet/api/system.web.ui.webcontrols.button.usesubmitbehavior?view=netframework-4.8
The browser uses form tag and grouping, like in MVC-5 flavour by default =true, because most programmers use MVC with ASP.NET.
You are using ASP.NET button events, not a form event. Consequently, UseSubmitBehavior=false is the correct setting.
I'm trying to upload a file using file upload control in asp.net
control is inside dialog box. On button click event, control is empty.
below is my code. edited here please check it.
<div class="modal fade" id="myModal_family" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body row">
<div class="col-md-12">
<div id="add1">
<div class="fileupload fileupload-new" data-provides="fileupload">
<p>
Title
<asp:TextBox ID="txtTitle" runat="server" CssClass="form-control"></asp:TextBox></p>
<span class="btn btn-white btn-file"><span class="fileupload-new"><i class="fa fa-paper-clip">
</i>Select file</span>
<asp:FileUpload ID="upldfile" runat="server" onchange="UploadFile(this)" ClientIDMode="Static" />
</span>
<p> <br />
<asp:Button ID="btnSave" runat="server" UseSubmitBehavior="false" data-dismiss="modal" OnClick="Upload" Style="display: none" class="btn btn-danger" /></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
javascript here:
<script type="text/javascript">
function UploadFile(fileUpload) {
alert(fileUpload);
if (fileUpload.value != '') {
document.getElementById("<%=btnSave.ClientID%>").click();
}
}
code behind:
public void Upload(object sender, EventArgs e)
{
Response.Write("sfzsfg");
if (upldfile.HasFile) // upldfile is null here
{
}
}
your code is proper I have just put trigger and it working
<asp:UpdatePanel ID="updatePanel1" UpdateMode="Conditional" runat="server">
<ContentTemplate>
<div id="add1">
<div class="fileupload fileupload-new" data-provides="fileupload">
<p>
Title
<asp:TextBox ID="txtTitle" runat="server" CssClass="form-control"></asp:TextBox>
</p>
<span class="btn btn-white btn-file"><span class="fileupload-new"><i class="fa fa-paper-clip"></i>Select file</span>
<asp:FileUpload ID="upldfile" runat="server" onchange="UploadFile(this)" />
</span>
<p>
<br />
<asp:Button ID="btnSave" runat="server" UseSubmitBehavior="false" data-dismiss="modal" OnClick="Upload" Style="display: none" class="btn btn-danger" />
</p>
</div>
</div>
</ContentTemplate>
<%-- <Triggers>
<asp:PostBackTrigger ControlID="btnSave" />
</Triggers>--%>
</asp:UpdatePanel>
rest thing is same as you have posted
Please try.
On an aspx page I have a asp:login control inside a form. When I press the login button everything works well, but when I press the Enter key, the page is reloaded but nothing else happens. The loginbutton handler function is not accessed.
On aspx:
<form id="form1" class="login-form" runat="server" DefaultButton="lgLogin$LoginButton">
<asp:Login ID="lgLogin" runat="server" Width="100%"
FailureText="Some text here"
PasswordRequiredErrorMessage="Some text here"
UserNameRequiredErrorMessage="Some text here"
TextLayout="TextOnLeft"
OnAuthenticate="lgLogin_Authenticate"
DestinationPageUrl="~/Welcome.aspx"
OnLoginError="lgLogin_Error"
DisplayRememberMe="False" >
<LayoutTemplate>
<div class="form-group">
<label class="control-label visible-ie8 visible-ie9">Login</label>
<div class="input-icon">
<i class="fa fa-user"></i>
<asp:TextBox runat="server" type="text" ID="UserName" CssClass="form-control placeholder-no-fix" placeholder="Login" />
</div>
</div>
<div class="form-group">
<label class="control-label visible-ie8 visible-ie9">Password</label>
<div class="input-icon">
<i class="fa fa-lock"></i>
<asp:TextBox runat="server" type="password" ID="Password" CssClass="form-control placeholder-no-fix" placeholder="Password" />
</div>
</div>
<div id="AlertError" runat="server" class="alert alert-danger" visible="false">
<button class="close" data-close="alert"></button>
<span>
<asp:Label ID="FailureText" runat="server" ></asp:Label>
</span>
</div>
<div class="form-actions">
<asp:Button type="submit" class="btn blue pull-right" ID="LoginButton" runat="server" CommandName="Login" Text='Login now' />
</div>
</LayoutTemplate>
<TextBoxStyle CssClass="form-control placeholder-no-fix"/>
<LoginButtonStyle CssClass="btn blue pull-right" />
</asp:Login>
</form>
The lgLogin_authenticate void is only accessed when the LoginButton is pressed.
EDIT
It's solved. Actually, it was working well. The problem was on a .js file that it was loaded within this page. It was capturing the Enter key to do some checks, but in the end it wasn't calling the submit button.
protected void Page_Load(object sender, EventArgs e)
{
button1.Focus();
}
try setting the AutoPostback attribute of the asp textbox to true
http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.textbox.autopostback.aspx
i need the users of my web system to do uploads ( up 4 ).
the upload itself its working , but i dont want all for box appering at start, so tried to hide the 2nd ,3rd and 4th upload boxes until the user need them .
here the aspx code part
<fieldset>
<div class="frm tam">
</div>
<div class="lin">
<asp:FileUpload ID="FileUpload1" runat="server" /></div>
<div class="lin">
<asp:FileUpload ID="FileUpload2" runat="server" Visible="false" /></div>
<div class="lin">
<asp:FileUpload ID="FileUpload3" runat="server" Visible="false" /></div>
<div class="lin">
<asp:FileUpload ID="FileUpload4" runat="server" Visible="false" /></div>
<div class="lin">
<asp:Button ID="btnUpload" runat="server" Text="Upload"OnClick="btnUpload_Click" />
<asp:Button ID="btnAdd" runat="server" Text="ADD File" OnClick="btnAdd_Click" />
<asp:Button ID="btnRem" runat="server" Text="Remove File" OnClick="btnRem_Click" />
</div>
</fieldset>
and the code behind to show and hide the boxes
protected void btnAdd_Click(object sender, EventArgs e)
{
if (FileUpload2.Visible == false)
{
FileUpload2.Visible = true;
}
else if (FileUpload3.Visible == false)
{
FileUpload3.Visible = true;
}
else if (FileUpload4.Visible == false)
{
FileUpload4.Visible = true;
}
}
protected void btnRem_Click(object sender, EventArgs e)
{
if (FileUpload4.Visible == true)
{
FileUpload4.Visible = false;
}
else if (FileUpload3.Visible == true)
{
FileUpload3.Visible = false;
}
else if (FileUpload2.Visible == true)
{
FileUpload2.Visible = false;
}
}
and when i click on Add File, the new box appear but the filepaths selected on the other boxes are cleared. Can i avoid this clear ?
*edit: i´m using net framework 4.0 .
The file get lost on postback. Alternatively, you can achieve that with JavaScript
<div id="div1">
<asp:FileUpload ID="FileUpload1" runat="server" />
</div>
<div id="div2" style="display:none"> <!-- visibility:hidden -->
<asp:FileUpload ID="FileUpload2" runat="server" />
</div>
<div id="div3" style="display:none">
<asp:FileUpload ID="FileUpload3" runat="server" />
</div>
<div id="div4" style="display:none">
<asp:FileUpload ID="FileUpload4" runat="server" />
</div>
Then put each FileUpload control in each of the divs.
<input type="button" valud="Add" onclick="addControls()" />
Then use JavaScript to make them visible
function addControls()
{
document.getElementById('div2').style.display = 'inline-block';
//$('#div2').show(); <--- JQuery
}
The problem here is that uploading files works slightly differently to most input controls...
Rather than posting the file path value that is entered, it actually posts the file content so
on postback this value gets lost.
It seems to me like your best bet is to do something with javascript on the client to show/hide these upload controls. This would also be a better user experience as the user wouldn't have to wait for postback each time.
You could do this with jQuery...
http://jsfiddle.net/BAwfH/2/
<fieldset>
<div class="frm tam">
</div>
<div class="lin">
<asp:FileUpload ID="FileUpload1" runat="server" />
</div>
<div class="lin">
<asp:FileUpload ID="FileUpload2" runat="server" />
</div>
<div class="lin">
<asp:FileUpload ID="FileUpload3" runat="server" />
</div>
<div class="lin">
<asp:FileUpload ID="FileUpload4" runat="server" />
</div>
<div>
<asp:Button ID="btnUpload" runat="server" Text="Upload"OnClick="btnUpload_Click" />
<asp:Button ID="btnAdd" class="add-button" runat="server" Text="ADD File" OnClick="btnAdd_Click" />
<asp:Button ID="btnRem" runat="server" Text="Remove File" OnClick="btnRem_Click" />
</div>
<script type="text/javascript">
$(document).ready(function(){
var lines = $('.lin');
lines.hide();
lines.filter(':first').show();
$('.add-button').click(function(){
lines.filter(':hidden:first').show();
if(lines.filter(':hidden').length == 0)
$(this).hide();
});
});
Im fairly new to umbraco, master pages and all that, but im catching on..
I seem to have this weird problem.. I have a set of master pages with content with umbraco cms..
In the master pages i have a common menu and a login button.. This login button fires up an overlay, wich is contained in a div within the same masterpage. There is another overlay to create a new user on that same master page.. Problem is, the button OnClick in the login overlay does not fire.. Funny thing is, the required property on my textboxes does fire... You know, the message popping up saying you must enter something! But my custom validator does nothing :S
Here is the script in the header of my masterpage:
<script runat="server">
private void btnLogin_Click(object sender, EventArgs e)
{
Session["failedLogin"] = false;
string mail = tbLoginMail.Text.Trim();
string pass = tbLoginPass.Text;
tbLoginMail.Text = "TEEEEEEST!";
PageUtil.User = PageUtil.ValidateCredentials(mail, pass);
if (PageUtil.User == null)
{
Session["failedLogin"] = true;
}
if (Page.IsValid)
Server.Transfer(Page.ResolveClientUrl("/"));
}
private void UserLoginResponse(object source, ServerValidateEventArgs args)
{
if (Session["failedLogin"] != null)
{
if ((bool)Session["failedLogin"])
{
args.IsValid = false;
}
}
}
</script>
Not even the text in the textbox gets set to teeeesst! Any1 has any suggestions?
Here is the body containing the 2 divs:
<body>
<a name="LoginLink" href="#overlay" class="submitbtn"><%= PageUtil.IsLoggedIn() ? "Log ud" : "Log Ind" %></a>
<form runat="server">
<div id="overlay">
<div id="popup">
<!-- ANY CONTENTS -->
<a href="">
<img class="close_button" src="/media/Images/close.png" /></a>
<div id="login" class="login">
<asp:CustomValidator ID="CustomValidator1" runat="server" ValidationGroup="login" ErrorMessage="Forkert e-mail eller password" OnServerValidate="UserLoginResponse" Display="Dynamic"></asp:CustomValidator><br />
<label>E-mail</label>
<asp:TextBox ID="tbLoginMail" type="text" TabIndex="1" class="input" ValidationGroup="login" placeholder="email eller brugernavn" required="true" runat="server" /><br>
<br>
<label>Password</label>
<asp:TextBox ID="tbLoginPass" type="password" class="input" TabIndex="2" required="true" ValidationGroup="login" runat="server" /><br>
<br>
<asp:CheckBox ID="cbRememberMe" type="checkbox" TabIndex="3" runat="server" />Keep me logged in
<asp:Button ID="submitbtn" Text="Login" TabIndex="4" OnClick="btnLogin_Click" runat="server" ValidationGroup="login" CausesValidation="true" /><br />
Ikke oprettet? Opret bruger!
</div>
</div>
</div>
<div id="overlay_signup">
<div class="overlay popup" style="height: 500px;">
<a href="#">
<img class="close_button" src="/media/Images/close.png" /></a>
<div class="login">
<label>Navn</label>
<asp:TextBox ID="createUserName" type="text" TabIndex="1" ValidationGroup="signUp" class="input" placeholder="Navn" required="true" runat="server" /><br>
<br>
<label>Email</label>          
<asp:TextBox ID="createUserMail" type="text" class="input" ValidationGroup="signUp" placeholder="e-mail" TabIndex="2" required="true" runat="server" /><br>
<br>
<label>Password</label>
<asp:TextBox ID="tbCreateUserPass" type="password" ValidationGroup="signUp" class="input" TabIndex="2" required="true" runat="server" /><br>
<br>
<asp:Button runat="server" ID="submit1" class="submitbtn" ValidationGroup="signUp" Text="SignUp" TabIndex="4" />
</div>
</div>
</div>
<div id="box">
<div id="head">
<umbraco:Macro ID="Macro1" Alias="MenuBar" runat="server"></umbraco:Macro>
</div>
<div class="header">
<umbraco:Item ID="Item2" Field="header" runat="server" />
</div>
<div id="content">
<umbraco:Item ID="Item1" Field="bodyText" runat="server" />
<div id="contentDiv">
<asp:ContentPlaceHolder ID="pageContent" runat="server" />
</div>
</div>
<div class="dotSeperator">...</div>
<div id="footer">
<p class="footerText">| Martin Stendorf Jensen | Copyright ® 2013 | mstendorf#outlook.com | +4527126901 |</p>
</div>
</div>
</form>