Should I store markup in resource files? - asp.net-mvc

I read this article: Using HTML inside resource files but didn't find a satisfactory answer.
Basically, if I wanted to store:
<h2>Some heading</h2>
<p>An introduction for a series of steps</p>
<ol>
<li>Do x and y</li>
<li>Do y and z</li>
<li>Final step</li>
</ol>
would I put the whole thing into a resource entry or would I create a view that retrieved these values and marked them up?
<h2>#MyPage.Header</h2>
<p>#MyPage.Intro</p>
<ol>
<li>#MyPage.Step1</li>
<li>#MyPage.Step2</li>
<li>#MyPage.Step3</li>
</ol>
and then, if the final step contained markup like:
Make sure to read our disclaimers before continuing...
then would I have to write?
<li>
#MyPage.Step3MakeSure
#MyPage.Step3Read
#MyPage.Step3Before
</li>
the problem with embedding markup in the resource files is that now a translator needs to know to not touch the markup and if they do you're in trouble... but I can't think of a good structure?

Personally, I would use a templating for javascript such as Mustache or UnderScoreJs... then just load up the data based on a call to a controller action, see demo here for Mustache.
Mustache Demo

Related

Variable dustjs partial name

I am setting up some heavy split testing using dust.js on my single page app.
The base template looks like (simplified):
{>"layouts/master" /}
{<body}
<div id="container">
{?home}{>homeWelcome/}{/home}
</div>
{/body}
What I'm trying to do is have a folder containing N versions of the homeWelcome partial, and send N through the model to select the right template, like so :
{<body}
<div id="container">
{?home}{>/splits/homeWelcome_{partialNumber}/}{/home}
</div>
{/body}
But it (unsurprisingly) doesn't compile.
I could send params to the one homeWelcome template, and have all my splits in there but some are radically different from the others and it'd make for one hell of a long file.
In addition to that, I want to be able to add/remove partials in the splits directory dynamically (partialNumber is a rand from 1 to the number of files in the dir).
Any ideas how to achieve that?
Just add double quotes around the partial name and dust will happily parse the string before including a partial.
Note that partial names don't necessarily relate to folder structure, but I'm assuming you are compiling your templates with the appropriate names.

How to loop through properties in a tab and display them using Razor?

I have a Document Type, that has a tab with some properties.
The properties are Upload types, and Simple Editor types.
(Users are supposed to upload images with some image text).
I have not grouped the "Upload" and "Simple Editor" properties, so how do i do this?
Next question,
I want to loop through each group (there should be 3 currently) and display them on my website.
The markup should look like the following:
<div>
<img src="PATH-TO-UPLOAD-TYPE" />
<div>"TEXT FROM SIMPLE EDTIOR TYPE"</div>
</div>
..
<div>
<img src="PATH-TO-UPLOAD-TYPE" />
<div>"TEXT FROM SIMPLE EDTIOR TYPE"</div>
</div>
...
I would like to use Razor for this. Thanks in advance!
For the first part, using the Razor model, you can't. The content object that you get on the front end only contains the properties, the tabs are not included, as they're only really for organising things in the back office.
You CAN get that information using the Umbraco API, but it's pretty database intensive and could potentially be quite slow if you have a lot of properties/tabs.
You'd be better grouping them yourself in your Razor Macro.
for the second part, you can acces the properties of a page via #Model.property. For example:
<div>
<div>#Model.simpleProperty</div>
</div>

How to edit autocomplete suggestion list using Jquery autocomplete plugin?

I am created a demo of autocomplete using http://jqueryui.com/demos/autocomplete/
plugin.
Now the suggested list which appears on pressing key is
<ul>
<li>
Suggestion
</li>
</ul>
I have to edit the list like :
<ul>
<li>
<a>Suggestion</a>
<br />
<a>data1</a><a>data2</a>
</li>
</ul>
how can I do this? I seen script for autocomplete but not found any hint.
You can configure the autocomplete with the formatItem, and the parse properties of the configuration object.
This question has been answered here:
JQuery AutoComplete results format?
Looks like you want to add some HTML to the result. If that is correct, the jquery ui docs point to a resource (at the bottom of the docs page):
The label is always treated as text, if you want the label to be treated as html you can use Scott González' html extension. The demos all focus on different variations of the source-option - look for the one that matches your use case, and take a look at the code.
Or, you can add custom data using the open event of the autocomplete. See example here:
http://www.jensbits.com/2011/03/03/jquery-autocomplete-with-html-in-dropdown-selection-menu/

Raw Mako template included in another in Pylons

I'm trying to include a raw Mako template to make it appear in a textarea with Pylons.
In Pylons, I know I can include one Mako template in another like this:
<html>
<body>
Here is some HTML. Now, I want to include a template.
<%include file="${c.a_mako_template}" />
</body>
</html>
Is there a way that I can do the same thing, but have the template appear as raw markup rather than passing through Mako renderer? I'm imagining something like:
<%include file="${c.a_mako_template}" render="false" />
If that sort of thing is impossible, is the best route to write a Pylons controller that does the inclusion at a later stage?
Could I somehow wrap the file to be included in <%text> tags on the fly, perhaps using <% def>?
I've figured out a sort of workable solution. It still has one rough bit, but it works.
<%
path = '/path/to/file/'
f = open(path + c.sourcefile, 'r')
text_to_edit = f.read()
f.close()
%>
<textarea id="code">
${text_to_edit}
</textarea>
The first part is just a chunk of Python embedded in the template. It opens the file and extracts the text, thereby bypassing Mako.
The rough bit is the hardcoded path. I'll have to pass that as c.path, or something like that.

