ASP.NET MVC theme editor on UI - asp.net

I'm building a multi-tenant application that allows a tenant to edit the layout (HTML) on the UI in the administration control panel. I thought that I can build an editor for user to edit the razor view but It's need to be compiled to effect the new razor view.
I look into some open source applications. I find this one http://liquidmarkup.org/ It was developed for usage in Ruby on Rails web applications
Anybody have any experience & reference for this in ASP.NET MVC?

Not 100% sure if this is what you are looking for but you could develop your site using jQuery themes (CSS and markup) and then use the theme roller for your clients?

It sounds like you can use Jquery Templates (http://api.jquery.com/category/plugins/templates/) to meet your need.
Here is a random (greatly condensed) sample template from one of my projects:
<table>
<tr>
<th>Response Status</th>
<th>Response Reason</th>
</tr>
<tr>
<td>${RepsonseStatus}</td>
<td>${ResponseReason}</td>
</tr>
Note the ${} tags - these will be replaced with json data at runtime.
And here is how to merge a template with its data
//myTemplate can be sent from a server side function
var myTemplate = SomeFunctionToGetMyTemplate();
//myData is a javascript object/json from the server
var myData = SomeFunctionToGetMyData();
//the html function just replaces the html of the context node (#myTargetDiv) with the //output of the $.tmpl function
$("#myTargetDiv").html($.tmpl(myTemplate, myData));
Jquery Templates are officially deprecated, but there is no official replacement from jquery yet (afaik). There are some helpful video tutorials on pluralsight for jquery templates.

Highwire.com is built on ASP.NET but they use custom templating and custom UI abilities for clients using Apache Velocity Platform.
http://docs.highwire.com/apiv2/html/
Maybe you could use it as well

Related

How can I translate strings in Blazor components and App.razor?

I want to localize strings of shared components like "NavMenu.razor" or the "App.razor" page.
I managed to translate content in my pages as described in the general .NET Core instruction and the more specific Blazor documentation:
Create a resource file with the right name (e.g. PageName.de.resx).
Inject localizer into Razor page with #inject Microsoft.Extensions.Localization.IStringLocalizer<PageName> _l10n.
Translate text inside the page with _l10n["Product name"] which gets translated correctly to "Produktname".
This approach did not work for neither "NavMenu.razor" nor "App.razor".
Please note: I use MatNavMenu from the MatBlazor UI lib for main navigation.
I cannot find it documented anywhere. Help is much appreciated.
Easy:
Install Microsoft.Extensions.Localization
in programs.cs
builder.Services.AddLocalization(options => options.ResourcesPath = "Resources");
builder.Services.AddScoped<IStringLocalizer<App>,StringLocalizer<App>>();
Create a Resources folder in your client project. Add a resx file to
that for instance App.resx this will be your default resources. Then
add more files for each language you wish to support. App.fr.resx
App.es.resx ect.
Then in a component inject
#inject IStringLocalizer<App> L
#L["YourText"]
The localizer will use browsers language and look in, in my case, App.en-AU.resx, App.en.resx, App.resx order for the key. If not found it will use "YourText"
Here is a blazor WASM project repo

Kentico CSS issue

I am using Kentico and have noticed a weird css issue. After mocking my pages up in Dreamweaver I then create the page in Kentico, however I have noticed that some elements in Kentico are slightly misaligned.
I have tried copying the source from Kentico into Dreamweaver to see if I can fix the issue but Kentico still renders the content incorrectly.
Are you using Dreamweaver in design or split mode? if yes, turn it off and use code mode only.
I guess you have to compare structure of your HTML and Kentico output HTML. Kentico add a form tag by default which may cause structural issue with css. If you can provide both html, I can help
On Kentico (up to version 11) when you use portal engine or ASPX templates you have this shortcoming. Kentico adds excessive HTML markup on the controls it creates on order to provide hooks that will help the engine to perform actions. For example, Bizforms add multiple divs/spans around normal input tags. So, you have to adapt the CSS you have created to match the tags used by Kentico.
What is your template type:
ASPX page: You can copy your entire HTML code from Dreamweaver into your aspx page template and then work on your page.
Portal Page: You need to understand the structure and cannot replace entire HTML Code from Dreamweaver. You have to seperate your HTML code to insert DropZone for web parts and widgets.
Good Luck!
You will have to make some adaptation always from raw HTML and kentico. In your case you are using aspx model which makes it more harder as server level changes are not 100% compatible with raw HTML or client side code. If possible use portal engine with transformation which will be more like to like of raw HTML.
You must create a directory in CSS/Stylesheet
If you're using the CSS section of the Admin interface, check to see if you have any & signs at the beginning of any tags. Kentico doesn't seem to support this so might be breaking any classes that appear after it.

Reading a HTML resource file using asp .net

I am trying to write a windows services that will generate email based on HTML templates. I want my HTML templates to be included in my project as resources. Do i have read these these template files as using filestreams or are there built in C# functions to read these files as resources.
Is there better way to use HTML files as templates for generating emails in asp .net
Thanks
SCS
You just need to create resource file (.resx), then fill it in key/value manner like key = "email_template", value = "your html template". And after you will have the class with the field called email_template, and it will provide you your html template without any additional coding.
UPD
O, also you could save your template like asp.net user control (*.ascx) and then render it to string with technique described in this article
The same variant possible in MVC world. It could be done this way

asp.net mvc3 - external includes or sharing layouts across projects?

Ok, I'm still new to Asp.Net and MVC3. I'm becoming more familiar with things but still experimenting after finishing my first web application (a simple web form submission into a database). Now I am working on smaller projects such as converting some old ColdFusion web forms that submit e-mails. I've easily accomplished this in MVC3 but all of our web pages are in a separate content management system where our central HTML template is. I've already asked a question about this here and didn't get anywhere.
What we have is the majority of our web pages get exported from the CMS as straight HTML files, and only the ones that need database access or a programming language are exported as ColdFusion. It's very easy to "include" ColdFusion code to use inside of the template in our CMS. I would love to be able to use this HTML template in my mvc3 project but I've found no way to perform an "include" or link to an external file. I'm not sure how this would work anyway, so I settled on just copy/pasting the template to mvc3 and figuring out a way I can share this template (now a "layout") between all of the small projects I'll be working on. If the template changes I do not want to have to update every single little mvc3 web application. I learned about using "Areas" but it seems you can't just publish a single area to a folder on the web server, the whole project has to be deployed.
All I really need is a way for small mvc3 projects to use one template and these small mvc3 projects to be scattered all over our web server. Would this best be done in one large project that publishes to multiple different folders, or as many small projects that can share a common layout? Is either of these two possible?
After attempting and experimenting with all of this, I'm beginning to think MVC is not going to work with what I want. It seems better suited for intranet applications or entire web sites, not this little "here and there" applications like what I want. Should I learn Web Forms instead? I know I can "include" a aspx file inside our CMS much like I do with ColdFusion.
Do your templates have to be "exported" from the CMS? Or, can you have a template that "lives" on a static CMS URL? This is what we do for apps that need db access / can't be easily done within the CMS, but need to share the same look and feel.
What you can do is have your plain old HTML file live at a URL, for example, https://cms.domain.tld/templates/designxyz.html. That file will serve up a basic layout, except where your custom app content goes, you simply have the string "content goes here".
Then, from the MVC app, you can call this URL to get the HTML content as a string. Once you have the string, you can split it in 2 before and after the "content goes here" string. Then, in your layout.cshtml file, you can do something like this:
#{
const string contentPlaceholder = "content goes here";
var allHtml = GetHtmlTemplateFromLiveServer();
var index = allHtml.IndexOf(contentPlaceholder);
var topHtml = allHtml.Substring(0, index);
var botHtml = allHtml.Substring(index + contentPlaceHolder.Length);
}
#topHtml
#RenderBody()
#botHtml
If something like this works, you can then abstract all of this away into a HTML Helper, then reuse that helper in other projects (NuGet would be good for this).
_Layout.cshtml
#{
var options = new CmsTemplateRenderOptions
{
Url = "https://cms.domain.tld/templates/designxyz.html",
Cache = new TimeSpan(1, 0, 0);
};
}
#Html.RenderCmsTemplate(CmsTemplateRenderRegion.Top, options)
#RenderBody()
#Html.RenderCmsTemplate(CmsTemplateRenderRegion.Bottom, options)
Then, to update the layout for all of your apps, you would just publish changes to the https://cms.domain.tld/templates/designxyz.html URL.

