Show dynamic breadcrumb based on preservedRouteParameters for MvcSiteMapProvider - asp.net-mvc-5

I'm using MvcSiteMapProvider for ASP.NET MVC5 project. I want to show a dynamic breadcrumb based on preservedRouteUrlParamters. I have multiple universities and each university has courses. I don't want to list all the university in the mvc.sitemap.
Instead of:
url: /stanford
breadcrumb: home / university
url: /stanford/course1
breadcrumb: home / university / course details
It should look like:
url: /stanford
breadcrumb: home / stanford
url: /stanford/course1
breadcrumb: home / stanford / course details ...where stanford is link to /stanford
url: /mit
breadcrumb: home / mit
url: /mit/course1
breadcrumb: home / mit / course details ...where mit is link to /mit
So this is the pattern:
url: /{university}
breadcrumb: home / {university}
url: /{university}/{course}
breadcrumb: home / {university} / course details
Here is the mvc.sitemap config I have:
<mvcSiteMapNode title="university" controller="Curriculum" action="UniversityDetails" preservedRouteParameters="university">
<mvcSiteMapNode title="course details" action="CourseDetails" preservedRouteParameters="university,course"/>
</mvcSiteMapNode>
This is solution I have so far but I'm not sure if it is a good way.
I use title="{university}" and check for the pattern {university}.
<mvcSiteMapNode title="{university}" controller="Curriculum" action="UniversityDetails" preservedRouteParameters="university">
<mvcSiteMapNode title="course details" action="CourseDetails" preservedRouteParameters="university,course"/>
</mvcSiteMapNode>
I use the SiteMapNodeModel.Url to dynamically generate the breadcrumb.
public static string TitleBreadcrumb(this SiteMapNodeModel m)
{
if (m.Title.StartsWith("{") && m.Title.EndsWith("}"))
{
return m.Url.Split(new[] { '/' }, StringSplitOptions.RemoveEmptyEntries).Last();
}
return m.Title;
}
I then use the above extension method in the SiteMapNodeModel.cshtml display template.
// use #Model.TitleBreadcrumb() instead of #Model.Title
#Model.TitleBreadcrumb()
Similar for #Model.Description.
Is there a better way?

The only thing particularly wrong with your approach is that you are not encoding the value from the URL before displaying it in your HTML. This means that some malicious user could potentially inject HTML and/or JavaScript into your page by manipulating the URL.
However, the most common way to provide a dynamic title is to use the SiteMapTitleAttribute, which uses a value from your Model or a value in your ViewData to populate the title dynamically.
[SiteMapTitle("Name")]
public ViewResult UniversityDetails(string university) {
var model = _repository.Find(university);
// Name is a string property of
// the university model object.
return View(model);
}
[SiteMapTitle("Name", Target = AttributeTarget.ParentNode)]
public ViewResult CourseDetails(string university) {
var model = _repository.Find(university);
// Name is a string property of
// the university model object.
return View(model);
}

Related

Highlight links in a Quick Links web part on SharePoint modern page

We have added 4 "Quick Links" web/app part in one section on a SharePoint modern page. We would like to highlight links under "Quick Links web part 2" and "Quick Links web part 4" only. I have added React modern script editor. How do we archive the above requirement using CSS ? If it is not possible in CSS then we would like to introduce JS. I couldn't find a fixed tag name that I can grab and apply CSS except GUID.
You could try to inject CSS by SPFX.
Check the demo shared by hugoabernier.
Main code:
export default class InjectCssApplicationCustomizer
extends BaseApplicationCustomizer<IInjectCssApplicationCustomizerProperties> {
#override
public onInit(): Promise<void> {
Log.info(LOG_SOURCE, `Initialized ${strings.Title}`);
const cssUrl: string = this.properties.cssurl;
if (cssUrl) {
// inject the style sheet
const head: any = document.getElementsByTagName("head")[0] || document.documentElement;
let customStyle: HTMLLinkElement = document.createElement("link");
customStyle.href = cssUrl;
customStyle.rel = "stylesheet";
customStyle.type = "text/css";
head.insertAdjacentElement("beforeEnd", customStyle);
}
return Promise.resolve();
}
}

Orchard CMS - Extending Users with Fields - exposing values in Blog Post

