Implementing Ajax components with ASP.net Components - asp.net

it contains ajax uploader and text box and label
what i need to do it
when upload complete what i wrote in text box go to label without refresh page
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:AjaxFileUpload ID="AjaxFileUpload1" runat="server"
onuploadcomplete="AjaxFileUpload1_UploadComplete" />
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
</div>
</form>
</body>
</html>
and here is my C# code
protected void AjaxFileUpload1_UploadComplete(object sender,AjaxControlToolkit.AjaxFileUploadEventArgs e)
{
string path = Server.MapPath("~/nn/") + e.FileName;
AjaxFileUpload1.SaveAs(path);
Label1.Text = TextBox1.Text;
}
the problem is that the ajax controller event cant feel .net components
any help ?

I believe that you need to wrap your code in an update panel control.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:AjaxFileUpload ID="AjaxFileUpload1" runat="server"
onuploadcomplete="AjaxFileUpload1_UploadComplete" />
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>

Related

gridview in a formtag which is in a content place holder tag doesnt accept

<!DOCTYPE html>
<asp:Content ID="content1" ContentPlaceHolderID="head" runat="server">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:GridView ID="gvapproveweekend" runat="server" BackColor="#DEBA84" BorderColor="#DEBA84" BorderStyle="None" BorderWidth="1px" CellPadding="3" CellSpacing="2" OnRowCommand = "OnRowCommand">
<Columns>
<asp:ButtonField ButtonType="Button" CommandName="Approve" Text="Approve" />
<asp:ButtonField ButtonType="Button" CommandName="Reject" Text="Reject" />
</Columns>
</asp:GridView>
<asp:SqlDataSource ID="SqlData" runat="server"></asp:SqlDataSource>
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
</div>
</form>
</body>
</html>
</asp:Content>
I commented the Form tag and tried executing but getting this error
"Control 'head_gvapproveweekend' of type 'GridView' must be placed inside a form tag with runat=server. "
If i keep the form for the sake og grid another error is thrown "A page can have only one server-side Form tag. "
Need a solution for this thanks in advance

Apply css to divs inside the DataList in asp.net

I am confused if we can apply css to divs that are inside the DataList.I have a stylesheet and a aspx page that is inheriting a master page.The master page has a contentplaceholder.And the content placeholder is where i have defined my DataList.Now i have many divs inside the datalist that needs styling.How do i give them style form stylesheet NOT from the aspx page itself like <div style=" height:200px " >.It works but i need to define the css in the stylesheet not in the aspx.
Here my datalist
<asp:Content ID="Content1" ContentPlaceHolderID="ccont" Runat="Server">
<div id="ccont">
<asp:DataList ID="mydatalist" ItemStyle-CssClass="lft_c_down" runat="server">
<ItemTemplate>
<div id="lft_c">
<div id="lft_c_top">
<asp:Image runat="server" ImageUrl='<%#DataBinder.Eval(Container.DataItem,"ipath")%>' Height="250px" Width="300px" />
<br/>
</div>
<div class="lft_c_down">
<b>Product Name:</b>
<asp:Label ID="lbl2" Text='<%#DataBinder.Eval(Container.DataItem,"products") %>' runat="server" />
<br/>
<b>brand:</b>
<asp:Label ID="lbl1" Text='<%#DataBinder.Eval(Container.DataItem,"brand") %>' runat="server" />
<br/>
<b>Price:</b>
<asp:Label ID="Label1" Text='<%#DataBinder.Eval(Container.DataItem,"price") %>' runat="server" />
</div>
</div>
</ItemTemplate>
</asp:DataList>
</div>
As you can see i have a div at the starting of the contentplaceholder whose id is ccont and i can apply css there from stylesheet.Its not working for the divs inside the datalist.
EDIT
Here's my css
#lft_c_down
{
background-color:Aqua;
color:Red;
}
DataList's Default rendered html is Table. That is why your css is not working. If you dont want table style, Try Repeater this css will work.
Please try this.
Place a ContentPlaceHolder in the Head section of your Masterpage like this;
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ContentPlaceHolder ID="ccont" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
</body>
</html>
Then, in the Webform, put the link to the external CSS file in head sections placeholder like this;
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<link href="24857957.css" rel="stylesheet" />
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ccont" runat="server">
<div id="ccont">
<asp:DataList ID="mydatalist" ItemStyle-CssClass="lft_c_down" runat="server">
<ItemTemplate>
<div id="lft_c">
<div id="lft_c_top">
<asp:Image runat="server" ImageUrl='http://placehold.it/140x140' Height="140px" Width="140px" />
<br/>
</div>
<div class="lft_c_down">
<b>Product Name:</b>
<asp:Label ID="lbl2" Text='<%#DataBinder.Eval(Container.DataItem,"product") %>' runat="server" />
<br/>
<b>brand:</b>
<asp:Label ID="lbl1" Text='<%#DataBinder.Eval(Container.DataItem,"brand") %>' runat="server" />
<br/>
<b>Price:</b>
<asp:Label ID="Label1" Text='<%#DataBinder.Eval(Container.DataItem,"price") %>' runat="server" />
</div>
</div>
</ItemTemplate>
</asp:DataList>
</div>
</asp:Content>

AJAX GridView Not Updating

