Using TagHelpers in Area Views - asp.net-core

I spent the last hour refactoring to use Areas, now all my Views don't seem to have function taghelpers :/
So this is what's in the Index.cshtml
<div class="btn-group">
<a asp-controller="Survey" asp-area="Admin" asp-action="Create" class="btn btn-primary">Create New</a>
</div>
...and this is the rendered HTML :/
<div class="btn-group">
<a asp-controller="Survey" asp-area="Admin" asp-action="Create" class="btn btn-primary">Create New</a>
</div>
Intellisense doesn't even show the asp- prefixes and syntax highlighting on the asp- attributes is also lost.
Other SO issues reference "asp-route-area" but that just renders out verbtim like the rest.
These all worked fine when they were in ~/Views/Name/Index.cshtml, move them out to ~/Areas/Name/Views/Name/ and nopers...
Any thoughts?
Steve

According to official docs:
The #addTagHelper directive makes Tag Helpers available to the view.
In this case, the view file is Views/_ViewImports.cshtml, which by
default is inherited by all view files in the Views folder and
sub-directories; making Tag Helpers available. The code above uses the
wildcard syntax (“*”) to specify that all Tag Helpers in the specified
assembly (Microsoft.AspNetCore.Mvc.TagHelpers) will be available to
every view file in the Views directory or sub-directory.
If you use one layout per area, to use built-in tag helpers you should add _ViewImports.cshtml in ~/Areas/Name/Views/ folder(If you use shared layout you don't need. See MusicStore project for shared layout example).
I guess you used one layout per area and you didn't add _ViewImports.cshtml ~/Areas/Name/Views/. Copy /Views/_ViewImports.cshtml into ~/Areas/Name/Views/.

As it turns out, adding the _ViewImports.cshtml file to the Areas/ folder cascades the visibility of the file to all Areas/{area}/views within the folder.
So rather than:
-> Areas
--> Area1
----> Views
------> _ViewImports.cshtml
--> Area2
----> Views
------> _ViewImports.cshtml
We can just do:
-> Areas
--> Area1
--> Area2
--> _ViewImports.cshtml
Or more visually

Related

CMS Outlet References is not clear how to work

In this doc I found that I can customize our CMS templates, slots and components:
Data-driven outlets are provided by the CMS structure. There are three types, as follows:
CMS Page layout name: Each page layout is available as an outlet reference.
CMS page slot positions: Each slot position is an outlet reference. Since slot positions are not necessarily unique throughout the CMS structure, an outlet template might occur more then once. There is currently no standard technique available to limit the outlet for a specific position or page.
CMS Component type: Each component type is available as an outlet. While component type-driven outlets can be used, it is generally considered best practice to leverage Customizing CMS Components for introducing custom component UI.
Could you please provide any example how to do that with outlets if I have next custom structure:
<main>
<cx-page-layout class="AccountDetailsPageTemplate">
<cx-page-slot class="BottomHeaderSlot"></cx-page-slot>
<cx-page-slot class="AccountMenuSlot"></cx-page-slot>
<cx-page-slot class="AccountContentSlot"></cx-page-slot>
</cx-page-layout>
</main>
As result I would like to have next layout view:
I know how to do that using global styles only, but preferably is to use templates (outlets), because it can be the case when we require to add some extra parent div's over the slots and so on.
To build such structure with provided set of Slots, we can do next:
app.component.html (REQUIRED)
<ng-template cxOutletRef="AccountDetailsPageTemplate">
<app-account-details-page></app-account-details-page>
</ng-template>
account-details-page.component.html
<h1>
Hello AccountDetailsContentSlot
</h1>
<div class="d-flex">
<div class="w-50">
<cx-page-slot position="AccountMenuSlot"></cx-page-slot>
</div>
<div class="w-50">
<cx-page-slot position="AccountContentSlot"></cx-page-slot>
</div>
</div>
I didn't put here BottomHeaderSlot, because it should't be here, it should be implemented in cx-header component.

Blazor layout component as mvc razor page layout

For login, registration pages I'm using MVC .cshtml views. I have a Blazor component as my layout for Blazor pages and I want to apply it for mvc pages as well and avoid duplicate my layout.
Is that possible? if not what's the solution?
I َAppreciate any help and solution
This is covered in the docs for using razor components alongside MVC. Simply put, you don't use Blazor-style layouts. Rather, your MVC layout is utilized by the _Host.cshtml, and your routeable razor components are loaded within that.
Chris guided us to the doc to refer to (Thank you, Chris!). For those who still wish to try using Blazor-style layouts in MVC or Razor page projects, follow all instructions in the doc Chris pointed out and you can get a view like:
The above is rendered with a Blazor layout component (CustomLayout1.razor):
#inherits LayoutComponentBase
<div class="container-fluid border border-primary p-3">
<p>CustomLayout1</p>
<div class="container-fluid border border-danger p-3">
#Body
</div>
</div>
and a routable Blazor component which uses the custom layout (LayoutTest_Body.razor):
#page "/test"
#layout Views.Shared.CustomLayout1
<p>LayoutTest_Body</p>
As a sample for nested layouts, I added another Blazor layout component (CustomLayout2.razor) which is embedded into CustomLayout1:
#inherits LayoutComponentBase
#layout Views.Shared.CustomLayout1
<div class="container-fluid border border-warning p-3">
<p>CustomLayout2</p>
<div class="container-fluid border border-info p-3">
#Body
</div>
</div>
and changed the #layout of LayoutTest_Body.razor from CustomLayout1 to CustomLayout2:
#page "/test"
#layout Views.Shared.CustomLayout2
<p>LayoutTest_Body</p>
to get:
Please note that:
Blazor layouts can only be applied to routable components (see doc) like LayoutTest_Body.razor at the first line of which holds #page directive followed by a unique route string.
Above samples are based on AspNetCore5.0.
Only MVC images are shown, but the same for Razor pages except for a few differences in configurations and settings described in the doc Chris pointed out. Be careful to follow all the instructions.
As is often the case, templates provided by Visual Studio do not necessarily follow the way the Microsoft docs show (e.g. doc: app.MapBlazorHub(); , template: app.UseEndpoints(endpoints => { endpoints.MapBlazorHub(); });).
Passing parameters to layouts can be done through App.razor. In case of MVC project, (i) Create the parameter data and let public IActionResult Blazor() to pass it to _Host.cshtml via ViewBag, (ii) Let _Host.cshtml to pass the parameter data to App.razor by setting param-[paramname]="#ViewBag.xxxx", (iii) Receive the parameter at App.razor which in turn passes it to descendants as CascadingValue and finally (iv) Let any descendants to consume it as CascadingParameter. Passing non-serializable parameter to Blazor components is not allowed at the time of this posting, but creating a dictionary for layout settings and passing it in JSON format could be one solution for a centralized management of various layouts.

Aurelia eating my Bookmarks

I am working on a legacy application that is being rewritten using Aurelia, the application has a bunch of static html in a tblHelp that needs to be displayed. I am using innerhtml.bind on a div in my view to databind the stored static HTML into the view. Each record is essentially a document complete with a full table of contents that links to other divs within the document (Bookmarks).
Something like:
<div id="toc">
<h1>Table of Contents</h1>
<ul>
<li>Section 1<li>
<li>Section 2<li>
</ul>
</div>
<div id="section1">
<h2>Section 1</h2>
<p>Paragraph Text...</p>
<p>Back to Table of Contents</p>
</div>
<div id="section2">
<h2>Section 2</h2>
<p>Paragraph Text...</p>
<p>Back to Table of Contents</p>
</div>
When I display the resulting page in my Aurelia view and click on the links, rather than moving to the proper Div on the current page, it seems to be attempting to route to an unknown route and ends up returning to the home page (that is my unknown route behavior). How do I make the Aurelia Router know that I am just moving around the same page and do not require it to route to another page?
I think you need to change your <div id= to <a id= which is the correct syntax for anchors. Hopefully Aurelia will recognize them as legitimate anchors when formatted correctly.
Also, since an anchor tag shouldn't wrap the whole content, you'll just open and close it at the top of the div. You can even leave the divs there but should not duplicate the id.
Update:
That being said, I created a GistRun that actually demonstrates that Aurelia should be able to handle the <div id= anchor targets. So, I'm not exactly sure why you're having problems.
Maybe this GistRun or the more standard <a id= approach will help you.

IBM Worklight 6.1 - Unable to have a working Dojo view transition

I am new to working with worklight enviroment and started working it on recently.
I am using dojo version 1.9 (the IBM supllied one) , worklight 6.1, OS windows 7, eclipse juno sr2 64bit, IE 10 (For RPE), Google chrome latest (As default browser).
I have tried many widgets in dojo mobile and all of them work fine, i have been through other questions too like "Worklight 6.1 Android Applicaiton renders all views with no widgets" and followed all steps given in the solution and successfully created and viewed the pages on both MBS and android emulator.
The only problem is when i am working with views. I add a tabBar from dojo and TabBarButtons for view transitions . Also add a few views in the pages and link them with the buttons. I also check and see that my main.js file is updated with all included elements.
Although the toolbar along with default view is visible it does not switch view when i click on other buttons in tabBar.
also onclicking the TabBarButtons an error popsup in chrome console -
Uncaught TypeError: undefined is not a function
This error pops up on each click .
here is the structure of my source code of in the body tag of index.html file :-
<body style="display: none;">
<div data-dojo-type="dojox.mobile.View" id="view2"
data-dojo-props="selected:true">
<div data-dojo-type="dojox.mobile.View" id="view0" data-dojo-props="selected:true" >
<div data-dojo-type="dojox.mobile.Heading"
data-dojo-props="label:'Hello world'"></div>
<button data-dojo-type="dojox.mobile.Button">Hello</button>
<input data-dojo-type="dojox.mobile.TextBox"><input type="range"
data-dojo-type="dojox.mobile.Slider"
data-dojo-props="orientation:'H'">
</div>
<div data-dojo-type="dojox.mobile.View" id="view1"
data-dojo-props="selected:false">
<div data-dojo-type="dojox.mobile.Heading"
data-dojo-props="label:'About',moveTo:'view0'">
</div>
<div data-dojo-type="dojox.mobile.RoundRect">
Hello, we are a leading company in innovations
</div>
</div>
<ul data-dojo-type="dojox.mobile.TabBar" fixed="bottom" id="Tab1">
<li data-dojo-type="dojox.mobile.TabBarButton" data-dojo-props="moveTo:view0,transition:'slide'" id="tabB1">Home</li>
<li data-dojo-type="dojox.mobile.TabBarButton" data-dojo-props="moveTo:view1,transition:'slide'" id="tabB2">About</li>
</ul>
</div>
<script src="js/initOptions.js"></script>
<script src="js/main.js"></script>
<script src="js/messages.js"></script>
</body>
// Rest all is default code, no changes in jquery version or anything else
I have also tried the following things and none of them seem to work:-
-Copied and replaced files in www folder from dojoLib/dojo/dojo/nls/core-web-layer.js and mobile-web-layer.js files.
-Kept the Tabbar out of any view directly into body tag and linked views to it.
-Added id attribute to tabBar and tab button elements, and view elements.
-turned off provide missing library resources and included missing files (if any) ,rebuilt the project and ran again.
The main issue (causing the exception) is the missing quotes around the view ids of the moveto attributes. It should be:
data-dojo-props="moveTo:'view0',
Once fixed, your sample will work.
But there are another issue, this time a design one: the TabBar fixed property is only meaningful when used with a ScrollableView (this property ensures the tabbar is not scrolled and keeps its bottom position). So your outer view should be a ScrollableView instead.
Also, note that nesting views come with some limitations. In particular, using the 'moveto' attribute you cannot transition from a view to another view if the latter is contained in another parent.
Do not hesitate to look at the various tests in dojox/mobile/tests and to the documentation

Is there a way I can choose where ASP.MVC places my form validation errors?

I am using ASP.NET MVC 4 HTML.BeginForm and it creates a validation-summary-errors class as
below. This doesn't fit with my layout. Is there a way that I can make it put the
validation div class in a different place?
<form action="/User/Account/Login" method="post" novalidate="novalidate">
<div class="validation-summary-errors">
<ul>
<li>The user name or password provided is incorrect.</li>
</ul>
</div>
<fieldset>
<legend>Local Login</legend>
<ol>
<li>ation-summary-errors in a different position?
Well, sure, it's up to you to put the #Html.ValidationSummary() helper call which generates this markup wherever you want. As far as controlling the exact markup that this helper spits, that would be much more difficult because this helper offers you almost no control over the generated markup.
If you need to have more control you could write a custom helper.
You can use #Html.ValidationMessage("validation-errors") and put it in any HTML tag and then can use CSS to give it a style.