I would like to design a invoice and print using asp.net C#. I has tried create a aspx page and using window.print to print it through browser. But it was no good results since every computer difference setting/margin/resolution.
I searched the web and tried many way like tbody tbody, css page break, media print, ReportGridView. But still same no good results too.
The template I want to print is consists of a table above every printed page to display information about the invoice. Below consists of a gridview. Since every records got difference length and also difference amount of record inside an invoice.
The invoice should fulfill those condition:
print a table a header on every printed page
display page numeber like 1/n page in every printed page
auto split gridview if exceed page length
Anyone met this issue before can share your tech/coding/skill/comment/experience? Thanks. Some people suggest me save as PDF. What tools would be suitable for this?
I have been using plain HTML document extensively to display invoice in real world production environment. What you need to do is well-defined the document size. Below is an example:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>
Invoice
</title>
<style type="text/css">
.page{
width: 630px;
height: 900px;
margin: auto;
border: 1px solid black;
padding: 10px;
}
.middleblock{
height: 600px;
border: 1px solid black;
}
.bottomblock{
height: 100px;
padding: 20px;
}
</style>
</head>
<body>
<div class="page">
<h1>Invoice</h2>
<div class="middleblock">
</div>
<div class="bottomblock">
Issued by,
</div>
</div>
</body>
</html>
Well, I think you did a good job of describing the page. I have faced this issue many times. You have left a lot of freedom as to how to do it, so I will propose a few.
[Rebuttal to browser attempt]
I have tried the whole, print in browser thing. It is good for the end user, but not internal docs. I think you were good to stay clear of that. This is a problem I to would like to simplify.
Another person might extract the browser measurements using some javascript. I think the only detractor is possible maintenance there, so it is not bad approach. Not sure the measurements are your only cross-browser concern though. I think the .print function has been limited(unsupported in many browsers, so I had my client use chrome, and it was acceptable).
[Real Concerns]
IMO, the hard part is the page breaks. That can be hard to calculate and greatly complicate the issue. So, a good go is to try to use a familiar app like Excel or Open Office. I avoid the interop libraries that can handle Excel files natively. It is very low level. If your going to go that far, maybe use a pdf gen library like PhantomJS below.
[Bad, but maybe?]
One solution that has been recently made harder, would be to design your layout as an HTML table, and write it into the response as a .xls file. For a long time, Excel would throw a warning when opening the file, but it worked just fine and could be crudely styled.
However, recently Excel has a 'feature' where when these (.xls, xlsx)files that come from the web require the user to right-click on them, select properties, and then click the 'UnBlock' button. Not a deal breaker, but a nuisance for sure if the use case is legitimate.
[Better, but doesn't answer the question]
In most cases where budget is a concern, we are replacing that system with an even easier solution of just writing a csv file (delimited file). If done properly, we can get the data into a spread sheet. From there, their people are ok with a copy and paste into their actual formatted sheets. CSV cannot provide any formatting.
[Maybe?]
Another possible solution might be to use an approach like http://wkhtmltopdf.org/. This has worked in a lot of situations. We have found that it has a hard time rendering style in nested tables though. Frankly, that is easily disputed (could have been my fault at some level) and this is probably worth a look in your case.
[Possibly?]
Another possible method would be to send some html to PhantomJS. (See 9/2016 update below for more info) They have an .exe that will read your JavaScript code file to do some cool stuff, including rendering it and taking a screenshot. I use that to make images from html generated by a text editor. The nice thing there is that it always uses webkit, so the 'output' is the same across browsers. I may not render what the user intended, but I render the final and they work around, for now.
They also offer an API and a cloud service. I get images generated on their server faster than ours. There is a pay 'wall' you can hit though. I get like only 10,000 renders a month for free, or some absurdly favorable thing. (cause I do html text snips, as I said, where they base price on avg page render time of their current users. (process time and output))
[Our Friends said...]
If you are .Net savvy and the projects allow, I cannot discount the other poster who referred to the controls that allow for this within the .Net Asp frame work. My boss has a terrible problem with using .Net web controls. However, I have used the very tool you would be in a desktop app. Done simply because it had so many export options. The design process is a lot like Access, if you are familiar. And Crystal Reporting is like Access on steroids, but again, like interop or native pdf gen, requires learning a whole new thing.
[Done]
:p
So, that is what I had to say. I hate this issue badly and hope this helped.
Related
following scenario: We've developed around 400 personal sites and we are currently trying to build our portfolio. Due to multiple reasons we would like to display the index so we can put it on our portfolio. First thought was to make programatically screenshots of every site. The heads in our company promptly debunked it because they want to show it live. Iframes are not an alternative apparently. So we have to download the index. Possibly only with the styles and images needed to display it properly.
I am unsure on how to start doing this.
Do you guys have any ideas?
The underlying technology of CodedUI (and Selenium) uses a web crawler to isolate specific useful parts of a web page. I recommend using that underlying library to crawl your webpages running live, and extract whatever images and divs make up your page structure.
You can then emit these as static HTML to make page snapshots suitable for a site index.
Doing it this way means you will be using the same technology as you use for test automation, but instead of running tests, you can extract the useful structure from your HTML and emit it as a page snapshot. You will have to mark the "useful" parts of your HTML to enable the crawler to extract just the items you think should be indexed (i.e. include a data- property if HTML5). This might be a lot of work - so if you just need a screenshot of each of your pages, just use Selenium or CodedUI to crawl your sites and capture the screen image.
I was just wondering is it possible to edit a websites source clientside using C#. Like say I wanted to change webkit-user-select from none to inherited.
body {
background: #000;
color: #333;
margin: 0;
padding: 0;
-webkit-user-select: none;
}
I was wanting to add the option to the pageloadcomplete section, Just don't know where to begin. Never done that.
It sounds like you want to temporarily modify the CSS file of (I assume the same project as your C# web site?) so it renders differently, but you want to do it from C# some how?
If so, the answer is you can, but I don't recommend it. But you can't do it in the ASPX WebForms page request, because the link in the CSS file that the ASPX request links to is a separate HTTP request completely.
Instead, you would have to write an HTTP handler and run all your CSS requests through it, manually load the CSS file, parse it, and somehow determining how and when to modify the response. Way too much work; I don't recommend it.
I think the simpler solution would be to have an extra CSS class in the file that doesn't normally apply to the element you want it to, then render client-side JavaScript in your ASPX page so that when the page loads (in the client) the JavaScript can add the CSS class to the element you need it to so different CSS applies.
There are lots of ways to write JavaScript to add/remove classes, both with libraries or in direct code. Google search for how to do that, there are a lot of basic tutorials on altering CSS classes on DOM elements via JavaScript.
IF the assumptions above are wrong, and you want to modify the CSS of another site you don't control, the answer is again, technically yes, but an even more emphatic "it's not worth it." You'd have to write a whole C# application to load the web site and all its resources, intercept the CSS file before being loaded into whatever renderer you're using, write code to parse the CSS and adjust it, etc. There's no reason to go to all that effort.
It would be a little more reasonable to write a browser plugin to do it, but again, that's a ton of work too.
I need my .NET desktop app to be able to send various HTML mails, allowing users to create custom templates, including images and possibly CSS style (if they copy/paste the HTML from other sources).
From what I've been reading, it's not that simple:
Images need to be embedded and their links replaced with content IDs
CSS styles containing images also need to be fixed
Background color/image won't work, it's better to wrap the mail in a table and apply the CSS to it
SMTP servers can interpret lines starting with a dot as "end of transmission", so at least a space must be added to all such lines
Who knows what else
My questions are:
Is there anything else I should take care of?
Is there a library which already does this so that I don't reinvent?
One thing I can think of, make use of Alternate views for those recipients whose mail clients can't/won't accept HTML emails (or they've got it turned off). That way they'll get a plain text version, in which you could include a link to an html version live on the web if they decide want to view it.
I have also heard that not including a plain text version increases your likelyhood of being marked as spam - this is due to the fact that many mail filters compare the plain text and html versions of a message; if they differ too wildly it's not a good sign for you :-)
Other spam indicators include html messages which have more pictures than text, and generally sloppy html - broken css, bad links, missing tags etc - consider using some sort of markup validator before sending.
I have found the following CodeProject article, which describes how to embed various image resources into the mail:
Sending the contents of a webpage with images as an HTML mail.
It has some useful examples, although it doesn't seem to include an alternate plain text view, so I will have to add that.
It's still a pity that no-one has put together a library which does this stuff automatically.
I should display a fairly large amount of data in a GridView (around 1000 rows per 10-20 columns), and I see that the first rendering is extremely slow in IE8 (also with compatibility mode enabled). The same page loads very fast on Firefox and Chrome, but unfortunately I have to target IE for this project.
What can I do to improve IE's behavior?
Already you know that for large data source the rendering will be slow :)
You can try answers here on this post
Why do my ASP.NET pages render slowly when placed on the server?
On this page Look at this answer link https://stackoverflow.com/a/730732/448407
But prior to this all, Why don't you use paging in the gridview?
This will allow the page to open as the data to render will be less but this will not be a performance boost at the database level.
For that you need custom paging :
http://www.aspsnippets.com/Articles/Custom-Paging-in-ASP.Net-GridView-using-SQL-Server-Stored-Procedure.aspx
Are you using javascript to render the page? Or the whole HTML is coming from the server?
If Javascript, then you need to switch to server side rendering. Maybe use DataGrid on the server.
If you have large amount of CSS, especially CSS classes defined as .parentClass .childCass {....} then it performs worse in IE.
Another possibility is your page is downloading a lot of script, css, images. IE is usually slower than FF, Chrome is fetching lot of external resources.
So, suggestion would be to:
Render the HTML directly from server.
Set EnableViewstate = false on the DataGrid.
Cleanup CSS.
Reduce number of scripts, css and images.
Let me know if it helps. If not, please prove the html output from your page.
I have an ASP.net website ( http://www.erate.co.za ) version 2.0.
When someone opens my website in Firefox everything looks different.
Why is that and how can I make it compatible?
Please help!
Etienne
The problems don't have anything to do with ASP.NET / C# Specifically.
They have to do with your understanding of web design / HTML / CSS and how you can make a cross-browser compatible UI.
I'd suggest you look at http://www.w3schools.com/ for some information on good web design practices.
Some obvious problems with the Source that you need to address are
No common css Stylesheets
Styles are applied inline on lots of elements
using long strings of " " to align text
The underlying server technology should not have any impact on your websites appearence as long as you are just producing HTML.
What you need to do is make sure that your HTML and CSS works as intended in all browsers. A good way to start is to make sure that you only output standards compliant code.
The issue at hand is that styles that you are using don't work in firefox such as cursor:hand; versus cursor:pointer; both work in IE but only pointer works in firefox. A quick recommendation would be to just run the resultant page through the w3c validator located at: http://validator.w3.org/
Per se, ASP.NET produce vanilla HTML/Javascript, so there's nothing wrong with the technology.
Focus on the html, try to be as close as possible to the w3c standards, it should help a lot.
Firebug, an incredible web dev extension for Firefox should also help you a lot in debugging your CSS.
It might be a painful task, especially if your site is old and big. Good luck!