Image not visible while exporting using Stringbuilder - html

Hi I am trying to get an image in an export to word.
I designed in html using string builder but i am not getting image.
My code is below. var image contains say 'Penguin.jpg'
StringBuilder head = new StringBuilder();
head.Append(#"<img src='"+Server.MapPath("")+"/img/"+image+"' alt='sdsdsd' height='42' width='42' />");
hdnOrg.Value = head.ToString();
How can i correct problem?

You are trying to assign the html to hidden field that is not the correct way, use div instead. You can assign html to InnerHtml of div. Do not forget to make div runat="server" so that you can access it in code behind. You can use also use Label or Panel etc as well instead of div.
Html
<div id="divForImg" runat="server" ></div>
Code behind
divForImg.InnerHtml = head.ToString();
If you want to reach the root path for path then you can use / forward slash and you do not need physical path rather virtual path so do not use Server.MapPath
head.Append(#"<img src='/img/" + image+ "' alt='sdsdsd' height='42' width='42' />");
As an additional note, using StringBulider here does not make much sense here as you have only one Append call and doing string concatenation on to make the path.

You are creating the the image url in the wrong way.
Server.MapPath("") is not supposed to be executed like that, with no params.

This should solve your issue
strHTMLBuilder.Append(#"<img src='file://C:\Location\img.PNG'>");

Related

Button Background Image using behind code Button.Style.Add()

Quick question. I am dynamically creating some buttons and basically want to add a background image to them in the code behind. Can someone tell me how its supposed to look like? I want to use the Button.Style.Add().
I tried Button.Style.Add("background-image","url(~/Uploads/Steak.jpg)"); but it did not work.
please use following code:
Button.Style.Add("background-image","url('~/Uploads/Steak.jpg')");
Add single quotes to the url
string strimgpath = "Uploads/Steak.jpg";
String strImgLocation = "url('" + strimgpath + "')";
idimage.Style.Add("background-image", strImgLocation);

Refer to an HTML control created in code-behind using its html identifier

1) I create a panel in code-behind and specify its ID as "Panel123". The panel later receives its html ID when rendered on the html page. This ID in html will look like "ctl00_ctl00_bla_bla_bla_Panel123".
2) I create and register a javascript block in code-behind and it refers to the Panel by its ID. So in code-behind I need to retreive future html ID of the panel and embed this ID into the script.
I tried ClientID, UniqueID, ID, but all these server-side properties give only the ending part of the panel id, not the whole thing with bla_bla_bla stuff.
I also tried to put the string "<%=Panel123.ClientID%>" into the script text, but then in html it was rendered as follows (I add spaces deliberately to prevent replacing the symbols): ' & lt ; % =Panel123.ClientID%>'. So as you see the script doesn't recognize it as a valid html ID.
How to get the entire html id in code-behind?
CODE-BEHIND
Panel123 = new Panel();
Panel123.ID = "Panel123";
...
LinkButton123.OnClientClick = "function123(this,'<%=Panel123.ClientID%>'); return false;";
You can't use inline syntax from a string created on the server like that. Instead, just concatenate it on.
LinkButton123.OnClientClick = "function123(this,'" + Panel123.ClientID + "'); return false;";
Either that, or change the ClientIDMode of the panel to Static. Then the ID will always be just Panel123.
Panel123 = new Panel();
Panel123.ID = "Panel123";
Panel123.ClientIDMode = "Static";
LinkButton123.OnClientClick = "function123(this,'Panel123'); return false;";
Ok, I found the solution myself.
Instead of retrieving html generated ID, I add id to the control using the following construction: Panel123.Attributes.Add("id", "Panel123").
It directly sets the pure html identifier without any other server-generated "bla_bla_bla" stuff.

How to load a different image depending on the page content?

I want to be able to have one image that loads into static html pages based on a conditional argument; so if X="something" then src="something.jpg", if X="another" then src="another.jpg" and so on.
I can't use a database.
So I am looking for some other technique or method that can use some kind of array and load one image from that array depending on something unique within the page.
I'm guessing that jQuery might do the job or maybe using XML/XSLT but I'm no programmer so any suggestions/guidelines/pointers will be gratefully received :)
If you are willing to use jQuery, you can add the image once the DOM finishes loading.
Add a div tag in your html
<div id="test"></div>
and add the image with your logic using JavaScript
$(document).ready(){
yourLogic = true;
if (yourLogic){
('#test').prepend('<img id="imgId" src="path.png" />')
}else{
('#test').prepend('<img id="imgId" src="someOtherPath.png" />')
}
}

