amp-web-push-widget button.amp-subscribe { display: inline-flex; align-items: center; border-radius: 5px; border: 0; box-sizing: border-box; margin: 0; padding: 10px 15px; cursor: pointer; outline: none; font-size: 15px; font-weight: 500; background: #4A90E2; margin-top: 7px; color: white; box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.5); -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } /** * Jetpack related posts */ /** * The Gutenberg block */ .jp-related-posts-i2 { margin-top: 1.5rem; } .jp-related-posts-i2__list { --hgap: 1rem; display: flex; flex-wrap: wrap; column-gap: var(--hgap); row-gap: 2rem; margin: 0; padding: 0; list-style-type: none; } .jp-related-posts-i2__post { display: flex; flex-direction: column; /* Default: 2 items by row */ flex-basis: calc(( 100% - var(--hgap) ) / 2); } /* Quantity qeuries: see https://alistapart.com/article/quantity-queries-for-css/ */ .jp-related-posts-i2__post:nth-last-child(n+3):first-child, .jp-related-posts-i2__post:nth-last-child(n+3):first-child ~ * { /* From 3 total items on, 3 items by row */ flex-basis: calc(( 100% - var(--hgap) * 2 ) / 3); } .jp-related-posts-i2__post:nth-last-child(4):first-child, .jp-related-posts-i2__post:nth-last-child(4):first-child ~ * { /* Exception for 4 total items: 2 items by row */ flex-basis: calc(( 100% - var(--hgap) ) / 2); } .jp-related-posts-i2__post-link { display: flex; flex-direction: column; row-gap: 0.5rem; width: 100%; margin-bottom: 1rem; line-height: 1.2; } .jp-related-posts-i2__post-link:focus-visible { outline-offset: 2px; } .jp-related-posts-i2__post-img { order: -1; max-width: 100%; } .jp-related-posts-i2__post-defs { margin: 0; list-style-type: unset; } /* Hide, except from screen readers */ .jp-related-posts-i2__post-defs dt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .jp-related-posts-i2__post-defs dd { margin: 0; } /* List view */ .jp-relatedposts-i2[data-layout="list"] .jp-related-posts-i2__list { display: block; } .jp-relatedposts-i2[data-layout="list"] .jp-related-posts-i2__post { margin-bottom: 2rem; } /* Breakpoints */ @media only screen and (max-width: 640px) { .jp-related-posts-i2__list { display: block; } .jp-related-posts-i2__post { margin-bottom: 2rem; } } /* Container */ #jp-relatedposts { display: none; padding-top: 1em; margin: 1em 0; position: relative; clear: both; } .jp-relatedposts::after { content: ""; display: block; clear: both; } /* Headline above related posts section, labeled "Related" */ #jp-relatedposts h3.jp-relatedposts-headline { margin: 0 0 1em 0; display: inline-block; float: left; font-size: 9pt; font-weight: 700; font-family: inherit; } #jp-relatedposts h3.jp-relatedposts-headline em::before { content: ""; display: block; width: 100%; min-width: 30px; border-top: 1px solid rgba(0, 0, 0, 0.2); margin-bottom: 1em; } #jp-relatedposts h3.jp-relatedposts-headline em { font-style: normal; font-weight: 700; } /* Related posts items (wrapping items) */ #jp-relatedposts .jp-relatedposts-items { clear: left; } #jp-relatedposts .jp-relatedposts-items-visual { margin-right: -20px; } /* Related posts item */ #jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post { float: left; width: 33%; margin: 0 0 1em; /* Needs to be same as the main outer wrapper for Related Posts */ box-sizing: border-box; } #jp-relatedposts .jp-relatedposts-items-visual .jp-relatedposts-post { padding-right: 20px; filter: alpha(opacity=80); -moz-opacity: 0.8; opacity: 0.8; } #jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post:nth-child(3n+4), #jp-relatedposts .jp-relatedposts-items-visual .jp-relatedposts-post:nth-child(3n+4) { clear: both; } #jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post:hover .jp-relatedposts-post-title a { text-decoration: underline; } #jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post:hover { filter: alpha(opacity=100); -moz-opacity: 1; opacity: 1; } /* Related posts item content */ #jp-relatedposts .jp-relatedposts-items-visual h4.jp-relatedposts-post-title, #jp-relatedposts .jp-relatedposts-items p, #jp-relatedposts .jp-relatedposts-items time { font-size: 14px; line-height: 20px; margin: 0; } #jp-relatedposts .jp-relatedposts-items-visual .jp-relatedposts-post-nothumbs { position: relative; } #jp-relatedposts .jp-relatedposts-items-visual .jp-relatedposts-post-nothumbs a.jp-relatedposts-post-aoverlay { position: absolute; top: 0; bottom: 0; left: 0; right: 0; display: block; border-bottom: 0; } #jp-relatedposts .jp-relatedposts-items p, #jp-relatedposts .jp-relatedposts-items time { margin-bottom: 0; } #jp-relatedposts .jp-relatedposts-items-visual h4.jp-relatedposts-post-title { text-transform: none; margin: 0; font-family: inherit; display: block; max-width: 100%; } #jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post .jp-relatedposts-post-title a { font-size: inherit; font-weight: 400; text-decoration: none; filter: alpha(opacity=100); -moz-opacity: 1; opacity: 1; } #jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post .jp-relatedposts-post-title a:hover { text-decoration: underline; } #jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post img.jp-relatedposts-post-img, #jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post span { display: block; max-width: 90%; overflow: hidden; text-overflow: ellipsis; } #jp-relatedposts .jp-relatedposts-items-visual .jp-relatedposts-post img.jp-relatedposts-post-img, #jp-relatedposts .jp-relatedposts-items-visual .jp-relatedposts-post span { height: auto; max-width: 100%; } #jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post .jp-relatedposts-post-date, #jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post .jp-relatedposts-post-context { opacity: 0.6; } /* Hide the date by default, but leave the element there if * a theme wants to use css to make it visible. */ .jp-relatedposts-items .jp-relatedposts-post .jp-relatedposts-post-date { display: none; } /* Behavior when there are thumbnails in visual mode */ #jp-relatedposts .jp-relatedposts-items-visual div.jp-relatedposts-post-thumbs p.jp-relatedposts-post-excerpt { display: none; } /* Behavior when there are no thumbnails in visual mode */ #jp-relatedposts .jp-relatedposts-items-visual .jp-relatedposts-post-nothumbs p.jp-relatedposts-post-excerpt { overflow: hidden; } #jp-relatedposts .jp-relatedposts-items-visual .jp-relatedposts-post-nothumbs span { margin-bottom: 1em; } /* List Layout */ #jp-relatedposts .jp-relatedposts-list .jp-relatedposts-post { clear: both; width: 100%; } #jp-relatedposts .jp-relatedposts-list .jp-relatedposts-post img.jp-relatedposts-post-img { float: left; overflow: hidden; max-width: 33%; margin-right: 3%; } #jp-relatedposts .jp-relatedposts-list h4.jp-relatedposts-post-title { display: inline-block; max-width: 63%; } /* * Responsive */ @media only screen and (max-width: 640px) { #jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post { width: 50%; } #jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post:nth-child(3n) { clear: left; } #jp-relatedposts .jp-relatedposts-items-visual { margin-right: 20px; } } @media only screen and (max-width: 320px) { #jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post { width: 100%; clear: both; margin: 0 0 1em; } #jp-relatedposts .jp-relatedposts-list .jp-relatedposts-post img.jp-relatedposts-post-img, #jp-relatedposts .jp-relatedposts-list h4.jp-relatedposts-post-title { float: none; max-width: 100%; margin-right: 0; } } /* * Hide the related post section in the print view of a post */ @media print { .jp-relatedposts { display: none ; } } .wp-block-jetpack-rating-star span:not([aria-hidden="true"]) { display: none; } .amp-logo amp-img{width:190px} .amp-menu input{display:none;}.amp-menu li.menu-item-has-children ul{display:none;}.amp-menu li{position:relative;display:block;}.amp-menu > li a{display:block;} /* Inline styles */ div.acss9ebb7{text-align:justify;}
X
Shravan Kumar Kasagoni

Creating Custom HTML Helpers in ASP.NET MVC

ASP.NET MVC provides many built-in HTML Helpers.  With help of HTML Helpers we can reduce the amount of typing of HTML tags for creating a HTML page. For example we use Html.TextBox() helper method it generates html input textbox. Write the following code snippet in MVC View: <%=Html.TextBox("txtName",20) %> above code snippet generates following html: <input id="txtName" name="txtName" type="text" value="20" /> List of built-in HTML Helpers provided by ASP.NET MVC: ActionLink() – Links to an action method. BeginForm() – Marks the start of a form and links to the action method that renders the form. CheckBox() – Renders a check box. DropDownList() – Renders a drop-down list. Hidden() – Embeds information in the form that is not rendered for the user to see. ListBox() – Renders a list box. Password() – Renders a text box for entering a password. RadioButton() – Renders a radio button.TextArea() – Renders a text area (multi-line text box). TextBox () – Renders a text box. How to develop our own Custom HTML Helpers? For developing custom HTML helpers the simplest way is to write an extension method for the HtmlHelper class. See the below code, it builds a custom Image HTML Helper for generating image tag. using System; using System.Web.Mvc; namespace MvcHelpers { public class CustomHtmlHelpers { public static TagBuilder Image(this HtmlHelper helper, string imageUrl, string alt) { if(!string.IsNullOrEmpty(imageUrl)) { var imageTag = new TagBuilder("img"); imageTag.MergeAttribute("src", imageUrl); imageTag.MergeAttribute("alt", alt); return imageTag; } return null; } } } TagBuilder represents a class that is used by HTML helpers to build HTML elements. TagBuilder.MergeAttribute(String, String) method adds an attribute to the tag by using the specified key/value pair. The next step is to make HTML helper available to views, to do that we should include the name space of  custom HTML helper class into Web.config. <pages> <namespaces>...

ASP.NET MVC provides many built-in HTML Helpers.  With help of HTML Helpers we can reduce the amount of typing of HTML tags for creating a HTML page.

For example we use Html.TextBox() helper method it generates html input textbox. Write the following code snippet in MVC View:

<%=Html.TextBox("txtName",20) %>

above code snippet generates following html:

<input id="txtName" name="txtName" type="text" value="20" />

List of built-in HTML Helpers provided by ASP.NET MVC:

  • ActionLink() – Links to an action method.
  • BeginForm() – Marks the start of a form and links to the action method that renders the form.
  • CheckBox() – Renders a check box.
  • DropDownList() – Renders a drop-down list.
  • Hidden() – Embeds information in the form that is not rendered for the user to see.
  • ListBox() – Renders a list box.
  • Password() – Renders a text box for entering a password.
  • RadioButton() – Renders a radio button.TextArea() – Renders a text area (multi-line text box).
  • TextBox () – Renders a text box.

How to develop our own Custom HTML Helpers?

For developing custom HTML helpers the simplest way is to write an extension method for the HtmlHelper class. See the below code, it builds a custom Image HTML Helper for generating image tag.

using System;
using System.Web.Mvc;

namespace MvcHelpers
{
    public class CustomHtmlHelpers
    {
        public static TagBuilder Image(this HtmlHelper helper, string imageUrl, string alt) 
        {
            if(!string.IsNullOrEmpty(imageUrl))
            {
                var imageTag = new TagBuilder("img");
                
                imageTag.MergeAttribute("src", imageUrl);
                imageTag.MergeAttribute("alt", alt);

                return imageTag;
            }
            return null;
        }
    }
}

The next step is to make HTML helper available to views, to do that we should include the name space of  custom HTML helper class into Web.config.

<pages>
  <namespaces>
    <add namespace="System.Web.Mvc" />
    <add namespace="System.Web.Mvc.Ajax" />
    <add namespace="System.Web.Mvc.Html" />
    <add namespace="System.Web.Routing" />
    
    <add namespace="MvcHelpers" />
  
  </namespaces>
</pages>

Build the solution to make sure the helper method is available to views. Go to any view in the solution access the newly created HTML image helper method.

<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %>
<!DOCTYPE html>
<html>
<head runat="server">
    <title>Home</title>
</head>
<body>
    <div>
        <h2>
            <%= Html.Encode(ViewData["Message"]) %>
        </h2>

        <%= Html.Image("/Images/logo.png","logo") %>

    </div>
</body>
</html>
<%= Html.Image("/Images/logo.png","logo") %>

Above image HTML helper generates the following HTML:

<img src="/Images/logo.png" alt="logo" />

Image Tag Helper is simple example of HTML helpers, we can put any sort of complex logic into HTML Helpers & access them with in the views with a simple method call. in turn which makes the view simpler.

Categories: ASP.NET MVC TIPS & TRICKS
Shravan Kumar Kasagoni:
Leave a Comment
Related Post
  1. Setting Up TensorFlow in RStudio on macOS: A Step-by-Step Guide

    1) Install Anaconda Download Anaconda: Visit the…Read More