Develop Reference

Send string that contains HTML to WebAPI post action

I am struggling with some silly issue and I hope some of you guys has already encountered or has experience with something similar and will be able to help me out on this one.
I am using TinyMCE text editor in my app. And the content it generates is actually plain HTML.
So, I need to send that HTML via HTTP Post to my .net Core WebApi action.
When the html content is sent as it is, the .net framework is casting some of things(which makes sense). i.e. &nbsp is casted into \n, "(double quotes) are casted into \" and so on..
My question is, what is the best preferable way to encode (or somehow parse/escape) the html before it is sent so I can decode it on the server side and get the html the way it actually is?
Or maybe there is some c# library or attribute on the server side that will "uncast" the html to the original format that it was before it was sent over HTTP Post?
How the HTML looks on the client side before it is send on the server:
<p>This is the initial content of the editor</p><p> </p><h1>This is header</h1><p> </p><p><span style="background-color: #f1c40f;">This is colored </span></p><p> </p><p style="text-align: center;">This is centered </p>
And how it looks when it is received on the server side:
<p>This is the initial content of the editor</p>\n<p> </p>\n<h1>This is header</h1>\n<p> </p>\n<p><span style=\"background-color: #f1c40f;\">This is colored </span></p>\n<p> </p>\n<p style=\"text-align: center;\">This is centered </p>
It is adding \n before each and it is also escaping the double quotes. I interested in how can this be avoided?
Cheers.

Is there a way we can dynamically add pseudo-element css as inline css

Is there a way i can add below css as inline css using C# from codebehind
CSS
.slide .btn_six::after {
content: " ECHNOLOGY";
}
HTML
<div class="slide">
<a target="_blank" href="#" class="post-badge btn_six">T</a>
</div>
I have to list multiple articles and each article belongs to a category and each category i have to show in an animated manner where only first caharacter of word will be visible and when user hovers over it it then reveal whole category name as shown in template link.
I want to do this using C# from the codebehind file itself as it will be easy
I looked for example but could not find any relevant example

Can't be done.
A hover event is only possible to do from the client side with JavaScript or by using CSS :hover selector. While it could be possible to wire it up to send a request back to the server to write a segment of HTML and then replace the HTML element in JavaScript, this would not be very practical. It is much simpler just to write the class on the client side without making a round trip to the server or better yet, just set a CSS :hover and be done with it.

Asp.net: make div content partially bold

I have a div whose innerHtml is set in my c# code (.cs).
<div id="feedbackRow" runat="server"></div>
.cs
feedbackRow.InnerHtml = "Activate your account to access reward points and unlock deals, discounts and bigger savings!.</br>You will find an ACTIVATE link within the body of the email.If you did not recevied the email into your inbox then please check your spam folders. </br>Thanks again for using ABC";
Here I want to make bold "ACTIVATE" word or say some of the text should be in different color/font in above statement. How do I do that?

You could place the text you want to be bolded between <b> or <strong> tags.
<b>text</b>
or
<strong>text</strong>

maybe simple html:
feedbackRow.InnerHtml = "<strong>Activate</strong> ..."

C# - How can I cut a string at its end to fit in a div?

I'm making a list of recent news. So, it will show something like this:
- Take a look at the new Volks...
- John Doe is looking for a jo...
- Microsoft is launching the n...
So, the list above only shows me the title of the news and the length of each news is limited in 25 characters. But, this is not working well... for example, if you type 25 M's, it will explode my div.
I've been told that there is a way to calculate the length of the string and make it fit in a div automatically.
Does anyone know how to do it?
thanks!!

"text-overflow: ellipsis" is what you want but not everybody supports it. More info here...

I think you talking about is using the System.Drawing.Gaphics class's MeasureString() method.
However, this requires making a Graphics object which matches the font characteristics of your web page. But, your server process shouldn't know anything about the style elements of the web page, which should be handled by the CSS sheet.

I think you want to use css for this.
word-wrap:break-word;
should do it

One very simple way to prevent "exploding the div" is to use a css style to set the overflow of the div to scroll or hide the extra text instead of stretching to accomodate it.

I don't think there is an easy way to do this that works with all browsers and fonts.
The best way is just making sure your layout don't break if someone enters 25*m.
An useful thing to do is to split words that are more than X letter.
I the word-wrap css don't work that well on all browers.

This is not really a server-side problem, as the server shouldn't know what fonts people are using. You can do it using Ajax - post the font to the server, calculate the width (as James Curran mentioned), and return the right strings. However, the server may ont have the same fonts installed, and you have to calculate padding and margins on the server side.
I can think of several options on the client side:
Wrap every line with a span. A span would expand automatically to the width of the line. Using jQuery or your favorite javascript you can remove characters until the width is ok. (you can do a sort of binary search, where at every stage you add the ellipsis and checks the width)
Easy - Wrap every line with a fixed-width div and set it overflow:hidden, and add the ellipsis after the div. This will cut through letters though, and when you get a short text it'll still show the ellipsis.
Too easy - Use a fixed width font (they're mostly ugly).

As others have mentioned you can measure strings in thick client applications using System.Drawing.Graphics.MeasureString, but since you mention you want to fit it in an HTML div tag it would be perferable to let the browser handle the user interface using CSS.
<html>
<head>
<title>C# - How can I cut a string at its end to fit in a div? </title>
<style type="text/css">
.ellipsis li
{
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 166px;
}
</style>
</head>
<body>
<ul class="ellipsis">
<li>Take a look at the new Volksxxxxx</li>
<li>John Doe is looking for a joxxxxx</li>
<li>Microsoft is launching the nxxxxx</li>
</ul>
</body>
</html>
I used the unordered list tag (UL) instead of div since your sample list begins with a bullet character. Similar CSS would apply to DIV tags. And although all browser can be made to clip the content, not all browsers support the non-standard text-overflow: ellipsis style.

Font in Html mail

Using MailMessage email = new MailMessage();email.IsBodyHtml = true;
Is it possible to set the font for the message?
Also, maybe it's a quirk but p and br tags come out the same for me? Is this normal?

You can use CSS:
<style>
p {color:#999; font-family:arial;} /*grey*/
</style>
You are limited to what fonts are install on the receivers machine.

I would suggest researching using a style sheet attribute to change the font size.
Not sure what you mean by the 'and tags come out the same for me' part... come out the same as what?
...charles beat me to it

When dealing with HTML email's you will find a multitude of frustrations.
Some issues I can remember
Some mail clients won't render CSS when it is placed outside the <body> element.
Some mail clients won't render CSS at all.
A great resource for HTML email is email-standards.org

You can include css in body of mail. Since mail body is in html format, all html features can be used here.

No, break and paragraph tags are not the same.
Break just starts on a new line, paragraph adds some space around it. They also cause floating objects to behave differently around them.
They can also be styled independently using css.