I'm trying to wrap my head around something; maybe someone here can point me in the right direction.
Currently a have a form that has some controls on it like this:
#Html.ListBoxFor(s => s.SomeListSelection1, new MultiSelectList(Model.SomeList1, "Id", "Text"))
<br />
#Html.ListBoxFor(s => s.SomeListSelection2, new MultiSelectList(Model.SomeList2, "Id", "Text"))
<br />
#Html.ListBoxFor(s => s.SomeListSelection3, new MultiSelectList(Model.SomeList3, "Id", "Text"))
<br />
This form appears in many places with some slight variation on which controls are available.
The "slight variation" makes me not just want to do this as a partial view as I will either need to replicate the controls into many slightly varied partials or code the variation logic into the view.
So I think, "I know, I'll use the cool HTML Helper thingy!!"
But, all the HTML helper samples online are very simple html content. So the question is how can I use other HTML helpers inside an HTML helper? Or, if that is the wrong question is there another cleaner alternative to just making this a partial view with a bunch of conditional rendering logic?
Edit:
While the answer did technically answer my question, I had trouble making use of the blog entries for what I was trying to do. I found a better example (for me anyway) here:
ASP.NET MVC 3 Custom HTML Helpers- Best Practices/Uses
Yes, you can.
Helpers can contain arbitrary Razor markup.
In fact, the direct contents of a helper method is a code block, not markup.
For a more in-depth discussion about how helpers work, see my blog.
Related
Is there really any difference between
<form method="post" action="/Controller/Action"></form>
and
#using (Html.BeginForm("Action","Controller")) {}
when none of the other more complex parameters are used?
I know this question sounds really basic, but I am cautious to just use plain HMTL such as the former example.
It renders the same, and it is the same. The one possible advantage to the Razor syntax is that it's compiled, so there's no chance you'll be able to run your code without neglecting to add the </form> tag. I guess, arguably, it's also slightly more readable, especially if the rest of the file is heavy on Razor syntax.
In ASP.NET MVC 3, you can have an #section within a view:
#section SideBar {
<p>Some content</p>
<p>Some more content</p>
}
<p>Body content</p>
Then in the master view, you would use this to render it:
<div id="sidebar">
#RenderSection("SideBar", false)
</div>
#RenderBody()
What would be the ColdFusion equivalent of this in the Model Glue framework? I know I can set simple variables in the view:
<cfset event.setValue("section", "Tables")>
Then use them in the master template like so:
<cfif event.exists("section")><h3>#event.getValue("section")#</h3></cfif>
But this only works well for one-liners and simple strings. What I'd like to do is include an entire HTML block. What is the best way of accomplishing this? I think this would work in theory:
<cfsavecontent variable="sidebar">
<p>Some content</p>
<p>Some more content</p>
</cfsavecontent>
<cfset event.setValue("sidebar", sidebar)>
But I was wondering if there's a better way of doing it.
Edit:
In response to Adam Cameron's answer, Model Glue, from what I can tell, only supports the ability to combine separate files into one template:
SideBar.cfm:
<p>Some content</p>
<p>Some more content</p>
Page.cfm:
<p>Body content</p>
ModelGlue.xml:
<event-handler name="page.text">
<views>
<include name="sidebar" template="SideBar.cfm"/>
<include name="body" template="Page.cfm"/>
<include name="main" template="main.cfm"/>
</views>
</event-handler>
main.cfm:
<cfoutput>#viewCollection.getView("sidebar")#</cfoutput>
<cfoutput>#viewCollection.getView("body")#</cfoutput>
I need to be able to declare the sidebar content within the page.cfm view. The thought here is that there will be a div somewhere in the main template that allows for a small HTML snippet, say an image with a text description and a link, which any view can populate. It wouldn't make sense to have something like Page1.cfm and Page1SidebarContent.cfm, Page2.cfm and Page2SidebarContent.cfm, etc...
ModelGlue doesn't support what you want to do out of the box. However its easy enough to achieve using Peter's suggestion and ModelGlue helpers for encapsulation.
Create a new cfc, call it PageFragment.cfc and drop it in to your ModelGlue helpers directory.
// untested!
component name="PageFragment" {
public boolean function exists(string name) {
return structkeyexists(request.subcontent, arguments.name);
}
public string function get(string name) {
if(exists(arguments.name)) return request.subcontent[arguments.name];
return "";
}
public void function set(string name, string value) {
request.subcontent[arguments.name] = arguments.value;
}
}
Then in your views you can do
index.cfm
<cfset helpers.PageFragment.set("sidebar", "<p>My sidebar content</p>") />
main.cfm
<cfif helpers.PageFragment.exists("sidebar")>
<div id="sidebar">#helpers.PageFragment.get("sidebar")#</div>
</cfif>
To avoid having to cfsavecontent all your fragments you could create a customtag that used thistag.generatedcontent and the caller scope to access your helpers.
By using helpers to encapsulate the functionality its really easy to reuse, or to change later without altering your views, for example you may want to add caching.
(Unfortunately) I haven't touched MG for ages, but I just googled the docs, as a reminder.
You need to read up on how views work, but this page of the docs summarises it succinctly:
http://docs.model-glue.com/wiki/ReferenceMaterials/ViewApi#ViewAPI
Specifically this code snippet:
<cfoutput>#viewcollection.getView("body")#</cfoutput>
It's probably a case of reading through the docs a bit, and reminding yourself about how model glue's implementation of MVC (specifically the V part, in your case!) works.
I haven't used Model-Glue nor ASP.NET MVC, but it seems what you want can be achieved like this:
In page.cfm do:
<cfsavecontent variable="Request.SubContent['ThisPage'].Sidebar">
<p>Some content</p>
<p>Some more content</p>
</cfsavecontent>
<p>Body content</p>
Then in main.cfm use:
<div id="sidebar">
<cfif StructKeyExists(Request.SubContent,PageName)
AND StructKeyExists(Request.SubContent[PageName],'Sidebar')
>
#Request.SubContent[PageName].Sidebar#
<cfelse>
#viewCollection.getView("default_sidebar")#
</cfif>
</div>
<cfoutput>#viewCollection.getView("body")#</cfoutput>
Depending on how things are structured, you might prefer to cache content in a persistent scope and/or hide it behind a couple of methods (possibly even extending Model-Glue to allow this natively; it is Open Source after all), but hopefully this gives a general idea?
I see what you mean now. I'm not sure MG will have that sort of functionality built-in because in an MVC environment, it's not really up to a view to be doing this sort of thing: you're kinda coupling controller & model stuff together in a view file. There might be a good reason for you doing this, but I wonder if it's your approach that might be your undoing here? Can you not put the "get the sidebar" stuff into the controller & have that call a model, and add in a sidebar view if needed? That'd be how I'd approach this.
That said, I know it's unhelpful having people say "I'm not going to answer your question, I'm just going to complain about it", so I'll have a look-see around and see if I can come up with something.
However given you're wanting to break-out of a MVC approach here, perhaps don't try to get MG to do this for you, just do what Peter suggests and capture a variable in the page.cfm view, stick it in a sensibly-structured struct (nice tautology, Cameron), and then look for it in the view you want to render it.
I want to create a reusable ajax control in MVC .NET using RAZOR.
my example is a simple ajax text box and list where the user filters the list by typing in the text box. on the first call i would render both the text box and the list using my razor view. on subsequent AJAX calls i would want to ONLY render the (now filtered) list.
idea 1: use #if statement to conditionally render code.
problem: razor does not seem to like conditionally written html. for example it errors when a <div> tag is not followed by a closing </div>.
idea 2: use #section tokens to create portions of my control and then call RenderSection within the same file as needed.
problem: razor does not allow RenderSection to call sections in the same page
i know i can conditionally render html as strings, but i wanted to take advantage of the legibility of the razor markup and keep with development protocols.
You should be able to output <div> tags in a Razor block without the corresponding </div> tag by surrounding it with <text>. The reason is that Razor uses the closing tag to know when to drag back into code-parsing mode:
#if (myCondition)
{
<text>
<div>
</text>
}
As for the Section stuff, you might be able to achieve what you want using Templated Razor Delegates, like this:
#{
Func<dynamic, object> b = #<strong>#item</strong>;
}
// ...
<span>This sentence is #b("In Bold").</span>
See Phil Haack's blog for a little more on this.
I have an MVC3 site using Razor as its view engine. I want my site to be skinnable. Most of the possible skins are similar enough that they can derive from a shared master layout.
Therefore, I am considering this design:
However, I would like to be able to call RenderSection in the bottom layer, _Common.cshtml, and have it render a section that is defined in the top layer, Detail.cshtml. This doesn't work: RenderSection apparently only renders sections that are defined the next layer up.
Of course, I can define each section in each skin. For instance, if _Common needs to call RenderSection("hd") for a section defined in Detail, I just place this in each _Skin and it works:
#section hd {
#RenderSection("hd")
}
This results in some duplication of code (since each skin must now have this same section) and generally feels messy. I'm still new to Razor, and it seems like I might be missing something obvious.
When debugging, I can see the complete list of defined sections in WebViewPage.SectionWritersStack. If I could just tell RenderSection to look through the entire list before giving up, it would find the section I need. Alas, SectionWritersStack is non-public.
Alternatively, if I could access the hierarchy of layout pages and attempt execution of RenderSection in each different context, I could locate the section I need. I'm probably missing something, but I don't see any way to do this.
Is there some way to accomplish this goal, other than the method I've already outlined?
This is in fact not possible today using the public API (other than using the section redefinition approach). You might have some luck using private reflection but that of course is a fragile approach. We will look into making this scenario easier in the next version of Razor.
In the meantime, here's a couple of blog posts I've written on the subject:
http://blogs.msdn.com/b/marcinon/archive/2010/12/08/optional-razor-sections-with-default-content.aspx
http://blogs.msdn.com/b/marcinon/archive/2010/12/15/razor-nested-layouts-and-redefined-sections.aspx
#helper ForwardSection( string section )
{
if (IsSectionDefined(section))
{
DefineSection(section, () => Write(RenderSection(section)));
}
}
Would this do the job ?
I'm not sure if this is possible in MVC 3 but in MVC 5 I am able to successfully do this using the following trick:
In ~/Views/Shared/_Common.cshtml write your common HTML code like:
<!DOCTYPE html>
<html lang="fa">
<head>
<title>Skinnable - #ViewBag.Title</title>
</head>
<body>
#RenderBody()
</body>
</html>
In ~/Views/_ViewStart.cshtml:
#{
Layout = "~/Views/Shared/_Common.cshtml";
}
Now all you have to do is to use the _Common.cshtml as the Layout for all the skins. For instance, in ~/Views/Shared/Skin1.cshtml:
#{
Layout = "~/Views/Shared/_Common.cshtml";
}
<p>Something specific to Skin1</p>
#RenderBody()
Now you can set the skin as your layout in controller or view based on your criteria. For example:
public ActionResult Index()
{
//....
if (user.SelectedSkin == Skins.Skin1)
return View("ViewName", "Skin1", model);
}
If you run the code above you should get a HTML page with both the content of Skin1.cshtml and _Common.cshtml
In short, you'll set the layout for the (skin) layout page.
Not sure if this will help you, but I wrote some extension methods to help "bubble up" sections from within partials, which should work for nested layouts as well.
Injecting content into specific sections from a partial view ASP.NET MVC 3 with Razor View Engine
Declare in child layout/view/partial
#using (Html.Delayed()) {
<b>show me multiple times, #Model.Whatever</b>
}
Render in any parent
#Html.RenderDelayed();
See the answer link for more use-cases, like only rendering one delayed block even if declared in a repeating view, rendering specific delayed blocks, etc.
I'm not quite sure how this works yet... trying to find documentation.
In my existing app I've got two different ways of rendering strings in my View
<%: model.something %>
<!-- or -->
<%= model.something %>
The first one is html encoded, and the second one is not.
Is there something similarly short in Razor? All I can find is this, which is the encoded version.
#model.something
I guess the best approach would be to use the Raw extension-method: #Html.Raw(Model.Something)
#Model.Something automatically HTML encodes. If you want to avoid HTML encoding (and you want this only if you are absolutely sure what you are doing) you could use #MvcHtmlString.Create(Model.Something) (basically everything that implements IHtmlString won't be encoded). Phil Haack blogged about the Razor view engine syntax.