Razor pages have a mechanism where you can reference named sections in your layout, and then specify them in your pages that use that layout. For example, if your Layout (_Layout.cshtml) looks like this:
#using...
...
<!DOCTYPE html>
...
<body>
...
#RenderSection("modals", required: false)
...
and then in your dashboard page, for example, you'd have:
<div>
...
</div>
...
...
#section modals
{
<div class="modal-container>...</div>
<div class="modal-container>...</div>
}
that would inject the contents of #section modals... into the place in the layout where #RenderSection("modals") is.
How can this be done in Blazor?
Unfortunately, no such feature is currently supported in Blazor. Blazor team and the community have been discussing the necessity of this feature over a year now, but for no avail. Read here about Sections in Blazor.
However, if you're looking for a 'temporary solution', you may read a comment by SteveAndeson about how to pass parameter values from a Blazor component page to its layout. I know that you're looking for a way to render the #Body plus #EndBody, but the principal remain the same: You have to create a layout component instead of the default layout
Hope this helps...
I have created a component to get something similar to sections:
https://github.com/inspgadget/BlazorSections
Related
I am trying to print each row in the picking ticket on a separate page and for now, am using the Row height to move each item to a new page but this is something not professional cuz when I made any change in the template the format is totally changed and this solution will not work so, I am looking for a style to make this solution more dynamic whatever the changes that may happen to the other tables in the PDF.
You can use the css property page-break-after: always for this purpose.
e.g.
<style>
div.ps { page-break-after:always}
</style>
...
<div class="ps">
... ps details
</div>
I have created several sections with plain HTML and CSS that I would like to use as "wrapper" sections for my clients to be able to populate using Elementor drag and drop interface. I have tried to do this creating a custom Elementor widget, but there is no "Controls_Manager::NAME_OF_CONTROL" that I could find that would correspond to an Elementor section or inner section. (Controls_Manager::WYSIWYG is actually just a text editor).
I've also tried creating an elementor section template that has two HTML blocks: one above and one below an empty elementor section. Like this:
---------- begin HTML (Elementor or Wordpress type) block ----------
<div class="myOpeningSectionDiv"> <!-- no, it's not just a single div, I'm using opening div as an example here for brevity -->
---------- end first HTML block ----------
---------- standard empty Elementor block with the little + button goes here ----------
---------- begin second HTML (Elementor or Wordpress type) block ----------
</div>
---------- end second HTML block ----------
This does not work, because Elementor wraps those custom HTML blocks in its own html tags which breaks things.
The closest I solution I could find is creating two templates. One template is the contents simple Elementor drag and drop contents that the client can edit. The second contains just one custom HTML block with a short-code pointing towards the first template. The client would then insert that into their page. This is not ideal because 1) When you preview the page, the contents of the shortcoded section do not show up, and 2) they have to edit that section separately from the rest of the page in the templates area and can't create other sections like it without messing with HTML directly or getting me involved.
I've been searching the internet for two days for a solution and came up short. Is this possible to do?
And no, I don't think I can use a theme page template, because I need them to be able to drag and drop other sections with elementor above and below this section.
To summorize I'm trying to do this:
[Some elemnentor drag and drop content]
<someCustomReusableHtmlIWroteHere>
[Section where you can drag and drop buttons, text, form, etc using Elementor]
</someCustomReusableHtmlIWroteHere>
[Some more elemnentor drag and drop content]
I hope I'm explaining this correctly. As far as software used: latest Wordpress and Elementor Pro.
Use Elementor PHP Hooks for this:
For example:
add_action( 'elementor/frontend/section/before_render', function ( \Elementor\Element_Base $element ) {
if('section' === $element->get_name()){
// your code here
}
} );
add_action( 'elementor/frontend/section/after_render', function ( \Elementor\Element_Base $element ) {
if('section' === $element->get_name()){
// your code here
}
} );
The only issue is that while this works on the actual rendered page,it doesn't show the extra HTML in the preview in Elementor. This seems to be an issue with the before_render and after_render hooks.
you can use Unlimited Elements for Elementor,
this plugin has functionality to create own widget with html, css and JS.
then you can re-use that widget anywhere on website.
https://wordpress.org/plugins/unlimited-elements-for-elementor/
I have a template html page(say Index page) containing a header and three other pages and i want that Header on first two pages but not on third page .Using angularjs routing I am able to have that header on all three pages but cant hide that header from the third page.The pages have different controllers as well .Can anybody help me how to achieve this.
This is not a good practice, not at all! But as your question lacks of code...
You say "The pages have different controllers", so let's say you have PageOneCtrl, PageTwoCtrl and PageThreeCtrl.
If you want to show the header on the page with controllers, let's say: PageOneCtrl and PageTwoCtrl, set a $scope (remember you have to define $scope on that controller first) variable just like:
$scope.showHeader = true;
And in PageThreeCtrl (where you want to HIDE the header element) write
$scope.showHeader = false;
Then in the html you should write:
<header ng-if="showHeader">This is your header content</header>
the ng-if will do the trick, check angularjs documentation for more information: https://docs.angularjs.org/api/ng/directive/ngIf
Doesn't work? Try $rootScope instead of $scope, but watch out! If you use $rootScope then you should declare that variable on every controller.
This is not a good practice, not at all! But as your question lacks of code...
A better practice, and one of the bests in my opinion, would be to use angular-ui-router and set a data attribute to the state (route) with something like
.state('myRoute', {
templateUrl: 'views/my-route-view.html',
controller: 'MyrouteCtrl',
data: {
hideHeader: true;
}
})
, in a .run() function set something like $rootScope.$state = $state (read more about it in the ui.router docs) and then simply: <header ng-if="!$state.current.data.hideHeader">. But I believe you're not an advanced developer to do it :) So keep learning.
I know bootstrap, semanticUI, foundation, etc.
My new project is a part of an old website. and we want to start implementing the new features with a normal css framework.
So, how do to implement a partial view?
lets say a with a framework css without rebuilding all the website from scratch ?
<body> <!-- regular old website css -->
<div class="old"></div>
<div class="everything-in-here-using-css-framework"></div>
</body>
is that possible? which framework support this ?
i don't fully understand but i think you can follow these steps:
make sure there are no matching conflicting class names with your framework (in foundation for example: columns, small-12, etc...)
include the framework's CSS file (you can link to a cdn just for testing)
start writing some new html elements and see how it goes.
if crashes occure (probably they will) start to change the old elements name - for instace add "old-" to every class you have.
another approach could be to move the existing project to SASS, then wrap the old CSS in a container like this
.old {
header { ... }
div { ... }
}
and put all the framework styles in something like this:
.new {
...
}
I think we'd be more helpful if you'll give more details.
Is it possible to write a custom html helper that has some content it it's body, similar to BeginForm?
I want to write a helper that displays a section only if the user has a particular role.
Something like:
#Html.DisplayForRoles("User, manager")
{
<div>You're admin or manager</div>
<div>Other stuff</div>
}
Yes, yes it is.
What you want is to create an HTML helper extension, there's several good guides out there which I won't reproduce here, such as
http://www.asp.net/mvc/tutorials/older-versions/views/creating-custom-html-helpers-cs
or
http://www.codeproject.com/Tips/720515/Custom-HTML-Helper-for-MVC-Application
Or were you after more specific help?