As Im building sort of a window/tool setup in MVC4 Im wondering is it possible to do like a #Html.Partial("_PartialToolWindow") In a page including all the tools to be loaded.
And then have this _PartialToolWindow load a defalut html template that should surround this code that the _PartialToolWindow contains?
For example...
<div class='boarder'>
<div class='innerBorder'>
--HERE IS THE SPECIFIC CONTENS--
</div>
</div>
This _PartialToolWindow should have loaded this border and innerBorder to surrond its own HTML.
You can use a section in your layout.
_Layout.cshtml
<div class='boarder'>
<div class='innerBorder'>
#RenderSection("PartialToolWindow")
</div>
</div>
Then you will be able to load specific content in your views:
#section PartialToolWindow
{
<span>content</span>
}
Related
I have an ASP.NET MVC app. In my app, I have multiple layout files (~10). I have a block of HTML that is similar across the layout files. For that reason, I want to put it into a reusable control, because I anticipate some change will be needed to it.
On some of the pages that reference my layout files that use this control, I want to insert something into that a content area of the control. To demonstrate, imagine I have a layout file like this:
_Layout.cshtml
#** MY REUSED BANNER CONTROL GOES HERE **#
<div class="container">
#RenderBody()
</div>
Banner.file [not sure what to use]
<div class="container-fluid">
<div class="row">
<div class="col-lg-3">
Hello
</div>
<div class="col-lg-3">
#RenderSection("bannerContent", required: false)
</div>
<div class="col-lg-3">
Leave
</div>
</div>
</div>
MyPage.cshtml
#{
Layout = "~/Views/Shared/_Layout.cshtml"
}
<div>
Main content goes here
</div>
#section bannerContent {
<div>This goes into Banner.file</div>
}
The above code does not work. It is there to communicate the idea. From my understanding, a partial view won't work because partial's don't support sections. What are my options here?
If I could understand you need something like this.
Create _banner.cshtml in ~/Views/Shared.
<div class="container-fluid">
<div class="row">
<div class="col-lg-3">
Hello
</div>
<div class="col-lg-3" id="banner_content"> // Here your page specific content will go
</div>
<div class="col-lg-3">
Leave
</div>
</div>
_LayOut.cshtml
#Html.Partial("_banner"); // Reusable banner html
<div class="container">
#RenderBody()
</div>
MyPage.cshtml
#{
Layout = "~/Views/Shared/_Layout.cshtml";
}
<div>
Main content goes here
</div>
#section Scripts {
$(document).ready(function(){
$('#banner_conten').html('Your dynamic part.');
});
}
I am not sure whether I understood your requirement completely or not. But check if it helps you.
I have been developing with MVC for a few years and this is a nagging issue I have encountered several times. I do not like any of the ways I have handled this in the past so I thought I would ask here.
Let's say I have a series of nested DIVs on my view:
<div id="outer">
<div id="inner1">
<div id="inner2">
</div>
</div>
</div>
At runtime I want to add another element, a DIV or anchor, inside of the outer div but have it contain the inner DIVs.
<div id="outer">
<div id="newone">
<div id="inner1">
<div id="inner2">
</div>
</div>
</div>
</div>
How would you recommend handling this?
I imagine this would have more to do with JavaScript than with the server-side code. And since ASP.NET MVC comes with jQuery, you may as well make use of the wrap() function. Something like this:
$('#inner1').wrap('<div id="newone"></div>');
The goal es to have a template :
<div class="container">
<div class="row">
<div class="col-lg-11">
#RenderBody()
</div>
</div>
</div>
and in normal cshtml:
#using ("template") {
// Any html razor content
}
#using ("template") {
// Other different html razor content
}
Is there anyway to achieve this using cshtml for templates (no c# or html writers) ?
I know it can be accomplished with partial views, but I want to avoid to create a partial view for every piece of content I want to wrap with that template.
Thanks.
Partial Views or js Templates as mustache or handlebars.
I do not think you can assign Template with razor syntax # to another server variable inline
you also can create Razor Helpers but if you do not want to use partialViews not sure if u want to do that
#helper MyTemplate(){
<div class="container">
<div class="row">
<div class="col-lg-11">
#RenderBody()
</div>
</div>
}
and use it as #HTML.MyTemplate
I'm using bootstrap upgrade service for upgrading from Bootstrap 2.x to 3.x
http://upgrade-bootstrap.bootply.com/
But I have a problem converting the razor syntax. For example I have:
<div class="row-fluid">
<div class="span12 form-actions">
<p>
<a class="btn" href="#Url.Action("ChooseAddItem", "Home")">Action</a>
</p>
</div>
</div>
And service returns:
<div class="row">
<div class="col-md-12 form-actions">
<p>
<a class="btn btn-default" href="#Url.Action("
chooseadditem="ChooseAddItem" home="Home">Action</a>
</p>
</div>
</div>
Look what happens to Url.Action function. This is only small example. I have a lot of files and a lot of code.
Is there any other way of converting razor views to bootstrap 3.x?
I'm the author of http://upgrade-bootstrap.bootply.com/
The problem you're seeing is because the service uses jQuery to manipulate the DOM and structure of your HTML. A headless browser is being used, and this changes the actual HTML content upon conversion.
I've added a new switch ("Modify nav and modal structure") to prevent this from happening, but as a result the structure of any modals and navs will not be converted to Bootstrap 3.
So, if you want to keep the Razor content the same, just uncheck the "Modify nav and modal structure" checkbox before you "Convert to Bootstrap 3" and it should work for you.
In rails, I'm used to use the yield/content_for to site mesh. (http://guides.rubyonrails.org/layouts_and_rendering.html#using-content_for)
I can't find in Grails documentation a way to do this... Could you help me?
EDIT
Here is the situation:
I have a layout containing this:
<body>
<div id="wrapper">
<div id="container">
<div id="header">
<g:render template="/layouts/header"/>
</div>
<g:render template="/layouts/menu"/>
<div id="container-homepage">
<g:layoutBody/>
<div id="subfooter">
<div id="content">
<div id="left">
<div id="logo_sub_header"></div>
</div>
<div id="right"></div>
</div>
</div>
</div>
</div>
</div>
</body>
And I want to be able to add a html snippet (search tool bar for example) juste above the container-homepage div. A partial could do the trick.. if this search tool bar was always the same. The thing here is that this search bar depends on the page i'm visiting.
I could also just change the position of the container-homepage div to put it directly into the view, and not the layout, but then i'll have to to it in ALL the views, and that's not DRY.
Any ideas?
Regards,
I think you have two solutions:
the g:render tag is the best option if your content block will not change based on a custom page.
Anyway I would take a look ah this link
http://grails.org/Content+Blocks
because g:pageProperty it is the most elegant and flexible solution.
Perhaps the g:render tag is what you're looking for? It allows you to render a template anywhere within your view (including in other templates). You can also pass in a model for the template to use.
Note the section at the bottom of that page on naming conventions -- template view gsp filenames should begin with an underscore (though that underscore is not supplied in the render tag). There's mos def a way to override this, but things work automagically if you put the underscore there.