I am currently looking at an example D3 visualization that creates gauges on screen. The current body looks like this:
<body onload="initialize()">
<span id="memoryGaugeContainer"></span>
<span id="cpuGaugeContainer"></span>
<span id="networkGaugeContainer"></span>
<span id="testGaugeContainer"></span>
</body>
In my C# application, I need to call a javascript function that will create a
<span id="id here"></span>
line in the body. My C# code looks as so:
webView.ExecuteJavascript("createSpan(" + Convert.ToString(this.application.Document.Properties["column"]).Replace(" ", "_") + aggregation.SelectedItem.ToString() + flColumn.SelectedItem.ToString().Replace(" ", "_") + "GaugeContainer" + ")");
What would my Javascript function be? My current attempt at the "createSpan" function is this:
function createSpan(id) {
var spanTag = document.createElement("span");
spanTag.id = id;
document.body.appendChild(spanTag);
}
The "executejavascript" function comes from Awesomium.
Am I doing this right?
Thanks
Related
Hey all I am using the new WebView2 with my WinForms app. I can get it to display my dynamic html that I create but it has the "" when it tries to load the images for the page.
The image tag looks like this:
<div id="animation1" style="display: inline-flex;">
<img src="file:///C:\Users\admin\source\repos\wCondictions\bin\x86\Debug\Resources/nice.gif" style="height: 110px; width: 110px;">
<span class="imgWeather">Nice</span>
</div>
The code I am currently using is this:
fileNames = new DirectoryInfo(resourcePath)
.GetFiles()
.OrderBy(p => Path.GetFileNameWithoutExtension(p.Name))
.Select(fi => fi.Name)
.ToArray();
string blah = Path.Combine(Application.StartupPath, "Resources");
string fullHtml = string.Empty;
string HeaderHtml = "<!DOCTYPE html>\n" +
"<html>\n" +
"<style>\n" +
".imgW {\n" +
"position: absolute;\n" +
"z-index: 10;\n" +
"color: red;\n" +
"width: 110px;\n" +
"height:30px;\n" +
"text-align: center;\n" +
"vertical-align: middle;\n" +
"top: 88px;\n" +
"background-color: aquamarine;\n" +
"font-family: Arial;\n" +
"font-size: small;\n" +
"}\n" +
"</style>\n" +
"<body style=\"background-color: #00000;\">";
string dynamixImg = "<div id=\"animation1\" style=\"display: inline-flex;\">\n" +
"<img src=\"file:///" + blah + "/{0}\" style=\"height: 110px; width: 110px;\" />\n" +
"<span class=\"imgW\">{1}</span>\n" +
"</div>";
string FooterHtml = "</body>" +
"</html>";
for (int a = 0; a < fileNames.Count(); a++)
{
fullHtml += string.Format(
dynamixImg,
fileNames[a],
fileNames[a]
.Replace(".gif", "")
.Replace("&", "&&")
) + "\n";
}
await webView21.EnsureCoreWebView2Async();
webView21.CoreWebView2.SetVirtualHostNameToFolderMapping(
"Resources",
#"C:\Users\admin\source\repos\wCondictions\bin\x86\Debug\Resources\",
CoreWebView2HostResourceAccessKind.Allow
);
webView21.NavigateToString(HeaderHtml + fullHtml + FooterHtml);
I've seen many places where it says to use the SetVirtualHostNameToFolderMapping but even with that it still says the same error.
So I am not sure what I am missing or misunderstanding about how to use the SetVirtualHostNameToFolderMapping in order to allow the images to load locally?
Ok, I will try again, my first answer was confusing.
You get the error because you use the file:// protocol.
It seems you have not fully understood the the use of SetVirtualHostNameToFolderMapping.
Once you have set the virtual server by calling SetVirtualHostNameToFolderMapping you should use that virtual server just as you use any other server on the internet. Do NOT use file://!
So all you have to do is edit your HeaderHtml and your <img src.
The HeaderHtml should include a <base> tag, which should point to your virtual server root:
<html>
<head>
<base href="http://Resources" />
</head>
That makes it very easy to build you dynamic <ìmg> tags, the source is simply the file name:
<img src="image.png" />
Now WebView2will translate it into a file path and fetch the image!
As a side note, you can also include files from sub-folder by adding the folder name in front of the file name, like this:
<img src="/subfolder/image.png" />
I'm using ASP.NET to make a website for a hotel and at this point to show the hotel rooms I've created a javacript file to generate div's, now I want to get the value of the room number that by clicking "learn more "transfer the value of the number of the room to the other page
I already tried to use cookies but it does not work
here's the js file that generates the div:
$(document).ready(function () {
$.get('http://localhost/quartos.php', function (data) {
var results = JSON.parse(data);
console.log(results);
for (i = 0; i < results.length; i++) {
var div = "<div class='col-sm col-md-6' height='600px' width='400px'><div class='room'><a href='' class='img d-flex justify-content-center align-items-center' style='background-image: url(images/Quartos/" + results[i].imagem + ");'></a><div class='text p-3 text-center><h3 class=' mb-3'><a href=''>Quarto " + results[i].descricao + "</a></h3 > <p><span class='price mr-20'>" + results[i].Preco_quarto + "\u20AC</span><asp:Label ID='Label1' runat='server' Text='ç aop'></asp:Label><span class='per'> por noite</span></p> <ul class='list'><li><span>Max:</span>" + results[i].Lotacao_Maxima + " Pessoas</li><li><span>Vista:</span>" + results[i].Vista + "</li></ul><hr><p class='pt-1'><button class='btn btn-primary' runat='server' onserverclick='btn_quartos'>Ver Detalhes<span class='icon-long-arrow-right'></button></span></p></div></div></div>";
document.cookie = "CookieName=" + results[i].Num_Quarto + ";";
$("#quartos").append(div);
}
});
});
and the cs of the "next" page:
protected void Page_Load(object sender, EventArgs e)
{
string num_quarto = Request.Cookies["CookieName"].Value.ToString();
}
You're overwriting the cookie to something new each time in the for loop, so the cookie is always going to hold the last result in results, despite what they select.
Although, using a cookie to pass info from one page to another isn't an ideal way to do what you want anyway.
A better way would be to make your "learn more" page able to accept a room number as a query string value.
Example: http://localhost/learnmore.php?cuarto=123
Then that looks up the room information and renders the information into the html.
In doing that, you can simplify the link in your div element to point to learmore.php?cuarto="+results[i].Num_Quarto and not have to repurpose the cookie functionality for a behavior it's not really meant for.
I have the following html markup in a form with with and UpdatePanel. This code is rendering/displaying exactly as I want when statically coded. However, when I use a while loop in the c# codebehind to dynamically concatenate the code for all the 'docbox' elements into a string then set that string into InnerHtml for div 'bookshelf_items', it renders/displays very differently. It appears that after the first .docbox div is generated, the subsequent docbox divs are inside it. Another bizarre thing is that everything that should display after 'bookshelf_items' disappears.
Edit
<div class="bookshelf_items" id="bookshelf_items" runat="server">
<div class='docbox'>
<div class='doc' contenteditable='true' id='doc_50'>
<div class='doc_title'>TEST TITLE</div>
<div class='doc_txt'>TEST TEXT</div>
</div>
<div class='doc_date'>TEST DATE</div>
<div class='doc_del' ID='del_50' runat='server' />
<div class='doc_getlyt' ID='getlyt_50' runat='server' />
</div>
</div>
Edit - removed the CSS
Edit - removed the C# codebehind
Try this
private void GetUserDocs(string user_id)
{
using (SqlConnection connection = new SqlConnection(conn))
using (SqlCommand cmd = new SqlCommand("SELECT id, title, alias, dt from dbo.user_works WHERE user_id = #user_id", connection))
{
cmd.Parameters.AddWithValue("user_id", user_id);
connection.Open();
using (var reader = cmd.ExecuteReader())
{
// Check if the reader has any rows at all before starting to read.
if (reader.HasRows)
{
string doclist_html = "<div class=\"bookshelf_items\" id=\"bookshelf_items\" runat=\"server\">";
while (reader.Read())
{
string doc_id = reader["id"].ToString().Trim();
string title = reader["title"].ToString().Trim();
string alias = reader["alias"].ToString().Trim();
string dt = reader["dt"].ToString().Trim();
string date = DateTime.Parse(dt).ToShortDateString();
//build doc html
doclist_html = doclist_html + String.Format(
"<div class='docbox'>" +
"<div class='doc' contenteditable='true' id='doc_x{0}'>" +
"<div class='doc_title'>{1}" +
"</div>" +
"<div class='doc_txt'>{2}" +
"</div>" +
"</div>" +
"<div class='doc_date'>{3}</div>" +
"<div class='doc_del' ID='del_{0}' runat='server' />" +
"<div class='doc_getlyt' ID='getlyt_{0}' runat='server' />" +
"</div>",
doc_id, title, alias, date);
}
doclist_html += "</div>";
bookshelf_items.InnerHtml = doclist_html;
string testhtml = bookshelf_items.InnerHtml;
}
else
{
//username not found
lbl_error.Text = ">>Failed to get documents<<";
}
}
}
}
I figured out the solution to my own problem and I want to post the answer here in case anyone else runs into the same issue
When setting the InnerHtml into my div, the following code broke the parent/child hierarchy
<div class='doc_del' ID='del_54 runat='server' />
<div class='doc_getlyt' ID='getlyt_54' runat='server' />
The solution was to replace the embedded close characters with specific div close tag as follows:
<div class='doc_del' ID='del_54 runat='server'></div>
<div class='doc_getlyt' ID='getlyt_54' runat='server'></div>
Hopefully this will save someone some time and frustration. I don't know why it works this way. Maybe someone who knows will share. Thanks to those who commented on my issue
If I have string named codeText. Sometimes that string starts with a <p> and other times not. Can anyone tell me how I can check if it starts with <p> and if it doesn't then how can I add the <p> to the start and </p> to the end.
Like this:
if (!text.StartsWith("<p>", StringComparison.OrdinalIgnoreCase))
text = "<p>" + HttpUtility.HtmlEncode(text) + "</p>";
If you somehow know that the HTML string does not contain any malicious Javascript, you don't want to call HtmlEncode.
if(!text.StartsWith("<p>"))
{
text = string.Format("<p>{0}</p>", text);
}
You mean like this?
if (!codeText.StartsWith("<p>"))
{
codeText = string.Concat("<p>", codeText, "</p>");
}
I need that some html in the area in the asp.net page that i am coding, is changed according to a string variable.
I was thinking about creating a label, and then change the text on it.
But the string variable contains something like:
<h2><p>Notify:</p> alert</h2>
So, I don't feel that give this to a label text is a good idea
How i can do?
Using response.write?
If I use response.write, my added code will be at the beginning of the html source, how i can tell him to add it in a specific ?
Thank you
If you really don't want to use any server controls, you should put the Response.Write in the place you want the string to be written:
<body>
<% Response.Write(stringVariable); %>
</body>
A shorthand for this syntax is:
<body>
<%= stringVariable %>
</body>
why don't you give LiteralControl a try?
myLitCtrl.Text="<h2><p>Notify:</p> Alert</h2>";
If you want something lighter than a Label or other ASP.NET-specific server control you can just use a standard HTML DIV or SPAN and with runat="server", e.g.:
Markup:
<span runat="server" id="FooSpan"></span>
Code:
FooSpan.Text = "Foo";
ASPX file:
<h2><p>Notify:</p> <asp:Literal runat="server" ID="ltNotify" /></h2>
ASPX.CS file:
ltNotify.Text = "Alert!";
Use a literal control and write your html like this:
literal1.text = "<h2><p>Notify:</p> alert</h2>";
You should really use the Literal ASP.NET control for that.
You can go with the literal control of ASP.net or you can use panels or the purpose.
You can also use pageMethods in asp.net. So that you can call javascript functions from asp.net functions. E.g.
[WebMethod]
public static string showTxtbox(string name)
{
return showResult(name);
}
public static string showResult(string name)
{
Database databaseObj = new Database();
DataTable dtObj = databaseObj.getMatches(name);
string result = "<table border='1' cellspacing='2' cellpadding='2' >" +
"<tr>" +
"<td><b>Name</b></td>" +
"<td><b>Company Name</b></td>" +
"<td><b>Phone</b></td>"+
"</tr>";
for (int i = 0; i < dtObj.Rows.Count; i++)
{
result += "<tr> <td><a href=\"javascript:link('" + dtObj.Rows[i][0].ToString().Trim() + "','" +
dtObj.Rows[i][1].ToString().Trim() +"','"+dtObj.Rows[i][2]+ "');\">" + Convert.ToString(dtObj.Rows[i]["name"]) + "</td>" +
"<td>" + Convert.ToString(dtObj.Rows[i]["customerCompany"]) + "</td>" +
"<td>"+Convert.ToString(dtObj.Rows[i]["Phone"])+"</td>"+
"</tr>";
}
result += "</table>";
return result;
}
Here above code is written in .aspx.cs page. Database is another class. In showResult() function I've called javascript's link() function.
Result is displayed in the form of table.