I'd like to extend the users content definition to include a short bio and picture that can be viewed on every blog post of an existing blog. I'm unsure of what the best method to do this is.
I have tried extending the User content type with those fields, but I can't seem to see them in the Model using the shape tracing tool on the front end.
Is there a way to pass through fields on the User shape in a blog post? If so, what is the best way to do it?
I also have done this a lot, and always include some custom functionality to achieve this.
There is a way to do this OOTB, but it's not the best IMO. You always have the 'Owner' property on the CommonPart of any content item, so in your blogpost view you can do this:
#{
var owner = Model.ContentItem.CommonPart.Owner;
}
<!-- This automatically builds anything that is attached to the user, except for what's in the UserPart (email, username, ..) -->
<h4>#owner.UserName</h4>
#Display(BuildDisplay((IUser) owner))
<!-- Or, with specific properties: -->
<h1>#T("Author:")</h1>
<h4>#owner.UserName</h4>
<label>#T("Biography")</label>
<p>
#Html.Raw(owner.BodyPart.Text)
</p>
<!-- <owner content item>.<Part with the image field>.<Name of the image field>.FirstMediaUrl (assuming you use MediaLibraryPickerField) -->
<img src="#owner.User.Image.FirstMediaUrl" />
What I often do though is creating a custom driver for this, so you can make use of placement.info and follow the orchard's best practices:
CommonPartDriver:
public class CommonPartDriver : ContentPartDriver<CommonPart> {
protected override DriverResult Display(CommonPart part, string displayType, dynamic shapeHelper) {
return ContentShape("Parts_Common_Owner", () => {
if (part.Owner == null)
return null;
var ownerShape = _contentManager.BuildDisplay(part.Owner);
return shapeHelper.Parts_Common_Owner(Owner: part.Owner, OwnerShape: ownerShape);
});
}
}
Views/Parts.Common.Owner.cshtml:
<h1>#T("Author")</h1>
<h3>#Model.Owner.UserName</h3>
#Display(Model.OwnerShape)
Placement.info:
<Placement>
<!-- Place in aside second zone -->
<Place Parts_Common_Owner="/AsideSecond:before" />
</Placement>
IMHO the best way to have a simple extension on an Orchard user, is to create a ContentPart, e.g. "UserExtensions", and attach it to the Orchard user.
This UserExtensions part can then hold your fields, etc.
This way, your extensions are clearly separated from the core user.
To access this part and its fields in the front-end, just add an alternate for the particular view you want to override.
Is there a way to pass through fields on the User shape in a blog post?
Do you want to display a nice picture / vita / whatever of the blog posts author? If so:
This could be your Content-BlogPost.Detail.cshtml - Alternate
#using Orchard.Blogs.Models
#using Orchard.MediaLibrary.Fields
#using Orchard.Users.Models
#using Orchard.Utility.Extensions
#{
// Standard Orchard stuff here...
if ( Model.Title != null )
{
Layout.Title = Model.Title;
}
Model.Classes.Add("content-item");
var contentTypeClassName = ( (string)Model.ContentItem.ContentType ).HtmlClassify();
Model.Classes.Add(contentTypeClassName);
var tag = Tag(Model, "article");
// And here we go:
// Get the blogPost
var blogPostPart = (BlogPostPart)Model.ContentItem.BlogPostPart;
// Either access the creator directly
var blogPostAuthor = blogPostPart.Creator;
// Or go this way
var blogPostAuthorAsUserPart = ( (dynamic)blogPostPart.ContentItem ).UserPart as UserPart;
// Access your UserExtensions part
var userExtensions = ( (dynamic)blogPostAuthor.ContentItem ).UserExtensions;
// profit
var profilePicture = (MediaLibraryPickerField)userExtensions.ProfilePicture;
}
#tag.StartElement
<header>
#Display(Model.Header)
#if ( Model.Meta != null )
{
<div class="metadata">
#Display(Model.Meta)
</div>
}
<div class="author">
<img src="#profilePicture.FirstMediaUrl"/>
</div>
</header>
#Display(Model.Content)
#if ( Model.Footer != null )
{
<footer>
#Display(Model.Footer)
</footer>
}
#tag.EndElement
Hope this helps, here's the proof:

How to Config MVCSiteMap to realize the parameters?

