I applied mask with AJAX toolkit in asp.net for textbox but textbox can't be affected with this mask, here is my code:
<%# Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit"
TagPrefix="ajax" %>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<ajax:MaskedEditExtender TargetControlID="TextBox1" Mask="99-9999-9999999-999"
MessageValidatorTip="true" OnFocusCssClass="MaskedEditFocus"
OnInvalidCssClass="MaskedEditError"
MaskType="Number" InputDirection="LeftToRight" AcceptNegative="None"
DisplayMoney="None"
ErrorTooltipEnabled="True" runat="server" ID="mskD" />
</div>
</form>
You need to include the ToolkitScriptManager instead of the default ASP.NET ScriptManager
<ajax:ToolkitScriptManager ID="ScriptManager1" runat="server" />
<div>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<ajax:MaskedEditExtender runat="server"
TargetControlID="TextBox1"
Mask="99-9999-9999999-999"
MessageValidatorTip="true"
OnFocusCssClass="MaskedEditFocus"
OnInvalidCssClass="MaskedEditError"
MaskType="Number"
InputDirection="RightToLeft"
AcceptNegative="Left"
DisplayMoney="Left"
ErrorTooltipEnabled="True"/>
</div>
You might need to include the AjaxMin.dll in your project in order for the ToolkitScriptManager to work.
Related
I have a very simple application. I am trying to upload the file using File upload control of ASP.net. Below is my entire .cs code and .aspx code:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace TestFileUpload1
{
public partial class WebForm1 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void uploadFile_Click(object sender, EventArgs e)
{
if (UploadImages.HasFiles)
{
foreach (HttpPostedFile uploadedFile in UploadImages.PostedFiles)
{
uploadedFile.SaveAs(System.IO.Path.Combine(Server.MapPath("~/Images/"), uploadedFile.FileName));
//listofuploadedfiles.Text += String.Format("{0}<br />", uploadedFile.FileName);
}
}
}
}
}
My .aspx code:
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="TestFileUpload1.WebForm1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Test web site</title>
<script src="Scripts/jquery-1.11.0.js"></script>
<script src="Scripts/jquery.mobile-1.4.5.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div>
<asp:FileUpload runat="server" ID="UploadImages" AllowMultiple="true" />
<asp:Button runat="server" ID="uploadedFile" Text="Upload" OnClick="uploadFile_Click" />
<asp:Label ID="listofuploadedfiles" runat="server" />
</div>
</div>
</form>
</body>
</html>
whenever I try to upload a file, I get "False" for UploadImages.HasFiles.
Above is full working example.
As soon as I remove one of these script tags :
<script src="Scripts/jquery-1.11.0.js"></script>
<script src="Scripts/jquery.mobile-1.4.5.js"></script>
my code starts working and I get "true" for UploadImages.HasFiles when I try to upload a file.
I am using .net framework 4.7.2
I need to keep these two script tags in my code because of the GUI and this is an old application where these tags are used in all the pages.
I also tried to wrap the control in a update panel and that didn't work either. below is the changed .aspx page. although, I want my original code to work. I don't want to use ajax, but I just tried to use it because it is suggested as one of the solution
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="TestFileUpload1.WebForm1" %>
<%--<%# Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp"%>--%>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Test web site</title>
<script src="Scripts/jquery-1.11.0.js"></script>
<script src="Scripts/jquery.mobile-1.4.5.js"></script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<div>
<div>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:FileUpload runat="server" ID="UploadImages" AllowMultiple="true" />
</ContentTemplate>
<Triggers>
<asp:PostBackTrigger ControlID="uploadedFile" />
</Triggers>
</asp:UpdatePanel>
<asp:Button runat="server" ID="uploadedFile" Text="Upload" OnClick="uploadFile_Click" />
<asp:Label ID="listofuploadedfiles" runat="server" />
</div>
</div>
</form>
</body>
</html>
below is the image of false value that I am getting in code behind:
Any help will be highly appreciated.
All I had to do is put data-ajax ="false" in form tag and that fixed the issue.
<form id="form1" runat="server" data-ajax ="false">
Use a update panel and wrap your controls inside it. Then add the button controlID as a trigger (be sure its a PostBackTrigger) to the update panel. To test be sure to put a break point on the uploadFile_Click event so you can step through and see the values..
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<Triggers>
<asp:PostBackTrigger ControlID="btnSignaureOfRequestor" />
</Triggers>
<ContentTemplate>
<table>
<tr> <td class="tdText" colspan="4">
<asp:FileUpload ID="fileUpload" runat="server" Width="50%" />
</td>
</tr>
<tr>
<td> <asp:Button ID="btnSignaureOfRequestor" runat="server" Text="Submit Request" Visible="true" OnClientClick="return confirm('Are you sure you want to continue?');" OnClick="btnSignaureOfRequestor_Click" />
</td>
</tr>
</table>
</ContentTemplate>
</asp:UpdatePanel>
Try the below, removed allow multiple and add update mode conditional (see confirm case/syntax of these changes as I'm just writing it in notepad)
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<div>
<div>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" updateMode="Conditional">
<ContentTemplate>
<asp:FileUpload runat="server" ID="UploadImages" />
<asp:Button runat="server" ID="uploadedFile" Text="Upload" OnClick="uploadFile_Click" />
</ContentTemplate>
<Triggers>
<asp:PostBackTrigger ControlID="uploadedFile" />
</Triggers>
</asp:UpdatePanel>
<asp:Label ID="listofuploadedfiles" runat="server" />
</div>
</div>
I have 2 files :-
Items.aspx with the list of items in a grid view, A button(to open a form for adding new item), and a div with id testing.
code Inside Items.aspx
<%# Page Title="" Language="C#" MasterPageFile="~/Basic.Master" AutoEventWireup="true" CodeBehind="Items.aspx.cs" Inherits="FlowerShopAdminPanel.Items" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="header" runat="server">
<div id="dvGrid" class="container">
<!-- This contains the gridview -->
</div>
<div id="testing"></div>
<script>
function openDialog($itemid,$categoryid) {
$('#testing').dialog({
modal: true,
dialogClass: "no-close",
open: function () {
$(this).load('AddItem.aspx?itemid=' + $itemid+'&categoryid='+$categoryid);
$(".ui-dialog-titlebar-close", ui.dialog | ui).hide();
},
height: 500,
width: 500,
title: 'Add Item'
});
}
</script>
<style>
.image {
height: 30vh;
}
.no-close .ui-dialog-titlebar-close {
display: none;
}
</style>
</asp:Content>
This loads a form to add item in a jquery modal. we can upload image to that item using a Button . Above function is on another aspx form in which I am
AddItem.aspx
<div>
<asp:Label runat="server" Text="Category Name"></asp:Label>
<asp:DropDownList runat="server" ID="category_ddl"></asp:DropDownList>
</div>
<div>
<asp:Label runat="server" Text="Item Name"> </asp:Label>
<asp:TextBox runat="server" ID="itemname_txt"></asp:TextBox>
</div>
<div>
<asp:Label runat="server" Text="Description"></asp:Label>
<asp:TextBox runat="server" TextMode="MultiLine" Rows="5" Columns="50" ID="description_txt"></asp:TextBox>
</div>
<div>
<asp:Label runat="server" Text="Main Image"></asp:Label>
<asp:FileUpload runat="server" ID="mainimage_fileupload"/><br />
<asp:Image runat="server" ID="mainimage_img" Visible="false" />
<asp:Button runat="server" ID="fileupload_btn" Text="Upload" OnClick="fileupload_btn_Click" />
<asp:Label runat="server" ID="filename_lbl" Visible="false" ForeColor="Red" Font-Bold="true"></asp:Label>
</div>
<div>
<asp:Label runat="server" Text="Active"> </asp:Label>
<asp:CheckBox runat="server" ID="isActive_chk"/>
</div>
<div>
<asp:Button runat="server" ID="addItem_btn" Text="Add Item" OnClick="addItem_btn_Click"/>
<asp:Button runat="server" ID="cancel_btn" Text="Cancel" OnClick="cancel_btn_Click"/>
</div>
</div>
</form>
Whenever I upload the image it opens up as a normal aspx page. Basically, Whenever the aspx page is refreshed, it opens up as a normal web page. I always want to open it in the jQuery modal.
Please help in resolving this issue.
Thank you
I was working with this simple web page and happened to put some 's to correct the styling of my page and suddenly when got back to programming in the .cs file, things are strange. All the code is showing a similar error msg:
Error 2 The name 'TextBox1' does not exist in the current context d:\ADO_NETprojects\mywebsite\Default2.aspx.cs
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" `enter code here`Inherits="Default2" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div runat="server">
<div>
<asp:ListBox ID="ListBox1" runat="server" AutoPostBack="True"
onselectedindexchanged="ListBox1_SelectedIndexChanged" Width="179px" style="margin-left:100px; margin-bottom:20px;">
</asp:ListBox>
</div>
<hr/>
<div>
ListBoxItems
<asp:TextBox ID="TextBox1" runat="server" style="margin-left:20px; margin-top:20px;"></asp:TextBox>
</div>
<div>
<asp:Button ID="Button1" runat="server" onclick="Button1_Click"
style="height: 26px; margin-left:100px; margin-top:15px;" Text="ListsBoxItems" />
</div>
<hr/>
<div>
DeleteItems:
<asp:TextBox ID="TextBox2" runat="server" style="margin-top:10px; margin- left:25px;"></asp:TextBox>
</div>
<hr/>
<div>
<asp:DropDownList ID="DropDownList1" runat="server"
style="margin-top:20px; margin-left:100px; width:200px;"
AutoPostBack="True" onselectedindexchanged="DropDownList1_SelectedIndexChanged">
</asp:DropDownList>
</div>
<div>
DropDownList:
<asp:TextBox ID="TextBox3" runat="server" style="margin-left:2px; margin-top:15px;"
AutoPostBack="True"></asp:TextBox>
</div>
<hr/>
</div>
</form>
</body>
</html>
right-click on the aspx file, then choose "convert to web application" and then, the designer.cs file is regenerated
I need to add a calendar control with its associated buttons in asp.net with C#.
I have the code as below.
<asp:TextBox ID="txtDateFrom" CssClass="text-small" runat="server"
BorderWidth="1px" ToolTip="Click to choose date"></asp:TextBox>
<asp:Label ID="lblFromError" CssClass="Error" runat="server"
Text="*" Visible="False"></asp:Label>
<asp:Label ID="lblTo" runat="server" Text="To" ForeColor="Black"></asp:Label>
<asp:CalendarExtender ID="txtDateFrom_CalendarExtender" runat="server"
TargetControlID="txtDateFrom"
Format="yyyy-MM-dd" TodaysDateFormat="yyyy d, MMMM">
</asp:CalendarExtender>
You will need to add an ImageButton and set the CalendarExtender's PopupButtonID property to the ID of the ImageButton.
This is from the AjaxControlToolkit's sample web site:
<ajaxToolkit:ToolkitScriptManager runat="Server" ID="ScriptManager1" />
<b>Calendar with an associated button:</b><br />
<asp:TextBox runat="server" ID="Date5" />
<asp:ImageButton runat="Server" ID="Image1"
ImageUrl="~/images/Calendar_scheduleHS.png"
AlternateText="Click to show calendar" /><br />
<ajaxToolkit:CalendarExtender ID="calendarButtonExtender" runat="server"
TargetControlID="Date5" PopupButtonID="Image1" />
you can use the JQuery plugin for Calendar. Check this topic
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script>
$(document).ready(function() {
$("#datepicker").datepicker();
});
</script>
<div type="text" id="datepicker"></div>
Do like this
1. Add a ToolkitScriptManager
2. Add a TextBox Control
3. Add a CalendarExtender
Here is the complete code :
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>
<asp:TextBox ID="txtStartDate" runat="server"></asp:TextBox>
<asp:CalendarExtender
ID="CalendarExtender1"
TargetControlID="txtStartDate"
runat="server" />
I did everything correct and its not showing me any error. I just want to allow user to enter numbers but its allowing all the characters.
Here is my source
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:FilteredTextBoxExtender ID="FilteredTextBoxExtender1" runat="server" TargetControlID="TextBox1" FilterType="Numbers">
</asp:FilteredTextBoxExtender>
<asp:Label ID="Label1" runat="server" Text="Phone No"></asp:Label>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
You should use a ToolkitScriptManager instead of a ScriptManager
You could also try ValidChars instead of FilterType
<asp:FilteredTextBoxExtender ID="FilteredTextBoxExtender1" runat="server"
TargetControlID="TextBox1" ValidChars="0123456789.,">
</asp:FilteredTextBoxExtender>
I always use FilterMode="ValidChars" or FilterMode="InvalidChars".
Then use the ValidChars="0123456789.," or InvalidChars="0123456789.," to do the job
<asp:FilteredTextBoxExtender
ID="FilteredTextBoxExtender1"
runat="server"
TargetControlID="TextBox1"
FilterMode="ValidChars"
ValidChars="0123456789.,">
</asp:FilteredTextBoxExtender>