Custom validation of CKEditor (RTE) in ASP.NET MVC - asp.net

I'm using ASP.NET MVC & CKEditor (Basic) to get input (almost exactly like this stack overflow RTE.) User's are limited to bold,italic,links.
I'm assuming I need to validate this server-side, incase someone issues CURL requests to my controller with any desired HTML in it. (I.E so they weren't limited by client-side validation).
So I need to allow, bold, italic, link tags, lists, but absolutely nothing else, how can this be achieved? I'll have a custom validator on my view model, but what is the best way to structure this custom validator? What to look for etc?

This could be achieved through regex and negative lookahead.
Something like that <(?!br/|br /|a|/a|strong|/strong|b|/b|i|/i|ul|/ul|li|/li>).+?> would match all tags except <br />, <a></a>, <strong></strong>, <b></b>, <i></i>, <ul></ul>, and <li></li>.
Then you could replace the matched occurences with an empty string.
For example this input (tested on regextester.com) :
test test link
Some <strong>text in bold</strong> and <b>another one</b> but also something
in <i>italic</i>
<ul>
<li>Now</li>
<li>a list</li>
</ul>
<table>
<tr>
<td>And a table</td>
</tr>
</table>
<br />
<hr />
Would become :
test test link
Some <strong>text in bold</strong> and <b>another one</b> but also something
in <i>italic</i>
<ul>
<li>Now</li>
<li>a list</li>
</ul>
And a table
<br />

Related

How to make jQuery rendered content editable in Sitecore experience editor

We have a Sitecore project and the code/files are from an ASP.NET web application.
The HTML for the products section is as follows
<div class="products-section">
<ul class="tabs">
<li>Product 1</li>
<li>Product 2</li>
</ul>
<div class="product">
<h3>Product Name</h3>
<img src="/images/img1.jpg" />
<span>Description</span>
</div>
</div>
This is how it works for an end user.
EU will click on a Product tab (eg: Product 1), which will change the content inside <div class="product">, without postback.
For the author, this section must be editable from the Experience editor. Usually, I would use asp:Repeater with sc:Text,sc:Image to render it.
But, here the data has to be retrieved using ajax calls, which means no Repeater or Sitecore controls.
In such case, how can I make the content editable from Experience editor.
The only ideas I came up with:
Get data of all the products in Page_Load, bind it using Repeater and then use jQuery to Show/Hide the respective divs. (doesn't seem a nice way though)
Tell the content author, that this section can only be edited from Content editor and not from the experience editor :)
What are my options here.
One option could be to render your page differently when in the experience editor. Check the mode in your code and use a repeater when editing, otherwise use the jquery output.
You can use Views to easily display/hide the output you want.
<asp:MultiView runat="server" ID="ProductsView">
<asp:View runat="server" ID="StandardView">
<div ...>
...
</div>
</asp:View>
<asp:View runat="server" ID="EditorView">
<asp:Repeater..>
...
</asp:Repeater>
</asp:View>
</asp:MultiView>
In your code behind:
ProductsView.SetActiveView((Sitecore.Context.PageMode.IsExperienceEditor || Sitecore.Context.PageMode.IsExperienceEditorEditing) ? EditorView : StandardView)
Based on the active view, you can decide to attach data to the repeater or not (don't do that when the StandardView is active, for performance)
I'm not sure why would an end user interact with Experience Editor as Experience editor is used by Content Authors for authoring the site and updating the content on the Page itself.
But if this is a requirement for a Content Author you can use the sitecore services client api for updating the content using ajax call.
Use this document to see how ssc works.
Let me know if you have a different ask.

ASP Wizard Step

I am not particularly proficient in ASP, so I might be missing something obvious here. I have a series of webpages that are using a wizardstep in asp to process. In the HTML markup that is returned there are some issues that have been brought to my attention to do with accessibility. The problem is that basically the HTML table returned is using attributes, rather than css style to display the data. I cannot see anywhere in the asp code where these attributes are being specified so I am unable to amend them. Would anyone be able to point me in the right direction?
Cheers.
<form id="form1" runat="server">
<h2><span style="font-size:90%;">
Code of Conduct for Members</span></h2>
<div style="text-align: center">
<asp:Wizard ID="Wizard1" runat="server" DisplaySideBar="false" width="550px" ActiveStepIndex="0" OnFinishButtonClick="Wizard1_FinishButtonClick">
<WizardSteps>
<asp:WizardStep ID="WizardStep1" runat="server" Title="Step 1">
<!-- <h2> -->
<span style="font-size:110%;position:relative;">Introduction</span></h2>
<p >
<span style="font-size:90%;">
This is from the iframe within this webpage: http://www.leicestershire-fire.gov.uk/cfa/complaints_members.shtml
Basically I can see this on the generated page as:
<table cellspacing="0" cellpadding="0" border="0" id="Wizard1" style="width:550px;border-collapse:collapse;">
<tr style="height:100%;">
<td align="left" valign="top" style="background-color:White;border-color:White;border-style:Solid;">
It looks like you are using an old version of ASP.NET, which is notorious for using inline styles instead of css classes.
There are two possible solutions:
Upgrade to ASP.NET 4. Search this page for "wizard": http://msdn.microsoft.com/en-us/library/s57a598e.aspx. This is preferable, although upgrading may alter the look and feel of your other pages and components. There are ways of making it backwards-compatible (see TargetFramework)
Install a CSS Adapter: http://www.asp.net/CssAdapters/ - as you can see though, this hasn't been updated since 2006.
You may also find this page useful so you can see an example of what the issue is and how they solve it with CSS Adapters: http://www.asp.net/cssadapters/Membership/CreateUserWizard.aspx

jQuery Mobile data-filter to read dynamic content

I'm trying to implement a search bar to filter dynamic content in jQuery mobile by first letter. I want to implement data-filter like this: http://jquerymobile.com/demos/1.0a4.1/docs/lists/docs-lists.html#../../docs/lists/lists-search-inset.html
Super easy to do. However, I have a minor problem throwing me off. All my content is dynamic. Each record being read is a new list. Because data-filters are used for lists, I have a search bar above each record. My .NET code for my output looks like this:
<asp:Repeater ID="Repeater27" runat="server" DataSourceID="SqlDataSource27">
<ItemTemplate>
<ul data-role="listview" data-inset="true" data-filter="true">
<li class="list-head"><strong><%# Eval("Name")%></strong></li>
<li class="list-body"><%# Eval("GrEmail")%></li>
<li class="list-body"><%# Eval("Telephone")%></li>
</ul>
</ItemTemplate>
</asp:Repeater>
Because I am using a Repeater to list my dynamic content, it too is repeating my filter. I have tried moving the filter outside of my repeated region, and this doesn't work. In addition, the filter has to be attached to the list it is reading to work anyway.
Is there a work around from using a repeater in .NET?
Or is there a workaround for filters?
Can data-filter work for collapsible-sets?
I'm open to any and all suggestions. I greatly appreciate any insight you may have to offer. This has got to be a common problem with implementing dynamic content on a site. I'm wondering how the jQuery mobile documentation did this??
Thoughts?
Only Li should be repeated !! :)
change it with
`
<ul data-role="listview" data-inset="true" data-filter="true">
<asp:Repeater ID="Repeater27" runat="server" DataSourceID="SqlDataSource27">
<ItemTemplate>
<li class="list-head"><strong><%# Eval("Name")%></strong></li>
<li class="list-body"><%# Eval("GrEmail")%></li>
<li class="list-body"><%# Eval("Telephone")%></li>
</ItemTemplate>
</asp:Repeater>
</ul>
`
The should be outside of the repeater. The remaining dynamic content should then be within only one set of tags.