I'm new to MVCSiteMap and I have a simple question:
I use the default route config like this:
routes.MapRoute(
name: "Default",
url: "{controller}/{action}/{id}",
defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional });
Now in my controller, I want to create and edit an entity in the same Action:
public ActionResult AddEdit(int? id)
{}
so if the id is null, it means add, and if it is not null then the action is edit.
Now I want the site map to realize the different from add and edit. I tried this:
<mvcSiteMapNode title="Parent" controller="Class" action="Index">
<mvcSiteMapNode title="Add" controller="Class" action="AddEdit" />
<mvcSiteMapNode title="Edit" controller="Class" action="AddEdit" inheritedRouteParameters="Id"/>
</mvcSiteMapNode>
but seems it does not work well. It always use the second one.
What should I do?
Thanks a lot.
There are 2 options.
Option 1
Create a single node that sets preservedRouteParameters="id" on each of the nodes that correspond to an action method with a parameter. This creates a 1-to-1 relationship between the nodes and action methods, but a 1-to-many relationship between the node and the actual entities.
<mvcSiteMapNode title="Products" controller="Product" action="Index">
<mvcSiteMapNode title="Create New" controller="Product" action="Create" visibility="SiteMapPathHelper,!*" />
<mvcSiteMapNode title="Details" controller="Product" action="Details" visibility="SiteMapPathHelper,!*" preservedRouteParameters="id">
<mvcSiteMapNode title="Edit" controller="Product" action="Edit" visibility="SiteMapPathHelper,!*" key="Product_Edit" preservedRouteParameters="id"/>
<mvcSiteMapNode title="Delete" controller="Product" action="Delete" visibility="SiteMapPathHelper,!*" preservedRouteParameters="id"/>
</mvcSiteMapNode>
</mvcSiteMapNode>
This is the recommended way to do it if you are creating pages that edit data, especially if those pages will never be indexed by search engines.
In most cases, you will also need to setup the FilteredSiteMapNodeVisibilityProvider and SiteMapTitleAttribute to fix the visibility and title of the nodes. You won't be able to use this method for anything other than a breadcrumb trail, so it is important to hide these fake nodes from the other HTML helpers like the Menu and SiteMap.
For a complete demo of how this can be done, visit How to Make MvcSiteMapProvider Remember a User's Position.
Option 2
Use a custom IDynamicNodeProvider to create a node per entity (1-to-1 relationship).
public class StoreDetailsDynamicNodeProvider
: DynamicNodeProviderBase
{
public override IEnumerable<DynamicNode> GetDynamicNodeCollection(ISiteMapNode node)
{
using (var storeDB = new MusicStoreEntities())
{
// Create a node for each album
foreach (var album in storeDB.Albums.Include("Genre"))
{
DynamicNode dynamicNode = new DynamicNode();
dynamicNode.Title = album.Title;
dynamicNode.ParentKey = "Genre_" + album.Genre.Name;
dynamicNode.RouteValues.Add("id", album.AlbumId);
yield return dynamicNode;
}
}
}
}
To use this, you need to ensure you set up your key and parent keys in code so each node understands what parent node it belongs to. You may need to explicitly set the "key" attribute in your XML in order to do this. You also need to ensure you set the "id" routeValue on each record to ensure your node matches your incoming route.
Use this method when your pages must be indexed by search engines and/or you want to see the nodes in the menu.
Do note that you can combine these 2 options in the same application and it will work fine. Both of these methods will also work for any number of custom route values (other than "id") as well.

Craeting Custom Widget in Orchard 1.7