Designer-friendly views in Asp.Net MVC

I'm enjoying Asp.Net MVC and am looking to use it in an upcoming project. Part of the project, however, is an emphasis on being able to expose the project Views to designers for things like theming and so on. One problem I'm anticipating is that Asp.Net MVC views are rather developer-centric. I really don't want to have to educate designers on the intracies of <% vs. <%= let alone something like <% foreach ...
Take a typical MVC menu structure, for example.
<div id="menu">
<ul>
<li><%= Html.ActionLink("Home", "Index", "Main")%></li>
<li><%= Html.ActionLink("About", "About", "Main")%></li>
<li><% Html.RenderPartial("LogOnUserControl"); %></li>
</ul>
</div>
I'd much rather be able to tell designers to go with something like
<div id="menu">
<ul>
<li>{ActionLink "Home", "Index", "Main"}</li>
<li>{ActionLink "About", "About", "Main"}</li>
<li>{Partial "LogOnUserControl"}</li>
</ul>
</div>
Or
<div id="menu">
<ul>
<li><my:ActionLink text="Home" action="Index" controller="Main" /></li>
<li><my:ActionLink text="About" action="About" controller="Main" /></li>
<li><my:Partial name="LogOnUserControl" /></li>
</ul>
</div>
Yes, that last looks suspiciously like a raft of UserControls. Personally, I'm not a fan of actually using UserControls to do this if only because the rendering of those controls happens after pretty much everything else (as I understand it) and I'd prefer something that fits more in line with the MVC lifecycle. All I really need is a set of placeholders and a way to replace them with the relevant rendering.
So where's the best place to do so and what kind of trade-offs am I looking at here. I can imagine a couple of angles to come at this:
A custom ViewPage class where I can override something relevant. ViewPage.RenderView or ViewPage.FrameworkInitialize, maybe, but how you get at the text from there I don't know.
Create a custom TextWriter and override ViewPage.CreateHtmlTextWriter that I can then intercept the text output for replacing stuff. This is pretty late in the cycle, though, and will mess with other custom filtering if I'm not careful.
Create my own IView and ViewEngine classes. I didn't get far down this path before wondering if I was headed to a very bad place.
Custom UserControls that can mimic the functionality needed.
Opinions? Other options? Is my own ViewEngine my best option? My own ViewPage? Or are UserControl objects going to be adequate (please say no)?
Take a look at Spark. It's syntax is similar to your example.
As Charles Conway said, Spark is definitely way to go. Look at example. First, you create partial view in _ActionLink.spark with code:
<viewdata text="String" action="String" controller="String">
${ Html.ActionLink(controller, action, text) }
Then you use it like that in other views:
<ActionLink text="Home" action="Index" controller="Main" />
You just have to prepare partial views for your designers and then they an create view in prefered style. Isn't it easy?
EDIT:
Sorry, that was wrong. <ActionLink text="Home" action="Index" controller="Main" /> will not work, because Home, Index and Main are treates as variables. It may not be that easy to do it as you wish.
I have a similar requirement for a current project, except my 'designers' are more or less end users (people that know their way around html, but it's not their job) which leads to some additional challenges. My implementation is probably too specific for your needs but I'll quickly explain it lest it be useful to anyone else.
I wanted to totally avoid any kind of code in the views for the pages they would be designing so I decided to go with a templating system that does something similar to your point #2, but not at runtime. I am also using spark, although it's not for the benefit of the users as they won't be touching anything that looks like code.
Basically the users create a full html-only template that has placeholder tags for user controls and partial views. The users then upload the template through an interface that parses it and turns it into a spark view.
eg.
For a picture gallery, <gallery /> is parsed into something like !{Html.Gallery(Model)} or <use file="Gallery"/>. For a description field, <desc name="Kitchen" /> is parsed into !{Html.Description(Model, x => x.Descriptions.Kitchen)}. It also checks that "Kitchen" is in fact a property for the object/page that is being templated, or that the Model being passed in for a gallery actually contains a collection of images to avoid runtime errors.
Further properties can be specified in the tag to pass additional parameters to the parsed controls. If the control specified requires Javascript, then it is also included in the view. If there are any problems parsing, output is return specifying which placeholder is invalid and why.
While answered and accepted, I don't see the example of this: why don't you just use:
<li><a href='<%= Url.Action("Home", "Index")%>'>Main</a></li>
Similar in Spark. I prefer this to Html.ActionLink, Html.BeginForm, etc, whenever possible (almost always except for form controls where it's easier to have automatic name encoding with Html helpers).
And your designers do see the link.

Resources