i have a method that generate tools based on the number value inserted, and I have another control called "DateTimePicker" that does the job of providing a textbox and the date+time picker function.
However, now the problem is that when i call dynamic_tools method and inserted the value "4" and "addInfoPanel" to the method.
The html code does not generating anything in the panel.
But, when i tried this html, it works.
lit.Text = #"<div class='errorMessage'>The user ID or password you entered does not match our records. Please try again. <br />
You may also securely recover your <a href='#'>User ID</a> or reset your <a href='#'>Password</a> online.
</div>";
I'm not too sure what is the reason behind this. I'm suspecting whether is it because of the custom control that i have created? any help is much appreciated. Thanks
Here's the code:
DateTimePicker.ascx.cs -> taken from https://github.com/jiestrada/DateTimePicker
using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
public partial class DateTimePicker : System.Web.UI.UserControl
{
public string DateTime
{
get { return txtDateTime.Text; }
}
protected void Page_Load(object sender, EventArgs e)
{
DateTimePicker picker = this;
ScriptManager.RegisterClientScriptBlock(picker, picker.GetType(), "message", "<script type=\"text/javascript\" language=\"javascript\">getDateTimePicker();</script>", false);
}
}
DateTimePicker.ascx -> taken from https://github.com/jiestrada/DateTimePicker
<%# Control Language="C#" AutoEventWireup="true" CodeFile="DateTimePicker.ascx.cs"
Inherits="DateTimePicker" %>
<style type="text/css">
.textBox
{
width: 150px;
border-radius: 4px 4px 4px 4px;
color: #555555;
display: inline-block;
font-size: 14px;
height: 20px;
line-height: 20px;
margin-bottom: 10px;
padding: 4px 6px;
vertical-align: middle;
background-color: #FFFFFF;
border: 1px solid #CCCCCC;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;
font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
}
</style>
<script type="text/javascript" language="javascript">
function getDateTimePicker()
{
$('#datetimepicker').DateTimePickerNew({
format: 'dd/MM/yyyy hh:mm:ss',
language: 'en'
});
}
</script>
<div id="datetimepicker" class="input-append date">
<asp:TextBox ID="txtDateTime" CssClass="textBox" runat="server"></asp:TextBox>
<span class="add-on"><i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
</span>
</div>
<script type="text/javascript" language="javascript">
$('#datetimepicker').DateTimePickerNew({
format: 'dd/MM/yyyy hh:mm:ss',
language: 'en'
});
</script>
Dynamic Tools Method
protected string dynamic_tools(int key, PlaceHolder panel)
{
if (key == 4)
{
string value = "dtp"+i;
Literal lit = new Literal();
lit.Text = #"<td><DateTime:DateTimePicker ID='DateTimePicker' runat='server' /></td>";
panel.Controls.Add(lit);
}
}
HTML CODE
<%# Register Src="~/Control/DateTimePicker.ascx" TagName="DateTimePicker" TagPrefix="DateTime" %>
<div id="wrapper">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="singtelUpdatePanel" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:PlaceHolder ID="addInfoPanel" runat="server" Visible="false"></asp:PlaceHolder>
</ContentTemplate>
</asp:UpdatePanel>
</div>
DateTimePicker dtp = new DateTimePicker();
dtp.ID = "someID";
//Add some attributes else, if you need. Such as a width, height, so on.
panel.Controls.Add(new LiteralControl("<td>"));
panel.Controls.Add(dtp);
panel.Controls.Add(new LiteralControl("</td>"));
Related
My web application are showing a div including a QR-image and some text from a database. And with iTextSharp I generate this html-page to a PDF. This works great, the problem is that the PDF doesn't read some of the CSS. I've tried every possible way to use CSS ( some css and in an external file)
It looks good in the browser, but when it's generated to a PDF the only similarity is the background color. Nothing else. So I need to know if there's any possible way to change the position. This is how it looks on the web
|||
And this is how it looks like in the PDF
As you can see there's a huge difference. The text doesn't even show in the PDF. I can change height and width on the image, but not e.g. margin.
Here's the logic to create my PDF.
Byte[] bytes; // This byte array will hold the final PDF.
var cssText = File.ReadAllText(#"C:\Users\My_Name\documents\visual studio 2012\Projects\QR\QR\Content\CSS.css");
var htmlText = File.ReadAllText(#"C:\Users\My_Name\documents\visual studio 2012\Projects\QR\QR\WebForm1.aspx");
//Creating a stream that we can write to, - a memorystream in this case.
using (var memoryStream = new MemoryStream())
{
//iTextSharp Document which is an abstraction of a PDF but NOT a PDF.
using (var doc = new Document())
{
using (var writer = PdfWriter.GetInstance(doc, memoryStream))
{
doc.Open();
using (var memoryStreamCSS = new MemoryStream(System.Text.Encoding.UTF8.GetBytes(cssText)))
{
using (var memoryStreamHTML = new MemoryStream(System.Text.Encoding.UTF8.GetBytes(htmlText)))
{
XMLWorkerHelper.GetInstance().ParseXHtml(writer, doc, memoryStreamHTML, memoryStreamCSS);
}
}
doc.Close();
}
}
bytes = memoryStream.ToArray();
}
var testFile = Path.Combine(Environment.GetFolderPath(Environment.SpecialFolder.Desktop), "Testing.pdf");
File.WriteAllBytes(testFile, bytes);
}
And here's the html:
<form id="form1" runat="server">
<asp:Panel ID="Panel1" runat="server">
<div id="qr">
<div class="qrImage">
<img src="http://localhost:19859/Image/QrCode.jpg" id="qrImage" />
</div>
<div class="information">
<h1>
<asp:Label runat="server" ID="building"></asp:Label></h1>
<p class="productName prodInfo">
<asp:Label runat="server" ID="productName"></asp:Label>
</p>
<p class="prodInfo">
<asp:Label runat="server" ID="productInfo"></asp:Label>
</p>
<p class="prodInfo">
<asp:Label runat="server" ID="productSomething"></asp:Label>
</p>
<p class="prodInfo">
<asp:Label runat="server" ID="productPlace"></asp:Label>
</p>
</div>
</div>
</asp:Panel>
<asp:Button ID="btnExport" runat="server" Text="Export"
OnClick="btnExport_Click" />
</form>
And here's the code to generate the QR-code:
QRCodeEncoder encoder = new QRCodeEncoder();
Bitmap img = encoder.Encode(_qrLink); //Choose one special link to generate a QR-code from.
img.Save(#"C:\Users\My_Name\Documents\visual studio 2012\Projects\QR\QR\Image\QrCode.jpg", ImageFormat.Jpeg);
Here's my CSS
body { font-family: arial;
width: 110mm;
height: 55mm;
}
table {
background-color: #e5daa2;
width: 100mm;
height: 50mm;
}
#qr {
background-color: #e5daa2;
width: 100mm;
height: 50mm;
margin-left: 10px;
-ms-border-radius: 10px;
border-radius: 10px;
}
.qrImage img {
margin-top: 10mm;
}
img {
width: 130px;
margin-left: 3mm;
margin-top: 10mm;
}
.information {
float: right;
margin-top: -38mm;
}
.prodInfo {
font-size: 11px;
margin-top: -32mm;
margin-left: -60mm;
}
.productName {
font-weight: bold;
font-size: 12px;
}
I'm going through a sample using drag and drop of a grid view where you can re-order the data. I'm trying to find out once the user has re-ordered the grid view how they like it how can I get the data in the first column in the order that they have changed it to. I've tried adding a bit of code to the button event to get this but it only gets the original order and not that of what the user changed it to.
ASPX Page: -
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!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>Untitled Page</title>
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.8.0.js" type="text/javascript"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.22/jquery-ui.js"></script>
<link rel="Stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/themes/redmond/jquery-ui.css" />
<script type="text/javascript">
$(function () {
$(".drag_drop_grid").sortable({
items: 'tr:not(tr:first-child)',
cursor: 'crosshair',
connectWith: '.drag_drop_grid',
axis: 'y',
dropOnEmpty: true,
receive: function (e, ui) {
$(this).find("tbody").append(ui.item);
}
});
$("[id*=gvDest] tr:not(tr:first-child)").remove();
});
</script>
<style type="text/css">
.GridSrc td
{
background-color: #A1DCF2;
color: black;
font-size: 10pt;
font-family:Arial;
line-height: 200%;
cursor: pointer;
width:100px
}
.GridSrc th
{
background-color: #3AC0F2;
color: White;
font-family:Arial;
font-size: 10pt;
line-height: 200%;
width:100px;
}
.GridDest td
{
background-color: #eee !important;
color: black;
font-family:Arial;
font-size: 10pt;
line-height: 200%;
cursor: pointer;
width:100px
}
.GridDest th
{
background-color: #6C6C6C !important;
color: White;
font-family:Arial;
font-size: 10pt;
line-height: 200%;
width:100px
}
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:GridView ID="gvSource" runat="server" CssClass="drag_drop_grid GridSrc" AutoGenerateColumns="false">
<Columns>
<asp:BoundField DataField="Item" HeaderText="Item"/>
<asp:BoundField DataField="Price" HeaderText="Price"/>
</Columns>
</asp:GridView>
<asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
</form>
</body>
</html>
ASPX.CS Page: -
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
DataTable dt = new DataTable();
dt.Columns.AddRange(new DataColumn[2] { new DataColumn("Item"), new DataColumn("Price") });
dt.Rows.Add("Shirt", 450);
dt.Rows.Add("Jeans", 3200);
dt.Rows.Add("Trousers", 1900);
dt.Rows.Add("Tie", 185);
dt.Rows.Add("Cap", 100);
dt.Rows.Add("Hat", 120);
dt.Rows.Add("Scarf", 290);
dt.Rows.Add("Belt", 150);
gvSource.UseAccessibleHeader = true;
gvSource.DataSource = dt;
gvSource.DataBind();
dt.Rows.Clear();
dt.Rows.Add();
}
}
protected void Button1_Click(object sender, EventArgs e)
{
foreach (GridViewRow row in gvSource.Rows)
{
Response.Write(row.Cells[0].Text.ToString());
}
}
}
You can use jquery 'tableDnD' plugin along with asp.net listview OR repeater.
Like this:
ASP.NET
<asp:Repeater>
<ItemTemplate>
<tr id='<%# Eval("ItemID") %>'>
<!-- Assign the unique key as the id of the row. -->
...
</tr>
</ItemTemplate>
</asp:Repeater>
JQuery
$(document).ready(function () {
$("#tbl").tableDnD({
onDrop: function (table, row) {
var RowIDs = '';
$('#tbl tr').each(function () {
RowIDs += $(this).attr('id') + ",";
});
$('#<%= hdnIDs.ClientID %>').val(RowIDs);
// Save the resulting sequence in a hidden field.
$('#<%= btnSaveOrder.ClientID %>').click();
// Postback the page and process the new sequence on server side.
},
onDragClass: "myDragClass",
});
});
Here i have a div in which i am showing it during the mouse hover in the master page and after mouse hover three href links will appear in that div .After clicking that href link it is traversing to another page,postback happens and that div is getting hidden in the master page.I need to show that div after that click also.I have used updatepanel and tried it but still it is not working.here is my code
//Div part
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="Update" runat="server">
<ContentTemplate>
<div runat="server" class="divSUBMenu" id="describe" style="width: 700px; height: 20px;
font: Arial, Helvetica, sans-serif;" onclick="show(0)">
</div>
</ContentTemplate>
</asp:UpdatePanel>
//Onhover part
<a href="#" onmouseover="showit(0)">
<img src="Images/Analyze_over.jpg" name="image1" width="84" height="22" border="0"
id="image1" alt="" /></a>
//Javascript for mousehover(working fine)
var submenu = new Array();
submenu[0] = ' <font style="font-family: Arial, Helvetica, sans-serif; font-size: 12px;"><a style="color: #FFFFFF; text-decoration: none;" href="ATrendAnalysis.aspx">Trend Analysis</a> <a style="color: #FFFFFF; text-decoration: none;" href="AEventPerformance.aspx">Event Performance</a> <a style="color: #FFFFFF; text-decoration: none;" href="ACannibalization.aspx">Cannibalization</a> <a style="color: #FFFFFF; text-decoration: none;" href="AHaloEffect.aspx">Halo Effect</a> <a style="color: #FFFFFF; text-decoration: none;" href="AVolumeDecomposition.aspx">Volume Decomposition</a></font></span>';
var delay_hide = 500;
var menuobj = document.getElementById ? document.getElementById("describe") : document.all ? document.all.describe : document.layers ? document.dep1.document.dep2 : "";
function showit(which) {
clear_delayhide();
document.getElementById("describe").style.visibility = 'visible';
thecontent = (which == -1) ? "" : submenu[which];
if (document.getElementById || document.all) {
menuobj.innerHTML = thecontent;
}
else if (document.layers) {
menuobj.document.write(thecontent);
menuobj.document.close();
}
}
and finally the part below is not working during the onclick but this alert is working
function show(which) {
alert("test");
document.getElementById("describe").style.visibility = 'visible';
}
Any suggestion??
EDIT:
This is the href am clicking
<a style="color: #FFFFFF; text-decoration: none;" href="ATrendAnalysis.aspx">Trend Analysis</a>
You have to use ClientScriptManager
http://msdn.microsoft.com/en-us/library/3hc29e2a.aspx
Example:
void Page_Load(object sender, EventArgs e)
{
if(checkDisplayCount.Checked)
{
String scriptText = "";
scriptText += "function DisplayCharCount(){";
scriptText += " spanCounter.innerText = " +
" document.forms[0].TextBox1.value.length";
scriptText += "}";
ClientScriptManager.RegisterClientScriptBlock(this.GetType(),
"CounterScript", scriptText, true);
TextBox1.Attributes.Add("onkeyup", "DisplayCharCount()");
LiteralControl spanLiteral = new
LiteralControl("<span id=\"spanCounter\"></span>");
PlaceHolder1.Controls.Add(spanLiteral);
}
}
Since the div is set to runat=server, you could control this on the server side - setting describe.IsVisible = false initially, and changing it to describe.IsVisible = true post-click.
If for whatever reason this must be done on the client, due to reliance on other scripts or something, then make sure you're looking for the control by using the correct identifier - it could be, depending on the version of ASP.NET you're using, that the control is prefixed with ctl00_x. In fact, even in newer versions of ASP.NET (above .NET 3.5), I think the UpdatePanel might explicitly alter the identifiers of its elements using a prefix so as to keep track of what it contains, don't quote me on that though. Check the rendered markup output on the page to check this.
I'm trying to achieve setting my image inside my div id =test this has became extremely problematic:
cn.Open();
using (OdbcCommand cmd = new OdbcCommand("SELECT Wallpostings FROM WallPosting WHERE UserID=" + userId + " ORDER BY idWallPosting DESC", cn))
{
using (OdbcDataReader reader = cmd.ExecuteReader())
{
var divHtml = new System.Text.StringBuilder();
while (reader.Read())
{
Image img = new Image();
img.ImageUrl = "~/userdata/2/uploadedimage/batman-for-facebook.jpg";
divHtml.Append("<div id=test>");
divHtml.Append(img + String.Format("{0}", reader.GetString(0)));
// how can I append an img inside my div id=test?
// the image must stay at the start of the div id=test + the contents(text) from my database (in that order)
divHtml.Append("</div>");
}
test1.InnerHtml = divHtml.ToString();
}
}
}
}
css:
* { padding: 0; margin: 0; outline: 0; }
body {
font-size: 12px;
line-height: 1.2;
font-family: Arial, "Trebuchet MS", sans-serif;
color: #a0a0a0;
background: url(images/bg.gif) repeat 0 0;
text-align: left;
}
div#test1 {
}
div#test
{
width:90%;
z-index:1;
padding:27.5px;
border-top: thin solid #736F6E;
border-bottom: thin solid #736F6E;
color:#ffffff;
margin:0 auto;
white-space: pre;
white-space: pre-wrap;
white-space: pre-line;
}
Asp html:
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
<link href="css/style.css" rel="stylesheet" type="text/css" />
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder2" Runat="Server">
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.1.min.js" type="text/javascript"></script>
<p>
<asp:TextBox ID="TextBox1" name="TextBox1" runat="server" Rows="3"
Height="47px" Width="638px"></asp:TextBox>
</p>
<p>
<asp:Button ID="Button1" runat="server" Text="Post Message" Width="98px"
onclick="Button1_Click" />
</p>
<p>
</p>
<div id="test1" runat="server" />
// contents from my code go inside this div as div id=test
</asp:Content>
Firebug output:
<div id="ctl00_ContentPlaceHolder1_ContentPlaceHolder2_test1"><div id="test">System.Web.UI.WebControls.Imageweeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee</div><div id="test">System.Web.UI.WebControls.Imagehello</div><div id="test">System.Web.UI.WebControls.Imagestill trying</div><div id="test">System.Web.UI.WebControls.Imageback to front on comments</div><div id="test">System.Web.UI.WebControls.Imageback to front on comments</div><div id="test">System.Web.UI.WebControls.Imageback to front on comments</div><div id="test">System.Web.UI.WebControls.Imageback to front on comments</div><div id="test">System.Web.UI.WebControls.Imagelets try this again</div><div id="test">System.Web.UI.WebControls.Imagehair marry went up the hill</div><div id="test">System.Web.UI.WebControls.Imagewedfwedwe</div><div id="test">System.Web.UI.WebControls.Imagewedfwedwe</div><div id="test">System.Web.UI.WebControls.Imagekjgfkjh</div><div id="test">System.Web.UI.WebControls.Imageanother comment</div><div id="test">System.Web.UI.WebControls.Imagebla bla hope this works</div></div>
I know the reason why my code outputs the actual text of the web ui controls, I have had in another post code that actually gets the image up but it adds the image onto the "END" of the test div so rather than it look like this:
<div id="ctl00_ContentPlaceHolder1_ContentPlaceHolder2_test1">
<div id="test"><img src=blabla></img> the text goes after the image </div>
It looks like this:
<div id="ctl00_ContentPlaceHolder1_ContentPlaceHolder2_test1">
<div id="test"> text comes before image </div>
<img src=blabla></img>
<div id="test">hello</div>
<img src=blabla></img>
Which isn't what I want, the code I've added although I know the reasons why it outputs the web controls text is just a demonstration of "how" I'm trying to get it to work.
divTest.Append on img THEN text;
Of course I cant append I would have to use controls.add but I still couldn't get it to work.
Previous post is here so you can see some images and some ideas:
My code below gives me a problem, the image comes after the text
Image is a web control. You can't stick it in a StringBuilder.
I have a gridview with some imagebuttons, each of which kicks off a report page for that item. The report take 10-15 seconds to run, so I'd like a popup 'Generating report, please wait' type thing. I can think of a few ways but would like the opinion of those more experienced than I. The options I was considering:
a) link my imagebutton to an intermediate page that says 'please wait', and then refer it onto the report page from there. Seems a bit clunky
b) Investigate using jquery or similar. I have telerik controls, they have a few things but it isn't clear if any are suitable.
c) Define some kind of CSS layer with a please wait warning on it, and make it visible as part of the button's onclick event
d) Look into jquery or similar
Any thoughts?
Thanks!
I use Div with transparency, and its pretty cool and simple. Give it a try.
<div id="ModalPopup" style="visibility: hidden;">
<div style="position: fixed; width: 100%; height: 100%; z-index: 10002; background-color: Gray;
filter: alpha(opacity=70); opacity: 0.7;">
</div>
<table style="position: fixed; width: 100%; height: 100%; z-index: 10003;">
<tr>
<td align="center" valign="middle">
<div style="color: Black; font-weight: bolder; background-color: White; padding: 15px;
width: 200px;">
<asp:Image ID="Image3" runat="server" ImageUrl="~/Images/progress.gif" />
Procesando....
</div>
</td>
</tr>
</table>
</div>
To display the div, use this JavaScript:
document.getElementById('ModalPopup').style.visibility = 'visible';
I have the exact same problem before but I found the AJAX Server Control UpdateProgress very useful. Here's a link to UpdateProgress Control.
you can have an <iframe> on the page, of which its style is set to display:none. a button (which you will use to execute an action) will perform a javascript function that will set the style of the <iframe> to display:block on click.
please wait on page load in js can be used in any language give a try
in body place this code
<body>
<div id='loadingmsg' style='display: none;'></div>
<div id='loadingover' style='display: none;'></div>
</body>
in css
#loadingmsg {
width:100%;
height:100%;
position:fixed;
z-index:9999;
background:url("assets/img/loaders/load10.gif") no-repeat center center rgba(255,255,255,0);
}
#loadingover {
background: #23351f;
z-index: 99;
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
filter: alpha(opacity=80);
-moz-opacity: 0.8;
-khtml-opacity: 0.8;
opacity: 0.8;
}
js
<script>
document.onreadystatechange = function () {
var state = document.readyState
if (state == 'interactive') {
showLoading();
}
else if (state == 'complete') {
hideLoading();
}
}
function showLoading() {
document.getElementById('loadingmsg').style.display = 'block';
document.getElementById('loadingover').style.display = 'block';
}
function hideLoading() {
document.getElementById('loadingmsg').style.display = 'none';
document.getElementById('loadingover').style.display = 'none';
}
</script>