I am using a update panel and placing the SqlDataSource as well as the GridView inside the contenttemplate
i've set timercontrol as the asyncpostback trigger but the gridview does not update when i change a record from the related table in sqlserver plus what seems even more crazy is that the deleted record still shows up in the grid view when i do refresh(full post back of page)
Also i've disabled caching for the datasource however this aint wrking HELP!!!!!
here's my code
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs"
Inherits="_Default" %>
<!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>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
</div>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="true">
<ContentTemplate>
<div id="ajx">
<div>
<asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="<%$ ConnectionStrings:busConnectionString %>"
SelectCommand="SELECT * FROM [reserv]" EnableCaching="false" CacheDuration="0" CacheExpirationPolicy="Absolute" EnableViewState="false"></asp:SqlDataSource>
</div>
<div>
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
DataSourceID="SqlDataSource1" EnableModelValidation="True">
<Columns>
<asp:BoundField DataField="SeatNo" HeaderText="SeatNo"
SortExpression="SeatNo" />
<asp:BoundField DataField="Status" HeaderText="Status"
SortExpression="Status" />
</Columns>
</asp:GridView>
</div>
<div>
<asp:Timer ID="Timer1" runat="server" Interval="1000" ontick="Timer1_Tick">
</asp:Timer>
</div>
<div>
<asp:Label ID="Label1" runat="server" Text=""></asp:Label>
</div>
</div>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Timer1"/>
</Triggers>
</asp:UpdatePanel>
</form>
</body>
</html>
You'll have to manually databind the datasource and gridview on each tick of the timer.
Add the following to your Timer1_Tick event:
protected void Timer1_Tick(object sender, EventArgs e)
{
SqlDataSource1.DataBind();
GridView1.DataBind();
}

Calendar extender is not working

I have a requirement to show edit panel as second row of a datagrid upon addnew link click. for this I have taken a div which has set display:none. I am able to show as second row upon addnew link click. now the actual problem starts.
this div got a text box which is tied to calendar extender to behave as a claendar upon textbox click. but calendar is not showing up when the html of invisible div is inserted as second row of grid. please let me know if anyone need code for better understanding the problem. any help will be appreciated.
In your gridview put a templatedfield instead of a div. make that templated field hold a textbox and calender extender.
<asp:GridView ID="GridView1" runat="server">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:TextBox ID="textbox1" runat="server"></asp:TextBox>
<asp:CalendarExtender ID="CalendarExtender1" TargetControlID="textbox1" runat="server">
</asp:CalendarExtender>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
but If you want it when your inserting you should put
<asp:GridView ID="GridView1" runat="server">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:TextBox ID="textbox1" runat="server"></asp:TextBox>
<asp:CalendarExtender ID="CalendarExtender1" TargetControlID="textbox1" runat="server">
</asp:CalendarExtender>
</ItemTemplate>
<InsertItemTemplate>
<asp:TextBox ID="textbox1" runat="server"></asp:TextBox>
<asp:CalendarExtender ID="CalendarExtender1" TargetControlID="textbox1" runat="server">
</asp:CalendarExtender>
</InsertItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
I hope this helps.
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%# Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="AjaxControlToolkit" %>
<!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 src="jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
function AddCalendars()
{
//The last parameter should be the TargetControl's id. If you use "TextBox1", the TextBox1 would be associated.
var elem = $(".deneme");
for (var a = 0; a < elem.length; a++)
{
if ($find("CalendarExtender" + elem[a].id))
{
$find("CalendarExtender" + elem[a].id).dispose();
}
}
for (var i = 0; i < elem.length; i++)
{
$create(AjaxControlToolkit.CalendarBehavior, { "id": "CalendarExtender" + elem[i].id }, null, null, elem[i]);
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<%--the dummy calendar which is used to download the related script file.--%>
<asp:TextBox ID="dummyTextBox" runat="server" Style="display: none"></asp:TextBox>
<AjaxControlToolkit:CalendarExtender ID="dummyCalendarExtender" runat="server" Enabled="True"
TargetControlID="dummyTextBox">
</AjaxControlToolkit:CalendarExtender>
<%--the dummy calendar which is used to download the related script file.--%>
<asp:Button ID="Button1" OnClientClick="AddCalendars();return false" runat="server"
Text="CreateCalendarFromClient" /><br />
input:<input id="deneme1" type="text" class="deneme" /><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
TextBox:
<asp:TextBox ID="deneme2" runat="server" cssclass="deneme" ClientIDMode="Static"></asp:TextBox>
</div>
</form>
</body>
</html>

How can I make a validation icon appear beside a asp:textbox?

Using this code, I can get a very cheesy red lettered message.
<form id="frmValidator" action="required.aspx" method="post" runat="server">
Enter Your Name:
<asp:TextBox id="txtName" runat="server" />
<asp:RequiredFieldValidator id="valTxtName" ControlToValidate="txtName" ErrorMessage="Please enter your name!" runat="server" />
<br />
<asp:button id="btnSubmit" text="Submit" runat="server" />
</form>
Is there some way for me to have a green icon (I have that image so I imagine I just have to reference it) sort of fade into existence beside the control?
Thanks a bunch. :)
You set the ErrorMessage property to a link to an image
e.g. ErrorMessage='<img src="error.gif">'
See this MSDN article.
You can do this
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!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>
<style type="text/css">
</style>
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server"
BorderStyle="None" ControlToValidate="TextBox1" CssClass="newStyle1"></asp:RequiredFieldValidator>
</div>
<asp:Button ID="Button1" runat="server" Text="Button" />
</form>
</body>
</html>
.newStyle1
{
background-image: url('Pic.png');
width: 500px;
height: 300px;
}
So basically just don't have any text for the error message and set the css property in the validation controls to have a css class.

Resources