Rendering html elements in SharePoint Webparts without explicit tags in ASCX file

Web Parts are part of the ASP.NET technology and are used extensively in Microsoft SharePoint installations. They are used to display or manipulate content on a SharePoint site by the end user. The changes made can be made visible for all or only for certain users. In addition, settings can be saved and assigned permanently to the user who made them. This allows users to tailor a web page to their own needs without the intervention of the administrator. This feature is called personalization.

For example, Web Parts are used to display SharePoint libraries or lists. For example, if a document library is created in a SharePoint site, it can be displayed multiple times on a SharePoint page by multiple Web Parts, for example, once by date of the last change and hierarchically by the folder structure of the document library. Also the selection of the displayed elements and attributes can be varied between the different Web Parts.

Like most SharePoint elements, Web Parts can be assigned and with separate display and editing rights. These are independent of the rights of the library or list displayed by the Web Part.

While building a Webpart solution in Visual Studio one other way of initializing and loading .js and .css files (also including glyphicons, images etc) while creating a SharePoint WebPart project is to add them in as a SPModule and including them as a Generic html controls or also as the namespace for this class goes as HtmlGenericControl

I will describe the following aspects which can be involved using HtmlGenericControl below :

Meta Tags
Script links
Html tags (if necessary)

Meta Tags

Metadata is primarily intended to improve the searchability of the World Wide Web or a single website in SharePoint. In addition, specific instructions for controlling the search engines of search engines can be recorded using metadata. During the early days metadata was used as a secret weapon to be listed as far above as possible in a search engine.

In SharePoint Meta tags are used for optimal retrieval of information for your SharePoint site

Here below is a code which can be easily integrated into webpart ASCX CS file like this with the below code which includes the HtmlGenericControls.

The custom CSS and JS files are included as a SPModule and are referenced using a relative url

	[ToolboxItemAttribute(false)]
	public class CustomWebPart : Microsoft.SharePoint.WebPartPages.WebPart
	{
	// Visual Studio might automatically update this path when you change the Visual Web Part project item.
	private const string _ascxPath = @"~/_CONTROLTEMPLATES/15/test/CustomControl.ascx";

	private const string RelativeFolderCss = "../ReferencedFiles/css";
	private const string RelativeFolderJs = "..ReferencedFiles/js";
	protected override void CreateChildControls()
	{
	IModuleBinder moduleBinder = new ModuleBinder();

	List<List<HtmlGenericControl>> consolidatedControls = new List<List<HtmlGenericControl>>();

	List<HtmlGenericControl> metaTags = new List<HtmlGenericControl>();
	metaTags = moduleBinder.ControlDefinitionMetaTags();

	consolidatedControls.Add(metaTags);

	List<HtmlGenericControl> javascriptControls = new List<HtmlGenericControl>();
	javascriptControls = moduleBinder.ControlDefinitionJavascripts(RelativeFolderJs);

	consolidatedControls.Add(javascriptControls);

	List<HtmlGenericControl> cssControls = new List<HtmlGenericControl>();
	cssControls = moduleBinder.ControlDefinitionCss(RelativeFolderCss);

	consolidatedControls.Add(cssControls);


	foreach (List<HtmlGenericControl> genericControls in consolidatedControls)
	{
	foreach (HtmlGenericControl htmlControls in genericControls)
	{
	this.Controls.Add(htmlControls);
	}
	}

	Control control = Page.LoadControl(_ascxPath);
	Controls.Add(control);
	}
	}

view raw CustomWebPart.cs hosted with ❤ by GitHub

	public class Initializer : IModuleBinder
	{
	private List<HtmlGenericControl> genericControl = null;

	public List<HtmlGenericControl> ControlDefinitionMetaTags()
	{
	genericControl = new List<HtmlGenericControl>();

	try
	{
	HtmlGenericControl metaTagCharSet = new HtmlGenericControl("meta");
	metaTagCharSet.Attributes.Add("charset", "utf-8");
	genericControl.Add(metaTagCharSet);

	HtmlGenericControl metaTagCompatibility = new HtmlGenericControl("meta");
	metaTagCompatibility.Attributes.Add("http-equiv", "X-UA-Compatible");
	genericControl.Add(metaTagCompatibility);

	HtmlGenericControl metaTagEdge = new HtmlGenericControl("meta");
	metaTagEdge.Attributes.Add("content", "IE=edge");
	genericControl.Add(metaTagEdge);

	HtmlGenericControl metaTagViewPort = new HtmlGenericControl("meta");
	metaTagViewPort.Attributes.Add("name", "viewport");
	metaTagViewPort.Attributes.Add("content", "width=device-width,initial-scale=1");
	genericControl.Add(metaTagViewPort);

	HtmlGenericControl metaTagAuthors = new HtmlGenericControl("meta");
	metaTagAuthors.Attributes.Add("name", "author");
	metaTagAuthors.Attributes.Add("content", "Mahesh");
	genericControl.Add(metaTagAuthors);

	return genericControl;
	}
	catch (Exception ex)
	{
	throw ex;
	}
	}
	}