Syntax-highlighting textbox for Winforms, ASP.NET, WPF

I'm looking for a syntax-highlighting Textbox component, preferably free, with source, and capable of being used in Winforms, ASP.NET and WPF alike. Also, it should support not just display, but also editing contents.
I've discovered the excellent, FREE ActiPro SyntaxHighlighter for ASP.NET but that's unfortunately ONLY for ASP.NET and it only displays text in syntax highlighted manner, it has no editing capabilities.....
I also know of the ICSharp Text Editor component that's part of SharpDevelop but that's then a standalone, but Winforms only, solution.
Does anyone know of a component that has a core to handle the syntax-highlighting (configurable, so I can use it for C# code, XML and HTML files, and more), and that has three "skins" for Winforms, ASP.NET and WPF? I'd really prefer to have ONE core that does the heavy lifting, and three UIs on top sharing that core code....
Any pointers and hints are welcome!
I'm with you marc: I'd love to see an extensible syntax highlighting framework that could generate a tokenized "document" object which could then be displayed via controls for each display framework. This way the parser/tokenizer could be written once!
The best I can say is that this thread suggests that ActiProSoftware is working on a WPF control for their syntax highlighter.
Perhaps consider CodeMirror items for the web. Obviously this won't work for WPF as you'd asked, but it'll work for any web framework - Webforms, ASP.NET MVC, plain HTML, PHP and others.
CodeMirror is a JavaScript library that can be used to create a relatively pleasant editor interface for code-like content ― computer programs, HTML markup, and similar. If a parser has been written for the language you are editing (see below for a list of supported languages), the code will be coloured, and the editor will help you with indentation.
Parsers for :
JavaScript
XML/HTML
CSS
HTML mixed-mode
SPARQL
HTML+PHP mixed-mode
Python
Lua
Ruby
SQL
PLSQL
diff
Groovy
C#
Scheme
Java
XQuery
OmetaJS
Freemarker
Implementation:
<textarea rows="30" cols="120" id="someCode" >
//some comments
var foo = "bar";
</textarea>
You include 2 .js references, and then this bit of JavaScript replaces your textarea elements with new syntax highlighted elements.
<script type="text/javascript">
var textarea = document.getElementById('someCode');
var editor = new MirrorFrame(CodeMirror.replace(textarea), {
height: "350px",
content: textarea.value,
parserfile: ["tokenizejavascript.js", "parsejavascript.js"],
stylesheet: "css/jscolors.css",
path: "js/",
autoMatchParens: true
});
</script>
The CodeMirror manual helps.
Also consider the WikiPedia entry for Comparison of JavaScript-based source code editors
All those platforms are completely different and each have their own rendering display methods. So there won't be any universal control that does all. Each platform will have a separate control
However, one can implement a web control and use it in a page. Then a browser object in winforms or wpf can use the page address to display it

Resources