How to set ContextPath for an image link

i am trying to put context path for an image in HTML.<img src="/MyWeb/images/pageSetup.gif">
Here /MyWeb is the ContextPath which is hardcoded. How can i get dynamically.
i am using as <img src=contextPath+"/images/pageSetup.gif">but image is not displaying. Is there any option.
First of all, "Context path" is a term which is typically used in JSP/Servlet web applications, but you didn't mention anything about it. Your question history however confirms that you're using JSP/Servlet. In the future, you should be telling and tagging what server side language you're using, because "plain HTML" doesn't have a concept of "variables" and "dynamic generation" at all. It are server side languages like JSP which have the capability of maintaining and accessing variables and dyamically generating HTML. JavaScript can be used, but it has its limitations as it runs in webbrowser, not in webserver.
The question as you initially have will only confuse answerers and yield completly unexpected answers. With question tags you reach a specific target group. If you use alone the [html] tag, you will get answers which assume that you're using pure/plain HTML without any server side language.
Back to your question: you can use ${pageContext.request.contextPath} for this.
<img src="${pageContext.request.contextPath}/images/pageSetup.gif">
See also:
How to use relative paths without including the context root name?
Browser can't access/find relative resources like CSS, images and links when calling a Servlet which forwards to a JSP
You can't write JavaScript in the src attribute. To do what you want, try some code like this:
var img = new Image();
img.src = contextPath + "/images/pageSetup.gif";
document.getElementById('display').appendChild(img);
Here the target; the place where you want to display the image, is a div or span, with the id display.
Demo
With HTML, you'll have to take some extra traffic of producing an error, so you can replace the image, or you can send some traffic Google's way. Please do not use this:
<img src='notAnImage' onerror='this.src= contextPath + "/images/pageSetup.gif" '>
Demo
Do not use this.
You must use JavaScript for this.
First, have all images point to some dummy empty image on your domain while putting the real path as custom attribute:
<img src="empty.gif" real_src="/images/pageSetup.gif" />
Now have such JavaScript code in place to iterate over all the images and change their source to use the context path:
var contextPath = "/MyRealWeb";
window.onload = function() {
var images = document.getElementByTagName("img");
for (var i = 0; i < images.length; i++) {
var image = images[i];
var realSource = image.getAttribute("real_src") || "";
if (realSource.length > 0)
image.src = contextPath + realSource;
}
};

Appending HTML to control and then adding an onclick event to one of the html objects?

I have a sub that writes out a bunch of HTML inside of a literal control. Part of this HTML is an image that I would like to add an onclick event to. The onclick just needs to alert a string that I have available in the same sub. ONCE THE HTML GENERATING IS COMPLETE the string to return will also be complete. So it is at this point I would need to add the onlick event to the image. But how can I do so as it won't recognize the control at this point? Thanks guys.
/**** EDIT ****/
ok so, I changed things around and I just inserted the string for the image button last so that the string to return is complete. however when the html is inserted the string kind of screws it up because of punctuation. the string could contain any number of special characters :',;" etc.
here is the line of html in the vb.net codebehind
text = "<td style='background-color:#C8DBEC;width:31px;'><img style='cursor:pointer;' id='imgPrint' src='../images/Buttons/printerbtn.png' onclick='printTranscript(" + finalText + ");' /></td>"
so my question is.. how do I need to format the finalText so that it will pass through to the javascript call?
I think your code should look like this:
text = #"<td style='background-color:#C8DBEC;width:31px;'><img style='cursor:pointer;' id='imgPrint' src='../images/Buttons/printerbtn.png' onclick='printTranscript(""" + finalText + #""");' /></td>"
I put doublequotes before and after finalText variable (inside the brackets), otherwise its value would be parsed in javascript like a varible name. I also had to place # sign at the beginning of the both strings to be able to use doublequotes
(you can read more about it here: http://msdn.microsoft.com/en-us/library/362314fe%28v=vs.71%29.aspx)
Are you using JQuery? it makes it pretty simple
$('#target').html(""');
$('#imgPrint').click(function() { printTranscript(" + finalText + "); });
I Just love JQuery
I did not test but it'll be something like that
Just bind a click event to your image. Set your alert to the finalText and voila.
$("#imgPrint").click(alert(finalText));
OR
$("#imgPrint").click(printTranscript(finalText));
finalText can be stored as an alt or title on the image and then you can grab that with jQuery as well, or you can set it in a field with display none.
With the above code you don't need an onClick on the image.