I have a follow-on question to How to display an image based on SelectedValue in a GridView?
What I would really like to do is have a ViewImage button on my GridView control so that when that is clicked, the image is displayed on a new page in a new browser window. How would I do that? I'm thinking perhaps do I need to create a
<asp:ButtonField>
How do I handle the click and how do I get the image to diplay on a new form in a new web browser window?
Thanks very much for looking.
You can use TemplateColumn, in that TemplateColumn you can define a button where you put javascript function to open new window.
Example:
<asp:TemplateField>
<ItemTemplate>
<input type="button" onclick="javascript:ShowImageInNewPage('PageToShowImage.aspx?tradeId=<%# Eval("TradeId") %>');" />
</ItemTemplate>
</asp:TemplateField>
The "ShowImageInNewPage" function is a custom function you declare to popup/open new window with the selected image url.
In PageToShowImage.aspx, declare an img tag:
<asp:Image ID="imgBlah" runat="server" />
In code behind of PageToShowImage.aspx:
protected void Page_Load(object sender, EventArgs e)
{
// this is querystring from GridView page
if(Request.QueryString["tradeId"] != null)
{
imgBlah.Src = "GetImage.aspx?entityId=" + tradeId + "&entityType=T";
}
else
{
imgBlah.Src = "~/images/no-image.jpg"; // set no image
}
}
HTH
I'm hoping that you're dealing with browser supported image formats. Assuming you are, you don't need a ButtonField. One approach would be to use an <asp:HyperLink> in a TemplateColumn, as Arief suggested.
<asp:TemplateField>
<ItemTemplate>
<asp:HyperLink ID="hyperLink1" runat="server" NavigatUrl="UrlToYourViewImagePage" Text="View Image" />
</ItemTemplate>
</asp:TemplateField>
If you want the image to open in a new window, build a window.open call for each HyperLink's NavigateUrl.
Related
How to use images in grid view using asp.net?
Actually i want use images in the place of text for example in the place of Edit and Delete i want use some images related to text. Is that possible to use images please help me
Please define your template like this way
<asp:TemplateField HeaderStyle-Width="40">
<ItemTemplate>
<asp:ImageButton ID="ButtonDelete" runat="server"
ImageUrl="~/Imags/delete.png" OnClick="ButtonDelete_Click" ToolTip="Delete"
CommandArgument='<%#Bind("UserId")%>'/>
</ItemTemplate>
</asp:TemplateField>
Code Behind
protected void ButtonDelete_Click(object sender, EventArgs e)
{
ImageButton button = sender as ImageButton;
DeleteUserById(Convert.ToInt32(button.CommandArgument));
}
I'm new to asp.net development. I would like to ask if it is possible for one link button to have two or more commands?
What I want to happen is that my link button should be able to handle the edit and update commands. Once i click the link in my grid view, it will show the data on its respective controls (i.e textbox for name will have the data of what I clicked) then once I edit any data on the textbox and click the same link it will update and save in the database.
<asp:TemplateField HeaderText="ID">
<ItemTemplate>
<asp:LinkButton ID="lnkEdit" runat="server" CommandArgument='<%#Eval("ID")%>' CommandName="Update"
HeaderText="ID" SortExpression="ID" Text='<%#Eval("ID")%>'>
</asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
Thanks in advance. Please help!. :)
Its not possible to have multiple commandname for one linkbutton,but when you click linkbutton for editing you can change commandname to "Update".I think this will solve your problem.For changing the commandname for linkbutton refer to this link.
You don't need to create two commands.
First set command name to Edit. Hence on clicking it. It will show data in controls.
Also in click event set command name to Update.
And after updating again set command name to Edit.
Write click event code like this.
if(CommandName=="Edit")
{
//Fill Value in controls
// Set CommandName to Update
}
else if(CommandName=="Update")
{
// Update value in database
// Set command name to Edit
}
Alternatively you can use two linkbuttons with one visible at a time.
Hope this help.
Hi Jenny use code like this:-
<asp:TemplateField HeaderText="ID">
<ItemTemplate>
<asp:LinkButton ID="lnkEdit" runat="server" CommandArgument='<%#Eval("ID")%>' CommandName="Update" Onclick="lnkEdit_Click"
HeaderText="ID" SortExpression="ID" Text='<%#Eval("ID")%>'>
</asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
In aspx.cs Page write code like below:-
protected void lnkEdit_Click(object sender, EventArgs e)
{
LinkButton btn = (LinkButton )sender;
int Id = Convert.ToInt32(btn.CommandArgument.ToString());
if(btn.CommandName=="Edit")
{
// Write here code for edit
btn.CommandName="Update";
}
else if(btn.CommandName=="Update")
{
// Write here code for Update
btn.CommandName="Edit";
}
}
Hope this help.
I have two buttons, preview and Save. With help of preview button user can view the data based on the format and then can save.
But when preview is clicked, one textbox attached to ajaxcontrol (Calender) becomes empty and user have to fill the date before saving. How to handle this? On preview click i get the details to show the data in layout.
<asp:TextBox ID="txtDate" ReadOnly="true" runat="server"></asp:TextBox>
<div style="float: right;">
<asp:ImageButton ID="imgcalender1" runat="server" ImageUrl="~/images/calendar.png"
ImageAlign="Bottom" />
<asp:CalendarExtender ID="ajCal" TargetControlID="txtpublishDate" PopupButtonID="imgcalender1"
runat="server">
</asp:CalendarExtender>
<asp:RequiredFieldValidator ID="RequiredFieldValidator2" ValidationGroup="group1" runat="server" ControlToValidate="txtDate"
ForeColor="Red" Font-Bold="true" ErrorMessage="*"></asp:RequiredFieldValidator>
</div>
<asp:Button ID="btnPreview" runat="server" Text="Preview" OnClick="btnPreview_Click" />
<asp:Button ID="btnsubmit" runat="server" ValidationGroup="group1" Text="Save" OnClick="btnsubmit_Click" />
Use Page.IsPostback() in your aspx code (server-side). Like this:
private void Page_Load()
{
if (!IsPostBack)
{
// the code that only needs to run once goes here
}
}
This code will only run the first time the page is loaded and avoids stepping on user-entered changes to the form.
From what I am understanding the preview button is causing a postback and you do not want that, try this on your preview button:
<asp:button runat="server".... OnClientClick="return false;" />
similarly this also works:
YourButton.Attributes.Add("onclick", return false");
Edit:
it seems the answer to the user's question was simple change in the HTML mark up of the preview button
CausesValidation="False"
you can put your code in
Page_Init()
{
//put your code here
}
instead of
Page_Load()
{
//code
}
I had the same problem and the solution above of "CausesValidation="False"" and even adding "UseSubmitBehavior="False"" DID NOT work - it still called "Page_Load" method.
What worked for me was adding the following line up front in Page_Load method.
if (IsPostBack) return;
I am mentioning this if it helps someone (I meant to comment above but StackOverflow did not allow me to comment because I am a new user - hence a new reply).
Try adding this to the buttons properties in the aspx page.
OnClientClick="return false;"
For my the #tgolisch answer worked better, maybe it's because i'm still a rookie.
I was trying to load a simple captcha in my WebForm and end up using a Reference Type in the Page_Load event and in a Button Click event (for a code snippet).
In the end i only have to edit some things and it's done:
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
var captchaText = generateCaptchaCode(5);
lblCaptcha.Text = captchaText;
}
}
protected void btnCheckCaptcha_Click(object sender, EventArgs e)
{
if (txtCaptchaCode.Text == lblCaptcha.Text)
lblMessage.Text = "Right input characters";
else
lblMessage.Text = "Error wrong characters";
}
form1.Action = Request.RawUrl;
Write this code on page load then page is not post back on button click
is it possible to set the src of a image with a button click.
Each of my buttons represents a picture that should be displaying in my "image" area. I need the image Area's SRC property to be affected by the button click.
Im using visual studio 2012 with c#.
-Edit : Using AJAX Update panel in visual studio 2012 with C#
If a postback is acceptable to you for every image change, you may do something like :
In C#:
protected void btnClick(object sender, EventArgs e) {
Button btn = (Button) sender;
switch (btn.ID) {
case "btn1": img.ImageUrl = "<Image_Url>"; break;
case "btn2": img.ImageUrl = "<Image_Url>"; break;
}
}
In ASPX Page:
<asp:Image ID="img" runat="server" />
<asp:Button ID="btn1" runat="server" OnClick="btnClick" />
<asp:Button ID="btn2" runat="server" OnClick="btnClick" />
Yes. You will be able to accomplish this by using JavaScript and attaching a click handler to the button (onclick="loadImage1()").
loadImage1 function would require you to write the javascript necessary to access the src attribute of the image element and alter it.
You can achieve this with plain javascript (see above concept), or with some javascript library such as jQuery. For cross browser compatibility and to save you from having to write your cross browser safe logic, I would suggest jQuery to handle this.
<img id="img1" src="initialimagehere.jpg"/>
And then you can change the src attribute like this:
$("#img1").attr("src","newimagehere.jpg");
jQuery: this link
I noticed if I had not first specified a value for ImageUrl in my .aspx code, I could not then set it in the .aspx.cs code.
Ie, if I had my .aspx code as:
<asp:Image runat="server" id="imgPickLg0101" class="ImgSzLarge" />
I could not set it in the code behind.
However, if I first specified a value for ImageUrl:
<asp:Image runat="server" id="imgPickLg0101" class="ImgSzLarge" ImageUrl="../Images/somepic.jpg" />
Then I could set it in the .aspx.cs code:
imgPickLg0101.ImageUrl = "../Images/DifferentPicture.jpg";
Inside aspx:
<img id="imagenCabecera" runat="server" />
And inside aspx.vb:
imagenCabecera.Attributes("src") = "url-image.jpg"
Hi I know how to acheive this in hyperlink by setting target = _blank , how can i do this using image button control , below is my code:
<asp:ImageButton OnClick="test_Click" ImageUrl="/images/contactUs/directionbtn.png" ID="test" runat="server" ValidationGroup="group2" />
<asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server"
ControlToValidate="txtPostcode1" ErrorMessage="Postcode is required" ValidationGroup="group2"></asp:RequiredFieldValidator>
<br />
Code behind:
protected void test_Click(object sender, ImageClickEventArgs e)
{
Response.Redirect(String.Format("http://maps.google.co.uk/maps?saddr={0}&daddr=&daddr=Wigan+WN6+0HS,+United+Kingdom&iwloc=1&dq=Tangent+Design", txtPostcode1.Text));
}
Any help or advice will be highly appreciated
protected void Page_Load() {
ControlID.Attributes.Add("target", "_blank");
}
If that doesn't work, try adding this to your ImageButton:
<asp:ImageButton runat="server" OnClientClick="window.open('http://url/to/open');" ></asp:ImageButton>
I just figure it out..
On Page_Load event, put
this.Form.Target = "_blank"; // Will set all link's target to a new window
Then for example in a image button Click event, you put:
Response.Redirect("http://stackoverflow.com");
It will simply open this page in a new tab. Try it :)
you could use the Attributes collection to add "target","_blank"
this should add the target attribute to the anchor link surrounding the image
Add target="_blank" to onClientClick will do the trick
In the code behind.
imgbtn.OnClientClick = "target='blank'";
And you're done.
Try this:
<asp:ImageButton OnClick="test_Click" ImageUrl="/images/contactUs/directionbtn.png" ID="test" runat="server" ValidationGroup="group2" OnClientClick="form1.target ='_blank';" />
this.Form.Target = "_blank";
This way the client can see what he wants in a new page, since the server and what is available and his account in the site available at the beginning PageLoad