My text isn't html?

I am using ckeditor to save my texts... (asp.net mvc)
In the database the text are stored like this:
<ul><li>List item</li><li>List item</li><li>List item</li></ul>
And when I am running my website I want it look like this:
List item
List item
List item
But the text are the same as in the database:
<ul><li>List item</li><li>List item</li><li>List item</li></ul>
And the source code are:
<ul>
<li>
List item</li>
<li>
List item</li>
<li>
List item</li>
</ul>
What am I missing?
Your text is being HTML encoded, if for example you're using <%: Prop %> this will happen, if you want it to render exactly, you want <%= Prop %>. There are a dozens of ways to get HTML into a page so I'm not sure exactly which method you're taking, but whichever way it is, it's passing through the Html encoder along the way.
Keep in mind storing the text and displaying it like this does render your site vulnerable to cross-site scripting and other attacks, so you will probably want to sanitize the incoming HTML.
Try using Server.HtmlDecode:
http://msdn.microsoft.com/en-us/library/hwzhtkke.aspx

How to avoid Adding runat="server" destroying my server tags <%...%>

Adding runat="server" is not rendering my server tags <%...%>
I have a masterpage with a few <li> for menu and since I have to set class=selected for the current page, I am using a little server tag to find the url and assign the particular class.
I have total of 10 <li> and not all menu is available to all types of user, I need to toggle few of the <li> if the user is not admin, so I have runat="server" added to them so I can set their visible=false through c#
Here is how it is at a glance:
<li runat="server" id="liBlog" class='<%= Request.Url.AbsoluteUri.EndsWith("/Blog") ? "selected" : "" %>'>Group Blog</li>
<li runat="server" id="liPoll" class='<%= Request.Url.AbsoluteUri.EndsWith("/Poll") ? "selected" : "" %>'>Poll</li>
<li id="liInvite" class='<%= Request.Url.AbsoluteUri.EndsWith("/Invite") ? "selected" : "" %>'>Invite</li>
<li id="liFavourite" class='<%= Request.Url.AbsoluteUri.Contains("/Favourite") ? "selected" : "" %>'>My Favourites</li>
The <li> without runat="server" works fine, when on correct page the source code shows class="selected" or class="" as appropriate, the other <li> used to work fine too, until I decided to add the runat="server".
Once I added that runat="server", the whole block of class="" is being sent out to the html page, its not processing the server tags at all! I right click on the html and look at the source, it's being rendered as:
<li id="ctl00_ctl00_ContentPlaceHolder1_liBlog" class="<%= Request.Url.AbsoluteUri.EndsWith("/Blog") ? "selected" : "" %>">Group Blog</li>
It's pouring out my server tags into the source code!
Why is this behaviour seen? How can I avoid it?
I looked up a lot of similar threads in here and there was nearly nothing in google, so made this, I dont think this is a duplicate question.
You can't use the <%= %> syntax inside the properties of tags that have the runat="server" attribute on them.
You either need to:
Set the properties via your code-behind
Create an Expression Builder (and part 2 and part 3) and use the <%$ %> syntax (note: these are links to stuff I wrote on my blog, so, beware the self link =)
for your requirement you can also use ASP.NET menu and XmlSiteMap to do the same thing.

Resources