view raw

ModuleBinder.cs

hosted with ❤ by GitHub

	public class Initializer : IModuleBinder
	{
	private List<HtmlGenericControl> genericControl = null;

	public List<HtmlGenericControl> ControlDefinitionMetaTags()
	{
	genericControl = new List<HtmlGenericControl>();

	try
	{
	HtmlGenericControl metaTagCharSet = new HtmlGenericControl("meta");
	metaTagCharSet.Attributes.Add("charset", "utf-8");
	genericControl.Add(metaTagCharSet);

	HtmlGenericControl metaTagCompatibility = new HtmlGenericControl("meta");
	metaTagCompatibility.Attributes.Add("http-equiv", "X-UA-Compatible");
	genericControl.Add(metaTagCompatibility);

	HtmlGenericControl metaTagEdge = new HtmlGenericControl("meta");
	metaTagEdge.Attributes.Add("content", "IE=edge");
	genericControl.Add(metaTagEdge);

	HtmlGenericControl metaTagViewPort = new HtmlGenericControl("meta");
	metaTagViewPort.Attributes.Add("name", "viewport");
	metaTagViewPort.Attributes.Add("content", "width=device-width,initial-scale=1");
	genericControl.Add(metaTagViewPort);

	HtmlGenericControl metaTagAuthors = new HtmlGenericControl("meta");
	metaTagAuthors.Attributes.Add("name", "author");
	metaTagAuthors.Attributes.Add("content", "Mahesh");
	genericControl.Add(metaTagAuthors);

	return genericControl;
	}
	catch (Exception ex)
	{
	throw ex;
	}
	}
	}

view raw ModuleBinder.cs hosted with ❤ by GitHub

Script links

JS Link was introduced together with SharePoint 2013. It allows you to change the rendering of SharePoint controls on the client side without having to enter the master page or the controls directly. This is a huge advantage over previous versions of SharePoint, which had to be effortlessly adjusted with the help of content editor Web Parts or JavaScript files in the masterpage.

	public List<HtmlGenericControl> ControlDefinitionJavascripts(string folderPathJs)
	{
	genericControl = new List<HtmlGenericControl>();

	try
	{
	HtmlGenericControl jsLinkJquery = new HtmlGenericControl("script");
	jsLinkJquery.Attributes.Add("type", "text/javascript");
	jsLinkJquery.Attributes.Add("src", folderPathJs + "/jquery.min.js");
	genericControl.Add(jsLinkJquery);

	HtmlGenericControl jsLinkBootstrap = new HtmlGenericControl("script");
	jsLinkBootstrap.Attributes.Add("type", "text/javascript");
	jsLinkBootstrap.Attributes.Add("src", folderPathJs + "/bootstrap.min.js");
	genericControl.Add(jsLinkBootstrap);


	HtmlGenericControl jsLinkCustom = new HtmlGenericControl("script");
	jsLinkCustom.Attributes.Add("type", "text/javascript");
	jsLinkCustom.Attributes.Add("src", folderPathJs + "/custom.js");
	genericControl.Add(jsLinkCustom);

	return genericControl;
	}
	catch (Exception ex)
	{
	throw ex;
	}
	}

view raw JSLinkFiles.cs hosted with ❤ by GitHub

HTML Tags

Certain Html tags can be included along with giving them a certain ID or Class as below

	public List<HtmlGenericControl> BindHtmlTags()
	{
	genericControl = new List<HtmlGenericControl>();

	try
	{
	HtmlGenericControl dropdownDivTag = new HtmlGenericControl("input");
	dropdownDivTag.Attributes.Add("ID", "search");
	genericControl.Add(dropdownDivTag);

	HtmlGenericControl breakDivTag = new HtmlGenericControl("br");
	breakDivTag.Attributes.Add("ID", "br");
	genericControl.Add(breakDivTag);

	return genericControl;
	}
	catch (Exception ex)
	{
	throw ex;
	}
	}

view raw HtmlTags.cs hosted with ❤ by GitHub

Conclusion : One can implement html tags by directly introducing them in the ASCX file, which has many custom definition of the required layout, but sometimes the rendering of html elements can interfere with the functionality of the webpart. This method is just another way to introduce html elements into the webpart without editing the ASCX file.

Related

Leave a Reply Cancel reply