Develop Reference

CKeditor 4 - Set default style for html element in ASP.NET Core

I'm using CKeditor 4 in my Asp.Net Core web app so that users can write business letters which are then exported to PDF (itextsharp).
Html control:
<div class="form-group">
<label>Vsebina: </label>
<textarea asp-for="Vsebina" name="Vsebina" class="form-control html-text" data-provide="markdown"></textarea>
<span asp-validation-for="Vsebina" class="text-danger"></span>
</div>
and
JS binding:
$("#Vsebina.html-text").ckeditor();
I want to add some margin to <p> elements so that line breaks are bigger by default, so I added the following to CKEditor's content.css:
p {
margin-bottom: 30px;
}
But, this works only half-way. Because calling ckeditor() on #Vsebina textarea actually creates a new html div on the webpage with id="cke_Vsebina". Part of this new div is also an iframe element which includes all the styles defined in content.css and "raw" html entered into #Vsebina textarea. So the users see styles as defined in content.css.
On the other hand #Vsebina only holds "raw" html, no styles. And when users clicks save the latter html is bound to the Model. Hence, html that is passed to itextsharp holds no styles and resulting PDF is not designed as intented.
How can I get the html with styles into my controller action on save?
public IActionResult Save(VloziscaDetailModel model)
{
if(ModelState.IsValid)
{
//some stuff here ...
item.Vsebina = model.Vsebina; //this html is without styles
//some other stuff here
}
}
//model
public class VloziscaDetailModel
{
//bunch of other properties
public string Vsebina { get; set; } //this one holds the html from textarea (CKeditor)
}
EDIT:
I have also tried this (CKEDITOR.instances.Vsebina.getData()), but the result is the same. Styles from content.css are not included in the resulting html.

As you already mentioned content.css is used only for editor editable area. And iframe element provides separation of styles between editor and rest of the page. You can read more about this concept in official CKEditor 4 docs here - https://ckeditor.com/docs/ckeditor4/latest/guide/dev_framed.html#content-styles-vs-page-styles. It gives proper separation of content and styles and allows to style displayed content differently (and in multiple way on different views).
This means you need to provide styles for your frontend view (pages where CKEditor 4 content is displayed) separately. If those should be the same as in CKEditor 4 editable area it can be the same content.css file. There is no built-in way to do this, it requires custom handling in your integration.
There is also more extensive docs page about styling editor content - https://ckeditor.com/docs/ckeditor4/latest/features/styles.html.

c# ASP.NET Bundle & add cache break query string inside css url properties

I am trying to develop an automated way of breaking the cache on files linked via css url properties, in an ASP.NET C# application that uses Bundles.
Specifically, I have recently added an icon font to my website, the css that creates the #fontface loads the font files by url:
#font-face {
font-family: "iconfont";
src:url("/fonts/iconfont.eot");
src:url("/fonts/iconfont.eot&#iefix") format("embedded-opentype"),
url("/fonts/iconfont.woff") format("woff"),
url("/fonts/iconfont.ttf") format("truetype"),
url("/fonts/iconfont.svg#iconfont") format("svg");
font-weight: normal;
font-style: normal;
}
This means the font file is cached by the user the first time they load the page. But I need to break this cache if I update the font files, I can achieve this using a query string such as:
src:url("/fonts/iconfont.eot?v1");
However, I would like to be able to achieve this through code so that I don't have to maintain query strings on all css properties that use url in my site.
My bundle code looks like this so far:
bundles.Add(new StyleBundle("~/Content/IconFont").Include("~/css/iconFont.css"));

dynamic generation of CSS attributes in CSS files based on user input in ASP MVC

Most of the dynamic CSS Q & A show how to swap between CSS files or predefined CSS values.
My question is: during a live user session how to compute/compile CSS values for e.g. both element.width2 and width:230px into the CSS file (element.width3 and width:430px;) before loading it to the client-side browser. To be clear I am not looking to swap out CSS files via JavaScript, I'm seeking options for a server side answer where the CSS file is server generated/recompiled during a session is there manipulation class in .Net framework or the razor view engine? or how can I achieve this
// below are static elements, that I want change values and the CSS "keys"
.variable-sizes .element.wdth2 { width: 230px; }
.variable-sizes .element.hght2 { height: 230px; }
.variable-sizes .element.width2.height2 {
// on the server side, from a usr setting,
// can I compute and fill this to some... Width * UserVal ?
font-size: 2.0em;
}

I got some of it working via dotless just seems a bit old, wondering if its still maintained.

Switch HTML page to media print mode

Is there a way to switch an HTML page to "print" mode?
When I print, a #media print style-sheet gets applied to the page.
I want to use the page with that print style applied to export to PDF as well. Ideally, if I could get the HTML that gets sent to the printer when I use window.print() I could export it to PDF. I use a server side library and C# to export to PDF.
Any ideas on how I can do this?
Thank you!

As per W3C standars there is no distinctive print mode for web pages except that you can define different CSS rules for #screen and #print media.
If you want to render a page as it is shown in print view somewhere it is show in screen view; use #print CSS for #screen also.

How to print the data from Datagrid in .net Windows Desktop Application

I am displaying the data from the MS access database in the DataGrid of a .net windows desktop application. Now I want to print the data of the DataGrid or want to take the Printout of the data of DataGrid only not of whole page. Can anybody help me to sort out my problem?
Please advice the answer in C# language.

Why create 2 pages , just add a separate style sheet for print like :
<link href="/Styles/PrintStyle.css" rel=" stylesheet" type="text/css" media="print">
And in css
.NonPrintable
{
display: none;
}
.NonPrintable, #Menu, #Footer
{
display: none;
}
You can call the css class like :
<body>
<input type="YouCantPrintMe" value="I am hidden" class="NonPrintable">
</body>

EDIT
Since you're printing a WinForms DataGrid I suggest you take a look at:
Code: Printing a DataGrid (Visual C#)
Printing a DataGridView on DotNet Framework
Printing Selected Columns and Rows in a DataGrid
ORIGINAL
Kind of confused. I think you mean "Asp.net Web Applicaion" meaning this runs in a web-browser.
So I'll answer with that in mind (if I have it backwards let me know).
The easiest C# answer is to have a separate Print.aspx page. Just put a single GridView on the page and populate it with the same data from the previous page. That way when the user prints (File->Print) they'll only get the data and not the other stuff you're trying to avoid printing.
Should also note that you can use JavaScript to invoke the print method of the browser as well, but this can't be done directly from C#.