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
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 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
"Only images or images wrapped in links are allowed in the slider div. Any other HTML will break the slider."
What would be the best way to programatically insert images from a database in c#?
I was using a label inside the div id="slider" tag but then realized the label would create the images within a span tag and therefore break the slider.
lblSlider.Text += "<img src=\"" + URL + "\" alt=\"" + address + "\" title=\"<a href='Featured/" + address" + address + ", " + city + "</a>\" />";
Use markup like this...
<img src='ImageHandler.ashx?ProductID=<%# Eval("ProductID")%>'
alt="<%# Eval("ProductName") %>" title="<%# Eval("ProductName") %>" />
... in conjunction with an image HttpHandler class like this (adapt for your own particular DB schema):
public class ImageHandler : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
if (context.Request.QueryString["productID"] != null)
{
try
{
string ProductID = context.Request.QueryString["ProductID"];
if (Convert.ToInt32(ProductID) > 0)
{
const string CONN
= "Initial Catalog=xxx;Data Source=xxx;Integrated Security=SSPI;";
string selectQuery
= "SELECT Photo FROM dbo.Products WHERE dbo.Products.ProductID="
+ ProductID.ToString();
SqlConnection conn = new SqlConnection(CONN);
SqlCommand cmd = new SqlCommand(selectQuery, conn);
conn.Open();
SqlDataReader dr = cmd.ExecuteReader();
dr.Read();
context.Response.BinaryWrite((Byte[])dr[0]);
dr.Close();
conn.Dispose();
// context.Response.End();
// caused an "Abort thread" error
// - this is correct and is a special exception
}
}
catch (Exception ex)
{
ErrorReporting.LogError(ex);
}
}
else
throw new ArgumentException("No ProductID parameter specified");
}
public bool IsReusable
{
get
{
return true; // multiple images otherwise false
}
}
}
Okay, I haven't tried the other solution but I did this and it works:
Here are some global c# variables:
protected int count;
protected string[] arr = new string[20];
Then I assign values to the string array from my database in the Page_Load method.
And then I just write the nivo slider with javascript on my page:
<script type="text/javascript">
document.write("<div id='slider' class='nivoSlider'>");
var count = <%= count %>;
var myArray = <% = new JavaScriptSerializer().Serialize(arr) %>;
for(var i = 0; i < count; i++) {
document.write(myArray[i]);
}
document.write("</div>");
</script>
This solution seems easier to me, but if anyone thinks I should use the other solution over this one, let me know. Oh, and don't forget the namespace System.Web.Script.Serialization
I have same requirement and tried the below code to accomplish the dynamic loading of images basing on category. These image loaded from my database. I am new to ASP.Net please let me know if I did anything wrong or did any blunders :).
in ASP.Net file:
I am using nivo slider append method
<script type="text/javascript">
$(window).load(function() {
$('#slider').append('<img id="ad5" src=<%=__ad1ImageUrl %> />');
$('#slider').append('<img id="ad6" src=<%=__ad2ImageUrl %> />');
$('#slider').append('<img id="ad7" src=<%=__ad3ImageUrl %> />');
$('#slider').append('<img id="ad8" src=<%=__ad4ImageUrl %> />');
$('#slider').nivoSlider();
});
</script>
My table looks like this:
<table style="height: 183px; width: 100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="left">
<div id="wrapper">
<div class="slider-wrapper theme-default">
<div class="ribbon">
</div>
<div id="slider" class="nivoSlider">
<!-- note that no images added here -->
</div>
</div>
</div>
</td>
</tr>
</table>
In the code behind:
Use variable to store image url(s). You can now get the URL(s) from DB and get populated. In my code i have used these variables (can use array also) to capture url path. You can get the paths from any source like Database, Xml or ...
public string __ad1ImageUrl = "";
public string __ad2ImageUrl = "";
public string __ad3ImageUrl = "";
public string __ad4ImageUrl = "";
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
__ad1ImageUrl = "UserControls/Images/mainBanner1.jpg";
__ad2ImageUrl = "UserControls/Images/mainBanner2.jpg";
__ad3ImageUrl = "UserControls/Images/mainBanner3.jpg";
__ad4ImageUrl = "UserControls/Images/mainBanner4.jpg";
}
}
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.