Image button rendering using code behind in c# - c#

I am trying to dynamically render image buttons. I need to display the below button
<asp:ImageButton runat="server" ID="ImageButton3" ImageUrl="~/Images/edit.png" OnClick="ImageButton3_click" CommandArgument='text'/>
The text is dynamically populated value. I have displayed the button as follow
<input type='button' id='ImageButton3' src='Images/edit.png' >
in the server side. but I am not able to add the onclick event and CommandArgument in server side.
I have to use the html tags for rendering.Can anyone help me? Thanks in advance

Related

How to prevent page reload on asp.net LinkButton OnClick function

I'm using the <asp:LinkButton />’s OnClick function on the server side to fetch data. I'm using OnClientClick to open a popup and populate data. But the page refreshes when I click the button. Please see the attached code and help me to fix the issue.
<asp:LinkButton ID="lnkEdit_Bill" runat="server" CssClass="lnkAddressButton" OnClientClick="javascript:ShowDialog_Both_New('Invoice','edit');" OnClick="lnkEdit_Bill_Click_new" >Edit</asp:LinkButton>
Google event.preventDefault(), I believe i've used that previously to prevent a postback. Also remove the OnClick, if that's not what you want, and just use OnClientClick.
Bro, if you don't want the postback, just fire the javascript. and you definitely don't need the server control. which you can present your code as below:
Edit
Let's says if you still insist want to user ASP.NET server control of LinkButton, then you can do something like this:
<asp:LinkButton ID="lnkEdit_Bill" runat="server" CssClass="lnkAddressButton"
OnClientClick="ShowDialog_Both_New('Invoice','edit'); return false;" >
Edit
</asp:LinkButton>

C# code behind for Button Click Event, ASP.NET

I'm working with HTML provided by coworker in .aspx and I need to program in .aspx.cs(C#) the functionality of the button he created using HTML.
The code I'm dealing with is as follows:
<div>
<button style="padding: 10px; margin-bottom: 10px;" class="w3-round w3-blue">Ship</button>
<button style="padding: 10px; margin-bottom: 10px;" class="w3-round w3-blue">Rate</button>
</div>
I'm new to HTML but in looking at solutions to similar questions I often see the HTML code for a functional button looking more like
<button type="submit" runat="server" id="btnLogin" class="button" onclick="btnLogin_Click();">
and sometimes with an
<asp:
at the beginning. I've tried simply adding the runat and onclick fields to the HTML that correspond with a C# method in the aspx.cs code behind but I haven't been able to make the button click actually trigger the method in the code behind. I've assumed that if I add the method with the name that follows onclick to the C# aspx.cs code then it would simply execute this upon the clicking of the button but I'm clearly mistaken.
Can I program the button's functionality in the code behind without changing the HTML provided to me? Or must I alter the HTML first and if so how?
You could probably get away with adding the runat="server" attribute to your buttons but I've never tried it and frankly, using proper web controls would be the best way to go.
Replacing them shouldn't change the look and feel of the page at all. Just add CssClass="xxx" to apply the css if there is any, otherwise they render to standard html elements anyway.
Your markup should look something like this:
<asp:Button runat="server" id="btnLogin" Text="Log In" OnClick="btnLogin_Click" />
The matching event handler in your code would look like this:
protected void btnLogin_Click(object sender, EventArgs e)
{
// Here's where you do stuff.
}
you need to replace the
onclick="btnLogin_Click();"
with
onclick="btnLogin_Click"
because the onClick property of asp.net buttons need to contain the name of the function it calls in the aspx.cs file and not the actual call.
<button type="submit" runat="server" id="btnLogin" onserverClick="btnLogin_Click1">login </button>
just replace the onClick with onserverClick
My suggestion would be to change the HTML control to <asp:Button /> and have the event handler wired up by ASP.NET. Syntax would look something like below
<asp:Button ID="Test" runat="server" Text="Button" OnClick="Test_Click" />
There are ways to reach asp.net code behind handler from html controls. You could try adding onserverclick handler or you could do a postback with arguments and add handler to the postback in contructor.
Few links to help you with it:
https://forums.asp.net/t/1650304.aspx?Calling+code+behind+function+from+a+html+button
calling server side event from html button control
If you are using a tool like Visual Studio/Express bring up the page in question (the aspx page).
From the controls toolbar drag a button over to the page.
If you double click the button in design view it will automatically create the event handler in code behind.
The button control has a couple of properties OnClick and OnClientClick. Use OnClientClick to trigger any JavaScript on the page.
Hope it helps

Asp .Net Web Forms removing postback from asp:linkbutton with inner HTML tags