I am new to Orchard. So please forgive me if there is anything looking silly!
I want to create a custom widget for my Orchard website to encourage visitors to sign up for my Newsletter service. I have seen there is an option of using HTML widget but I want to create a new widget type like "Newsletter" which I shall use conditionally at AsideFirst block.
Is this possible to do? I only want to grab visitor's Name and Email address, and the form submission will be done using an action controller.
Do I have to create this widget through by-hand coding in VS? In fact I want to this way, not through the Orchard admin console.
Seeking for help. Any suggestion please?
Edit:
I have managed to create the widget following Sipke Schoorstra's suggestion. The area where I want to display the widget is now showing along with the the title I set from admin at the time of adding it to a zone. But the content (form elements) I created in the view is not displaying.
The View: (Views/NewsLetterSignupPart/NewsletterSignup.cshtml)
#model Emfluence.Intrust.Models.NewsLetterSignupPart
#{
ViewBag.Title = "Newsletter Signup";
}
#using (Html.BeginForm("NewsletterSignup", "NewsLetter", FormMethod.Post))
{
#Html.AntiForgeryToken()
<div class="row-fluid">
<div class="span6">
<label>Name</label>
<input type="text" name="txtNewsletterUserName" required maxlength="50" style="width: 95%" />
<label>Email</label>
<input name="txtNewsletterUserEmail" type="email" required maxlength="85" style="width: 95%" />
<button class="btn pull-right">Submit</button>
</div>
</div>
}
Migration.cs
public int UpdateFrom15()
{
ContentDefinitionManager.AlterTypeDefinition(
"NewsletterWidget", cfg => cfg
.WithPart("NewsLetterSignupPart")
.WithPart("CommonPart")
.WithPart("WidgetPart")
.WithSetting("Stereotype", "Widget")
);
return 16;
}
NewsLetterSignupPart.cs
public class NewsLetterSignupPart : ContentPart<NewsletterSignupRecord>
{
[Required]
public string Name
{
get { return Record.Name; }
set { Record.Name = value; }
}
[Required]
public string Email
{
get { return Record.Email; }
set { Record.Email = value; }
}
}
And NewsletterSignupRecord.cs
public class NewsletterSignupRecord : ContentPartRecord
{
public virtual string Name { get; set; }
public virtual string Email { get; set; }
}
Where I am doing wrong?
The Custom Forms module is great if you don't want or need to code something yourself. In case you do want to handle form submissions yourself without using Custom Forms, this is what you could do:
Create a custom module
Create a migrations class that defines a new widget content type (see the docs for details on how to do this. Note: you don't need to create a custom part. You don't even need to create a migrations file to create a content type - you could do it using a recipe file. The nice thing about a migration though is that it will execute automatically when your module's feature is enabled).
Create a view specific for content items of your widget type (e.g. Widget-Newsletter.cshtml).
Inside of this view, write markup that includes a form element and input elements. Have this form post back to your controller.
Create your controller.
In the /admin interface, click Modules, on the Features` tab search for Custom Forms and click Enable. This will add a new Forms admin link on the left.
Next, create a custom content type (under Content Definition) called Newsletter, and add two fields (of type Text Field) called Name and E-mail.
Finally, click Forms and add a new Custom Form. Give it a title: this will be the default URL to access e.g. "Newsletter Form" will have a URL of /newsletter-form by Orchard defaults. Under Content Type select your newly created content type, Newsletter, from the dropdown. Customize anything else you want on this page, and click Publish Now
If you want to make this a widget, edit the content type and add the Widget Part. Create a layer with the rules you need and you can add the "Newsletter" widget to any zone you need on that layer.

How to hide portlet in liferay by using javascript

Actually on a single page I have 2 portlet but I want to hide the first portlet by clicking the submit button and only the second portlet should be visible I used the following code:
document.getElementById("portlet-id").style.visibility='none'
But after refreshing the page, again portlet is visible can anyone provide me the solution as to how I can proceed.
You can set the visibility of the portlet to false in the JSP by using the following code:
<%
renderRequest.setAttribute(WebKeys.PORTLET_CONFIGURATOR_VISIBILITY, Boolean.FALSE);
%>
This would hide your portlet from user's view.
Everytime your portlet is rendered you can check a parameter which was set in the request or session (your choice) to either show the portlet or not show the portlet, like:
<%
String paramFromRequestToHide = renderRequest.getParameter("hidePortlet");
// can also fetch from session: portletSession.getAttribute("hidePortlet");
if (paramFromRequestToHide .equals("YES")) { // you can use your favorite data-type
renderRequest.setAttribute(WebKeys.PORTLET_CONFIGURATOR_VISIBILITY, Boolean.FALSE);
} else {
renderRequest.setAttribute(WebKeys.PORTLET_CONFIGURATOR_VISIBILITY, Boolean.TRUE);
}
%>
Another method:
If you don't want to go with the above approach then you can combine your javascript approach with the parameter approach as follows:
<%
String paramFromRequestToHide = renderRequest.getParameter("hidePortlet");
if (paramFromRequestToHide .equals("YES")) {
%>
<aui:script>
Liferay.Portlet.ready(
/*
This function gets loaded after each and every portlet on the page.
portletId: the current portlet's id
node: the Alloy Node object of the current portlet
*/
function(portletId, node) {
document.getElementById(portletId).style.display = 'none';
// or alternatively using pure Alloy UI
// node.hide();
}
);
</aui:script>
<%
} else {
%>
<aui:script>
Liferay.Portlet.ready(
function(portletId, node) {
document.getElementById(portletId).style.display = 'block';
// or alternatively using pure Alloy UI
// node.show();
}
);
</aui:script>
<%
}
%>
In case you want to check-out Alloy UI API and some of the demos to learn Alloy UI since starting from Liferay 6.1 Alloy UI is the de-facto javascript library for liferay. Now Alloy UI has an official web-site with many helpful tutorials and examples.
Hope this gives you ample material to proceed :-)
You also can do like this :
If your portlet id is : callcenter_WAR_xyzyportlet
$('#p_p_id_callcenter_WAR_xyzyportlet_').css({display:'none'});

Resources