I am trying to dynamically display an image with text on it. There are quite a few examples of this ie Write Text On An Image in c#
For the time being this is the only thing on a visual studio generated empty winform page.
but I continue to get the same result regardless of the technique is use, so perhaps its a problem with my page?
My output page displays like this:
<%# Page Language="vb" AutoEventWireup="false" CodeBehind="index.aspx.vb" Inherits="testtext.index" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>
</title></head>
<body>
<form method="post" action="./index.aspx" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="G30FF0+ZAHGhkQJeBgR+oRS6OrykggI6KG2KLa2Mf0lna5zKb83yvLWtkQfnBa4AEDqKkttFuBoZ1lWeDcgqUpLSg0hHsyoD0paxcB2U0Js=" />
</div>
<div>
<p><img src="data:image/PNG;Base64, �PNG���
IHDR���5������9堢���sRGB�������gAMA����
�a��� pHYs�������o�d����IDATHKՓ��0�;�9Nvq�lb����D� />
</div>
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATEGENERATOR" id="__VIEWSTATEGENERATOR" value="90059987" />
</div></form>
</body>
</html>
My code looks like this:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtmstrong textl">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<%Dim cls = New testtext.clsUtil %>
<p><img src="data:image/PNG;Base64, <%cls.MakeImage("Testing") %>" />
</div>
</form>
</body>
</html>
the function .MakeImage ends as follows:
'// SET ALIGNMENT
Dim format As StringFormat = New StringFormat
format.LineAlignment = StringAlignment.Center
'// DRAW THE FONT
Dim oMemStream As MemoryStream = New MemoryStream
g.DrawString(Text, oFont, fgBrush, rectF, format)
System.Web.HttpContext.Current.Response.ContentType = "image/png"
img.Save(oMemStream, ImageFormat.Png)
oMemStream.WriteTo(System.Web.HttpContext.Current.Response.OutputStream)
'// CLEAN UP
img.Dispose()
Return Nothing
End Function
The function .MakeImage appears to be working correctly returning the image but sadly no picture is displayed.
Can you see what I am doing wrong?
two things:
your output is not base64 encoded, and your page output you’ve listed doesn’t have a closing double-quote on src=“...
Let me know if you need code on how to resolve. Deal with base64 first, in case the current output is messing up the page output.
Cheers!
Added:
use Convert.ToBase64String(bytes) to encode your bytes into a Base64 string.
Or, if you want to continue to return bytes to the client, consider just putting an image URL in like src=“/images.ashx/testing", then setting up an ASHX handler to call your image-generating function. You can return bytes without encoding.
Related
I came across this APIserver to generate the QRCode but I was wondering is it possible to just use HTML to generate the QRcode for example this is what I was thinking
<input id="text" type="text" value="Please Enter Your NRIC or Work Permit" style="Width:20%"/>
<img src="https://api.qrserver.com/v1/create-qr-code/?data=HelloWorld&size=100x100" alt="" title="HELLO" />
In the "title" I believe it is where you will write your text and the QR code would generate, I was wondering how can I create a text box for me to key in the value directly on a website.
Were you thinking of something like this? https://jsfiddle.net/v7d6d1ps/
Your HTML can be similar to what you have but with added onblur event. Only HTML cannot do this, so I have added jQuery/JavaScript combination.
<html>
<head>
<title>Testing QR code</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">
function generateBarCode()
{
var nric = $('#text').val();
var url = 'https://api.qrserver.com/v1/create-qr-code/?data=' + nric + '&size=50x50';
$('#barcode').attr('src', url);
}
</script>
</head>
<body>
<input id="text" type="text"
value="NRIC or Work Permit" style="Width:20%"
onblur='generateBarCode();' />
<img id='barcode'
src="https://api.qrserver.com/v1/create-qr-code/?data=HelloWorld&size=100x100"
alt=""
title="HELLO"
width="50"
height="50" />
</body>
</html>
Copy and paste this into an HTML file on your desktop. Type in the text box 12345 and hit tab. Notice that the QR code will update.
I have the following HTML/ASP.NET code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Ny test</title>
<link rel="stylesheet" type="text/css" href="StyleSheet.css" />
</head>
<body>
<form action="Default.aspx" runat="server" method="post">
Name: <input type="text" id="navn" runat="server"/>
<input type="submit" id="submit" value="Submit!" runat="server" />
<input type="reset" />
<br />
<%if (Request.Form["submit"] != null)
{
Response.Write("<br/>");
Response.Write("Submit button pushed");
}
if (Request.Form["navn"] != null && Request.Form["navn"] != "")
{
Response.Write("<br/>");
Response.Write("Name OK");
}
%>
</form>
</body>
</html>
When using the "POST" form post method I get the following output:
Submit button pushed
Name OK
When using the "GET" form post method NOTHING is printed out?!
Request.Form contains information that is sent using POST. When you use GET the information will be in the Request.QueryString collection. In your case this means that Request.Form["submit"] is null.
If you want to support both then you would be able to use the Request.Item collection which includes values from:
Request.Cookies
Request.Form
Request.QueryString
Request.ServerVariables
However, doing this you may get some unexpected results if you use a parameter name that is used in one of the other collections.
To handle both POST and GET with your code you can just remove the .Form, i.e. replace Request.Form["navn"] with Request["navn"].
I have this asp.net code in my page :
<div id="prx">ABC</div>
And I want to change the value "ABC" to something when for example the user type a value in TextBox.
How can I do that using Ajax ?
Thanks
You don't need AJAX to do this. You can simply use Javascript to update the content of the DIV tag with the contents of the INPUT widget. See How to set the value of a form element using Javascript.
Now if you'd like to update the TextBox with something from the server without reloading the page, then that's AJAX. I'd use jQuery.ajax() function over UpdatePanels though. Here's a jQuery AJAX Tutorial.
May be using javascript?)
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs" Inherits="WebApplication11.WebForm2" %>
<!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 id="Head1" runat="server">
<title></title>
<script type="text/javascript">
function setDivContent() {
var textInput = document.getElementById('text1');
var divPrx = document.getElementById('prx');
divPrx.innerHTML = textInput.value;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="prx">ABC</div>
<br />
<input type="text" id="text1" />
<button onclick="javascript:setDivContent(); return false;">Set</button>
</div>
</form>
</body>
</html>
Check out the ASP.NET AJAX UpdatePanel control. It lets you change text on a page and "AJAX-ifies" anything inside it, instead of doing a full postback. Here is a good tutorial on it.
I know this is old question.. but it might help someone
JQUERY for this would be :
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(e){
e.preventDefault();
$("#prx").text($("#text1").val());
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="prx">ABC</div>
<br />
<input type="text" id="text1" />
<button type="button" id="btn1">Set</button>
</div>
</form>
</body>
</html>
This is my first time working with asp.net and javascript, so I don't know a lot of the nice web resources, or much about debugging javascript. I'm looking to find out why on line
oFormObject.submit(); Microsoft JScript runtime error: Object doesn't support this property or method.
I'm using links to function as buttons because I'm terrible at aesthetics and I think links will look more professional than a table of 50 buttons. I read that this solution may cause issues with browsers trying to pre-render my links and causing lots of extra traffic and problems, but the Css I found to make a button look like a link seemed to have alignment and spacing issues.
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head><link rel="stylesheet" type="text/css" href="DefectSeverity.css" /><title>
Defect Severity Assessment Code List
</title></head>
<body>
<form name="form1" method="post" action="CodeList.aspx" id="form1">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUJNjQzMTI3NjU4ZGSW2wNBW3eGztyO+Tftc5BB8A6cMg==" />
</div>
<div>
<p>Welcome Maslow</p><SCRIPT language="JavaScript">
function submitForm(intId)
{ oFormObject= document.getElementById(""form"+_StrCodeId + #""");
oFormElement= document.getElementById("codeId");
oFormElement.value=intId;
oFormObject.submit();
}
</SCRIPT> <form method="post" action="CodeAssessment.aspx" id="formcodeId">
<table name="codeId" id="codeId" value="0" type="hidden" class="linkTable">
<tr>
<th>Completed</th><th>Code</th><th>Description</th><th>Code Present Since</th>
</tr><tr class="row">
<td><input name="401" type="checkbox" value="401" DISABLED /></td><td>401</td><td>Missing Original Document/form</td><td>2009.10.16</td>
</tr><tr class="rowAlternate">
<td><input name="NDMI" type="checkbox" checked="checked" value="NDMI" DISABLED /></td>
<td>NDMI</td>
<td>Note date is missing</td> <td>2009.10.15</td>
</tr>
</table><input type="submit" />
</form>
</div>
</form>
</body>
</html>
If I change the script line to oFormObject= document.forms[0]; it submits the asp.net's viewstate form posting back to the same page instead of where I want to go. so the rest of the code on the page appears to work.
So we solved this in another answer, but using comments, so this is just incase anyone else has the same problem,
It's all down to the form having a runat="server" attribute, this generates the viewstate input, then when the form is submitted to the second page, it tries to fill out the page with the details from the viewstate, however as in this case the form is submitted to another page, the two pages don't match up and when it tries to deal with the viewstate input it throws the error.
The solution is to either remove the runat="server" attribute on the form, or to set EnableViewStateMac="False" attribute from the second page.
I'm not really into asp.net but into javascript, so I'd say there's a parse error in
oFormObject= document.getElementById(""form"+_StrCodeId + #""");
the quotes just don't match. i'd say you try to change it to
oFormObject= document.getElementById("formcodeId");
instead
Ok apparently you can't nest forms in html/DOM. I have changed my asp.net provided form and now it navigates but crashes saying
Validation of viewstate MAC failed. If this application is hosted by a Web Farm or cluster, ensure that <machineKey> configuration specifies the same validationKey and validation algorithm. AutoGenerate cannot be used in a cluster.
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head><link rel="stylesheet" type="text/css" href="DefectSeverity.css" /><title>
Defect Severity Assessment Code List
</title></head>
<body>
<form name="form1" method="post" action="CodeAssessment.aspx" id="form1">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUJNjQzMTI3NjU4ZGSW2wNBW3eGztyO+Tftc5BB8A6cMg==" />
</div>
<div>
<p>Welcome Maslow</p><SCRIPT language="JavaScript">
function submitForm(intId)
{ oFormObject= document.forms[0];
oFormElement= document.getElementById("codeId");
oFormElement.value=intId;
oFormObject.submit();
}
</SCRIPT> <table name="codeId" id="codeId" value="0" type="hidden" class="linkTable">
<tr>
<th>Completed</th><th>Code</th><th>Description</th><th>Code Present Since</th>
</tr><tr class="row">
<td><input name="401" type="checkbox" value="401" DISABLED /></td>
<td>401</td><td>Missing Original Document/form</td><td>2009.10.16</td>
</tr><tr class="rowAlternate">
<td><input name="NDMI" type="checkbox" checked="checked" value="NDMI" DISABLED /></td>
<td>NDMI</td><td>Note date is missing</td><td>2009.10.15</td>
</tr>
</table><input id="testSubmit" type="submit" />
</div>
</form>
</body>
</html>
I don't see what the issue is now, the code you posted in your answer worked fine for me, only problem I have is that I dont have a CodeAssesment.aspx page so I get a HTML404 error, but thats it.
Your original code document.getElementById(""form"+_StrCodeId + #"""); was not valid, and you don't have a variable called StrCodeId,
Try
oFormObject = document.getElementById("form"+intId);
Ok solved the crashing, so I put another answer, its because you've copied the source code and used that to create the outline again, I think, as you shouldn't have the hidden input viewstate as part of the page, it gets generated automatically on build. Remove this line and try it
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUJNjQzMTI3NjU4ZGSW2wNBW3eGztyO+Tftc5BB8A6cMg==" />
</div>
I trimmed out my dynamic code generation section
<?xml version="1.0" encoding="UTF-8"?>
<!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><link rel="stylesheet" type="text/css" href="DefectSeverity.css" /><title>
Defect Severity Assessment Code List
</title><script type="text/javascript">
function submitForm(intId)
{ oFormObject= document.forms[0];
oFormElement= document.getElementById("codeId");
oFormElement.value=intId;
oFormObject.submit();
}
</script> </head>
<body>
<form name="form1" method="post" action="CodeAssessment.aspx" id="form1">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUJMzMxMzk5NjY5ZGTQg8pLRPHaRM4Idd6LyKDmFvMpNA==" />
</div>
<div>
<input type="submit" />
</div>
</form>
</body>
</html>
Hey look there's another div again. I don't see where this is coming from. and I'm still getting Validation of viewstate MAC failed. If this application is hosted by a Web Farm or cluster, ensure that configuration specifies the same validationKey and validation algorithm. AutoGenerate cannot be used in a cluster.
I keep getting these requests for 'make me a tool to do xyz' for a web app we're putting up.
So after the third one, I realized it'd be easier to lump them all together and use a master page.
I've got a user control called MessageCenter I use for error, success, and informational messages, and so I dropped that on the master page.
<%# Master Language="VB" CodeFile="tfMasterPage.master.vb" Inherits="tfMasterPage" %>
<%# Register Src="MessageCenter/msgCenter.ascx" TagName="msgCenter" TagPrefix="uc1" %>
<%# Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>INSERT TITLE HERE</title>
<link href="Stylesheets/EogTool.css" rel="stylesheet" type="text/css" />
<link href="stylesheets/TF_Main_Styles.css" rel="stylesheet" type="text/css" />
<link href="stylesheets/TF_Print_Styles.css" rel="stylesheet" type="text/css" media="print" />
</head>
<body style="background-color: #eeeeee">
<form id="form1" runat="server">
<div class="page">
<div class="headerArea">
<div class="LogoImg">
<img alt="Transparency Florida" src="images/TF_Logo.jpg" /></div>
<div class="SealImg">
<img alt="Shining the Light on Florida's Budget" src="images/TF_Seal.jpg" /></div>
</div>
<div class="content">
<h1>
FIS - EOG Table Maintenance</h1>
</div>
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<div>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<div class="content">
<div>
<uc1:msgCenter ID="MsgCenter1" runat="server" />
</div>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
...
Normally, when the msgcenter is on a regular aspx page, I call its method and stuff from the codebehind as in this sub:
...
rtn = dal.deleteRow(CInt(e.CommandArgument), currentTab())
If Not IsNumeric(rtn) Then
MsgCenter1.addMessage("An Error occured deletion" & rtn, , , , "E")
Else
MsgCenter1.addMessage("Delete Successful", , , , "S")
End If
bindGrid()
MsgCenter1.Visible = True
End Sub
But when I try to do that from the asp:content thing on the page using the masterpage, it tells me that msgCenter1 is not declared. It's some sort of scope issue.
I've read about using findcontrol like
ctype(master.findcontrol("tbWhatever"), textbox).text = "FOO"
But when I try to cast to my user control, it complains because it once again, isn't declared.
I feel as though I'm just missing one piece of the puzzle, but it's been eluding me since around 4PM yesterday.
Any advice, pointers, or links would be most appreciated.
Thanks.
First add this directive to the content page you want to access the master page
<%# MasterType VirtualPath="~/NameOfMasterPage.master"%>
Second, On the master page setup a public propery that returns the control you want to access
public Label MasterLabel
{
get
{
return lblMaster;
}
private set
{
//do nothing
}
}
Lastly just access the control in the content page like so
Master.MasterLabel.Text = "Hello from the content page!";
I know your question has been answered and this doesn't apply to it, but I noticed you're passing in 1 length characters for your "MessageCenter" control. I would use an Enum instead of a string to make your code a little less brittle. As it stands now you can pass "fart" in as a parameter and it will compile just fine. An Enum will give you some compile time checking and avoid any issues at runtime.
Examples:
Message.Success
Message.Error
Message.Warning
this is what i'd been used.
Master.FindControl("ControlID").Visible = false;