I have created my first fully functional listview with custom action buttons, that worked fine when I used asp:buttons, but I need the buttons to be icons, so I tried inserting HTML tags inside, since it can't be done out of the box, I used as:linkbuttons controls to achieve the desired look.
What it does is that the buttons trigger several actions that populate controls inside update panels, and I have my own Javascript that shows a popup on click, but on the second action it currently sends a postback and page is reloaded, I googled other questions and tried everything they had, what I tried:
Adding a return false on client click
<asp:LinkButton runat="server" OnClientClick="showDialog('#popup'); return false;" CommandName="Detalles" CssClass="toolbar-button" ID="EditButton">
Editar
<span class="mif-pencil"></span>
</asp:LinkButton>
Using an HTML button with runat server, but Command doesn't trigger
<button runat="server" onclick="showDialog('#popup');" CommandName="Detalles" class="toolbar-button" ID="EditButton">
Editar
<span class="mif-pencil"></span>
</button>
And on jQuery, but doesn't do any difference
$('.toolbar-button').removeAttr('href');
What exactly I'm missing, my code works fine with Asp:buttons, but they can't have additional HTML :(, I'm a newbie on ASP, any hints are appreciated.
Working button that doesn't allow inside HTML
<asp:Button runat="server" Text="Detalles" CssClass="toolbar-button fg-darkCyan button-popup" ID="btn_detalles" CommandName="Detalles">
</asp:Button>
NOTE Buttons are inside a ListView control, and assigned for each item.

Added tag HyperLink in aspx page without GridView in c#

On MarkUp in my aspx page form I have these two TextBox :
<asp:TextBox ID="Mtl" runat="server" ReadOnly="true" Enabled="false"></asp:TextBox>
<asp:TextBox ID="ps" runat="server"></asp:TextBox>
The HTML view for these two TextBox is :
<input name="Mtl" type="text" value="901" readonly="readonly" id="Mtl" disabled="disabled" />
<input name="ps" type="text" id="ps" />
Now I need insert next to the TextBox with id ps the HyperLink where passed in querystring the value of TextBox with id Mtl, the value is 901.
I need pass this value for working in another aspx page.
I have tried this solution but the HyperLink is not clikable :
<asp:HyperLink ID="HlLink" runat="server"
NavigateUrl='<%# String.Format("~/box.aspx?v={0}&e={1}&l={2}", "y", "IC", HttpUtility.UrlEncode(Eval("Mtl").ToString())) %>'
ImageUrl="~/Images/edit_icon.gif" Target="_blank" Text="Mtl"></asp:HyperLink>
In this aspx page I don't have GridView, maybe it does not work for this reason ?
How to do resolve this ?
Please help me, thank you so much in advance.
Yes you are correct since your control is not inside a gridview (or any databoundcontrol for that matter) that's why it will not work.
Actually, <%# %> is called data bind expressions and they are evaluated for data bound controls only. For your HyperLink control to work with this code nugget you will have to explicitly call the DataBind method on that control like this:-
protected void Page_Load(object sender, EventArgs e)
{
HlLink.DataBind();
}
You can bind a jQuery 'Change' event on your textbox. And in this event you can set correct navigation url by picking up the value from the textbox and appending it in appropriate place in your query string. Its a fairly easy solution. If you don't know how to do it I can provide you a sample.

get asp:textbox value in client side using javascript function doesn't work

This code doesn't display the value, I don't know why?
I have server control:
<asp:TextBox ID="txtTest" runat="server" Visible="false" TextMode="MultiLine"
Rows="3" Columns="23" CssClass="white-scroll" />
in javascript function:
var eventText = document.getElementById('<%=txtTest.ClientID%>').value;
alert (eventText);
I enter text then click on button that call the javascript function, but the alert box doesn't display the entered text.
EDIT: when I initialize the text with Text="some text", it is displayed in alert, I want to enter text in client side and get the value of it in the Javascript function.
Thanks
Using label or textbox visible set false so it can access the value in JavaScript
Sol
1)
Make a div and set style="display:none;" so label is not display at UI(browser) but value can access in JavaScript.
This is because you server Control is called "txtTest" not "txtEventDescription"
change your javascript function to :
var eventText = document.getElementById('<%=txtTest.ClientID%>').value;
alert (eventText);
EDIT: ok, I see you've now changed the post to show the code and renamed the js control, so above is no longer relevant (for those who are confused by my answer) :-)
The problem is the Visible="false" - this control will not render into the client and will therefore not be accessible via javascript (as the HTML element does not exist client side)
So, hide the element using CSS and then call alert on it. Sample snippet
CSS
.hide-element {
display: none;
}
HTML Markup
<asp:TextBox ID="txtTest" runat="server"
Columns="23"
CssClass="white-scroll hide-element"
Rows="3"
TextMode="MultiLine"/>
JavaScript
var eventText = document.getElementById('<%=txtTest.ClientID%>').value;
alert (eventText);
This way you will definitely get an alert.
You alert is empty because you have not set the property Text for your asp:Textbox
Make it Visible="true" to your textbox and than test.
<asp:TextBox ID="txtTest" runat="server" TextMode="MultiLine"
Rows="3" Columns="23" CssClass="white-scroll" />
if "txtTest" textbox has visible="false" in that case its not render on html code on client machine and if it hasn't on client's html code then how javascript calls this textbox. Because when javascript search this textbox by its id it doesn't find and it gives an error.
you can assign any other custom attribute to the control i.e.
<asp:TextBox ID="txtTest" runat="server" Visible="false" TextMode="MultiLine"
Rows="3" Columns="23" CssClass="white-scroll"
clientID="myClientID" />
and then access control using jquery like
var txtVal = $('textbox[clientID=myClientID]').val();
hope it helps.

Categories