diff --git a/ej2-asp-core-mvc/avatar/EJ2_ASP.MVC/getting-started.md b/ej2-asp-core-mvc/avatar/EJ2_ASP.MVC/getting-started.md index f7ccf7d573..ae950d186e 100644 --- a/ej2-asp-core-mvc/avatar/EJ2_ASP.MVC/getting-started.md +++ b/ej2-asp-core-mvc/avatar/EJ2_ASP.MVC/getting-started.md @@ -11,7 +11,7 @@ documentation: ug # Getting Started with ASP.NET MVC Avatar Control -This section briefly explains about how to include [ASP.NET MVC Avatar](https://www.syncfusion.com/aspnet-mvc-ui-controls/avatar) control in your ASP.NET MVC application using Visual Studio. +This section explains about how to include [ASP.NET MVC Avatar](https://www.syncfusion.com/aspnet-mvc-ui-controls/avatar) control in your ASP.NET MVC application using Visual Studio. ## Prerequisites @@ -25,7 +25,7 @@ This section briefly explains about how to include [ASP.NET MVC Avatar](https:// ## Add stylesheet -Here, the theme is referred using CDN inside the `` of `~/Views/Shared/_Layout.cshtml` file as follows, +Here, the desired theme is referred using CDN inside the `` of **~/Views/Shared/_Layout.cshtml** file as follows, {% tabs %} {% highlight c# tabtitle="~/_Layout.cshtml" %} @@ -43,7 +43,7 @@ N> Checkout the [Themes topic](https://ej2.syncfusion.com/aspnetmvc/documentatio ## Add ASP.NET MVC Avatar control -Now, add the Syncfusion® ASP.NET MVC Avatar control in `~/Home/Index.cshtml` page. +Now, add the Syncfusion® ASP.NET MVC Avatar control in **~/Home/Index.cshtml** page. {% tabs %} {% highlight razor tabtitle="CSHTML" %} diff --git a/ej2-asp-core-mvc/avatar/EJ2_ASP.NETCORE/getting-started.md b/ej2-asp-core-mvc/avatar/EJ2_ASP.NETCORE/getting-started.md index 9ed1e73d7b..feb3186806 100644 --- a/ej2-asp-core-mvc/avatar/EJ2_ASP.NETCORE/getting-started.md +++ b/ej2-asp-core-mvc/avatar/EJ2_ASP.NETCORE/getting-started.md @@ -11,7 +11,7 @@ documentation: ug # Getting Started with ASP.NET Core Avatar Control -This section briefly explains about how to include [ASP.NET Core Avatar](https://www.syncfusion.com/aspnet-core-ui-controls/avatar) control in your ASP.NET Core application using Visual Studio. +This section explains about how to include [ASP.NET Core Avatar](https://www.syncfusion.com/aspnet-core-ui-controls/avatar) control in your ASP.NET Core application using Visual Studio. ## Prerequisites @@ -25,7 +25,7 @@ This section briefly explains about how to include [ASP.NET Core Avatar](https:/ ## Add stylesheet -Here, the theme is referred using CDN inside the `` of `~/Pages/Shared/_Layout.cshtml` file as follows, +Here, the desired theme is referred using CDN inside the `` of **~/Pages/Shared/_Layout.cshtml** file as follows, {% tabs %} {% highlight cshtml tabtitle="~/_Layout.cshtml" %} @@ -43,7 +43,7 @@ N> Checkout the [Themes topic](https://ej2.syncfusion.com/aspnetcore/documentati ## Add ASP.NET Core Avatar control -Now, add the Syncfusion® ASP.NET Core Avatar tag helper in `~/Pages/Index.cshtml` page. +Now, add the Syncfusion® ASP.NET Core Avatar tag helper in **~/Pages/Index.cshtml** page. {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} diff --git a/ej2-asp-core-mvc/avatar/how-to/avatar-customization.md b/ej2-asp-core-mvc/avatar/how-to/avatar-customization.md index 05b7121f83..ec607b3213 100644 --- a/ej2-asp-core-mvc/avatar/how-to/avatar-customization.md +++ b/ej2-asp-core-mvc/avatar/how-to/avatar-customization.md @@ -1,7 +1,7 @@ --- layout: post -title: Avatar Customization in ##Platform_Name## Avatar Component | Syncfusion -description: Learn here all about Avatar Customization in Syncfusion ##Platform_Name## Avatar component of Syncfusion Essential JS 2 and more. +title: Avatar Customization in ##Platform_Name## Avatar control | Syncfusion +description: Learn here all about Avatar Customization in Syncfusion ##Platform_Name## Avatar control of Syncfusion Essential JS 2 and more. platform: ej2-asp-core-mvc control: Avatar Customization publishingplatform: ##Platform_Name## @@ -12,7 +12,7 @@ documentation: ug ## Color customization -The avatar comes with default background color (Grey). This can be easily customized to desired color by adding custom class or directly selecting the avatar class from the CSS. +The Avatar comes with default background color (Grey). This can be easily customized to the desired color by adding custom class or directly selecting the Avatar class from the CSS. {% if page.publishingplatform == "aspnet-core" %} @@ -37,9 +37,9 @@ The avatar comes with default background color (Grey). This can be easily custom ![Avatar Color](../images/color.PNG) -## Customize avatar sizes +## Customize Avatar sizes -Even though the avatar comes with five predefined sizes, sometimes it's not enough. So, the avatar is designed in such a way that the width and height will be relative to font-size. By changing the `font-size` of the avatar element, you can change the width and height automatically. +Even though the Avatar comes with five predefined sizes, sometimes it's not enough. The Avatar is designed so that the width and height are relative to the font-size. By changing the `font-size` of the Avatar element, you can change the width and height automatically. {% if page.publishingplatform == "aspnet-core" %} @@ -66,9 +66,9 @@ Even though the avatar comes with five predefined sizes, sometimes it's not enou N> [View Sample in GitHub](https://github.com/SyncfusionExamples/ASP-NET-Core-UG-Examples/tree/main/Avatar/AvatarUGSample). -## Use various media in avatar +## Use various media in Avatar -Avatars can be used with a wide variety of media formats like SVG, font-icons, images, letters, words, etc. +Avatars can be used with a wide variety of types of media formats like SVG, font-icons, images, letters, words, etc. {% if page.publishingplatform == "aspnet-core" %} diff --git a/ej2-asp-core-mvc/avatar/how-to/integrate-avatar-into-badge.md b/ej2-asp-core-mvc/avatar/how-to/integrate-avatar-into-badge.md index 350da13087..77795bb828 100644 --- a/ej2-asp-core-mvc/avatar/how-to/integrate-avatar-into-badge.md +++ b/ej2-asp-core-mvc/avatar/how-to/integrate-avatar-into-badge.md @@ -1,16 +1,16 @@ --- layout: post -title: Integrate Avatar Into Badge in ##Platform_Name## Avatar Component -description: Learn here all about how to integrate avatar into badge in Syncfusion ##Platform_Name## Avatar component of Syncfusion Essential JS 2 and more. +title: Integrate Avatar Into Badge in ##Platform_Name## Avatar control | Syncfusion +description: Learn here all about how to integrate Avatar into Badge in Syncfusion ##Platform_Name## Avatar control of Syncfusion Essential JS 2 and more. platform: ej2-asp-core-mvc control: Integrate Avatar Into Badge publishingplatform: ##Platform_Name## documentation: ug --- -# Integrate avatar into Badge +# Integrate Avatar into Badge -The badge is dependent and supportive component, and it can be used with avatar to create a notification avatar. The default avatar (.`e-avatar`) and circle avatar (.`e-avatar-circle`) have been used with notification badges (.`e-badge-notification`) in the following sample. +The Badge is a dependent and supportive control that can be used with Avatar to create a notification Avatar. The default Avatar `(.e-avatar)` and circle Avatar `(.e-avatar-circle)` have been used with notification badges `(.e-badge-notification)` in the following sample. {% if page.publishingplatform == "aspnet-core" %} diff --git a/ej2-asp-core-mvc/avatar/how-to/integrate-avatar-into-listview.md b/ej2-asp-core-mvc/avatar/how-to/integrate-avatar-into-listview.md index b4c994baaa..598540a5b1 100644 --- a/ej2-asp-core-mvc/avatar/how-to/integrate-avatar-into-listview.md +++ b/ej2-asp-core-mvc/avatar/how-to/integrate-avatar-into-listview.md @@ -1,16 +1,16 @@ --- layout: post -title: Integrate Avatar Into Listview in ##Platform_Name## Avatar Component -description: Learn here all about how to integrate avatar into Listview in Syncfusion ##Platform_Name## Avatar component of Syncfusion Essential JS 2 and more. +title: Integrate Avatar Into ListView in ##Platform_Name## Avatar control | Syncfusion +description: Learn here all about how to integrate Avatar into ListView in Syncfusion ##Platform_Name## Avatar control of Syncfusion Essential JS 2 and more. platform: ej2-asp-core-mvc -control: Integrate Avatar Into Listview +control: Integrate Avatar Into ListView publishingplatform: ##Platform_Name## documentation: ug --- -# Integrate avatar into ListView +# Integrate Avatar into ListView -Avatar is integrated into the listview to create contacts applications. The `xsmall` size avatar is used to match the size of the list item. Letters and images are also used as avatar content. +Avatar is integrated into the ListView to create contacts applications. The `xsmall` size Avatar is used to match the size of the list items. Both letters and images are also used as Avatar content. {% if page.publishingplatform == "aspnet-core" %} diff --git a/ej2-asp-core-mvc/avatar/overview.md b/ej2-asp-core-mvc/avatar/overview.md index 54c959b31f..c24cee7707 100644 --- a/ej2-asp-core-mvc/avatar/overview.md +++ b/ej2-asp-core-mvc/avatar/overview.md @@ -1,7 +1,7 @@ --- layout: post -title: Overview in ##Platform_Name## Avatar Component -description: Learn here all about Overview in Syncfusion ##Platform_Name## Avatar component of Syncfusion Essential JS 2 and more. +title: Overview in ##Platform_Name## Avatar control | Syncfusion +description: Learn here all about Overview in Syncfusion ##Platform_Name## Avatar control of Syncfusion Essential JS 2 and more. platform: ej2-asp-core-mvc control: Index publishingplatform: ##Platform_Name## diff --git a/ej2-asp-core-mvc/avatar/types.md b/ej2-asp-core-mvc/avatar/types.md index 560bd3b1af..1244f7b778 100644 --- a/ej2-asp-core-mvc/avatar/types.md +++ b/ej2-asp-core-mvc/avatar/types.md @@ -11,19 +11,19 @@ documentation: ug # Types and Styles in ##Platform_Name## Avatar Control -This section explains different types of avatar. +This section explains different types of Avatar. ## Avatar size -The Essential® JS 2 Avatar has the following predefined sizes that can be used with the `.e-avatar` class to change the appearance of the avatar. +The Essential® JS 2 Avatar has the following predefined sizes that can be used with the `.e-avatar` class to change the appearance of the Avatar. | Class Name | Description | | ------------- | ------------- | -| e-avatar-xlarge | Displays xlarge size avatar. | -| e-avatar-large | Displays apply large size avatar. | -| e-avatar | Displays apply default size avatar. | -| e-avatar-small | Displays apply small size avatar. | -| e-avatar-xsmall | Displays apply xsmall size avatar. | +| e-avatar-xlarge | Displays xlarge size Avatar. | +| e-avatar-large | Displays apply large size Avatar. | +| e-avatar | Displays apply default size Avatar. | +| e-avatar-small | Displays apply small size Avatar. | +| e-avatar-xsmall | Displays apply xsmall size Avatar. | {% if page.publishingplatform == "aspnet-core" %} @@ -50,14 +50,14 @@ The Essential® JS 2 Avatar has the followin ## Avatar types -The types of Essential® JS 2 avatar are: +The types of Essential® JS 2 Avatar are: * Default * Circle ### Default -The default style of the avatar is rectangular shape with rounded corners, which can be applied from adding the modifier class `.e-avatar` to the target element. +The default style of the Avatar is rectangular shape with rounded corners, which can be applied from adding the modifier class `.e-avatar` to the target element. {% if page.publishingplatform == "aspnet-core" %} @@ -83,7 +83,7 @@ The default style of the avatar is rectangular shape with rounded corners, which ### Circle -The circle avatar style can be applied by adding the modifier class `.e-avatar-circle` to the target element. +The circle Avatar style can be applied by adding the modifier class `.e-avatar-circle` to the target element. {% if page.publishingplatform == "aspnet-core" %} diff --git a/ej2-asp-core-mvc/code-snippet/avatar/badge/razor b/ej2-asp-core-mvc/code-snippet/avatar/badge/razor index 66eda5b2d3..a6634c0c4e 100644 --- a/ej2-asp-core-mvc/code-snippet/avatar/badge/razor +++ b/ej2-asp-core-mvc/code-snippet/avatar/badge/razor @@ -6,7 +6,7 @@
- profile_pic + profile_pic
6 @@ -14,7 +14,7 @@
- profile_pic + profile_pic
12 @@ -22,7 +22,7 @@
- profile_pic + profile_pic
46 @@ -30,7 +30,7 @@
- profile_pic + profile_pic
82 @@ -38,7 +38,7 @@
- profile_pic + profile_pic
99+ @@ -54,7 +54,7 @@
- profile_pic + profile_pic
6 @@ -62,7 +62,7 @@
- profile_pic + profile_pic
12 @@ -70,7 +70,7 @@
- profile_pic + profile_pic
46 @@ -78,7 +78,7 @@
- profile_pic + profile_pic
82 @@ -86,7 +86,7 @@
- profile_pic + profile_pic
99+ @@ -97,82 +97,85 @@
+ \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/avatar/badge/tagHelper b/ej2-asp-core-mvc/code-snippet/avatar/badge/tagHelper index 39851fd999..a6634c0c4e 100644 --- a/ej2-asp-core-mvc/code-snippet/avatar/badge/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/avatar/badge/tagHelper @@ -6,7 +6,7 @@
- profile_pic + profile_pic
6 @@ -14,7 +14,7 @@
- profile_pic + profile_pic
12 @@ -22,7 +22,7 @@
- profile_pic + profile_pic
46 @@ -30,7 +30,7 @@
- profile_pic + profile_pic
82 @@ -38,7 +38,7 @@
- profile_pic + profile_pic
99+ @@ -54,7 +54,7 @@
- profile_pic + profile_pic
6 @@ -62,7 +62,7 @@
- profile_pic + profile_pic
12 @@ -70,7 +70,7 @@
- profile_pic + profile_pic
46 @@ -78,7 +78,7 @@
- profile_pic + profile_pic
82 @@ -86,7 +86,7 @@
- profile_pic + profile_pic
99+ @@ -97,83 +97,85 @@
+ \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/avatar/circle/razor b/ej2-asp-core-mvc/code-snippet/avatar/circle/razor index ad7a756f99..c7bde28a76 100644 --- a/ej2-asp-core-mvc/code-snippet/avatar/circle/razor +++ b/ej2-asp-core-mvc/code-snippet/avatar/circle/razor @@ -7,10 +7,10 @@
\ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/avatar/circle/tagHelper b/ej2-asp-core-mvc/code-snippet/avatar/circle/tagHelper index ad7a756f99..c7bde28a76 100644 --- a/ej2-asp-core-mvc/code-snippet/avatar/circle/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/avatar/circle/tagHelper @@ -7,10 +7,10 @@
\ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/avatar/color/razor b/ej2-asp-core-mvc/code-snippet/avatar/color/razor index 0414195d42..eaf8bd4b4f 100644 --- a/ej2-asp-core-mvc/code-snippet/avatar/color/razor +++ b/ej2-asp-core-mvc/code-snippet/avatar/color/razor @@ -7,35 +7,35 @@
\ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/avatar/color/tagHelper b/ej2-asp-core-mvc/code-snippet/avatar/color/tagHelper index 0414195d42..eaf8bd4b4f 100644 --- a/ej2-asp-core-mvc/code-snippet/avatar/color/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/avatar/color/tagHelper @@ -7,35 +7,35 @@
\ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/avatar/custom-size/razor b/ej2-asp-core-mvc/code-snippet/avatar/custom-size/razor index f39c31a424..96667a9080 100644 --- a/ej2-asp-core-mvc/code-snippet/avatar/custom-size/razor +++ b/ej2-asp-core-mvc/code-snippet/avatar/custom-size/razor @@ -7,30 +7,30 @@
\ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/avatar/custom-size/tagHelper b/ej2-asp-core-mvc/code-snippet/avatar/custom-size/tagHelper index f39c31a424..96667a9080 100644 --- a/ej2-asp-core-mvc/code-snippet/avatar/custom-size/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/avatar/custom-size/tagHelper @@ -7,30 +7,30 @@
\ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/avatar/default/razor b/ej2-asp-core-mvc/code-snippet/avatar/default/razor index 15f713e422..187a33a9c3 100644 --- a/ej2-asp-core-mvc/code-snippet/avatar/default/razor +++ b/ej2-asp-core-mvc/code-snippet/avatar/default/razor @@ -7,10 +7,10 @@
\ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/avatar/default/tagHelper b/ej2-asp-core-mvc/code-snippet/avatar/default/tagHelper index 15f713e422..187a33a9c3 100644 --- a/ej2-asp-core-mvc/code-snippet/avatar/default/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/avatar/default/tagHelper @@ -7,10 +7,10 @@
\ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/avatar/listview/razor b/ej2-asp-core-mvc/code-snippet/avatar/listview/razor index a035266b1b..d079eee680 100644 --- a/ej2-asp-core-mvc/code-snippet/avatar/listview/razor +++ b/ej2-asp-core-mvc/code-snippet/avatar/listview/razor @@ -1,119 +1,89 @@ -@using Syncfusion.EJ2 -
- -
- - @{ var template = "
" + - "${if(avatar!=='')}" + - "${avatar}" + - "${else}" + - " " + - "${/if}" + - "" + - "${text}
";} - @Html.EJS().ListView("letterAvatarList").Enable(true).DataSource((IEnumerable)ViewBag.dataSource).HeaderTitle("Contacts").ShowHeader(true).Template(template).SortOrder(Syncfusion.EJ2.Lists.SortOrder.Ascending).Render() - - - - - +@using Syncfusion.EJ2
< !-- Listview element -->@{ var template = "
" + + "${if(avatar!=='')}"+"${avatar}"+"${else}"+" "+"${/if}"+""+"${text}
"; +} + +@Html.EJS().ListView("letterAvatarList").Enable(true).DataSource((IEnumerable)ViewBag.dataSource).HeaderTitle("Contacts").ShowHeader(true).Template(template).SortOrder(Syncfusion.EJ2.Lists.SortOrder.Ascending).Render() \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/avatar/listview/tagHelper b/ej2-asp-core-mvc/code-snippet/avatar/listview/tagHelper index 3e3a134b88..020a9bdbc9 100644 --- a/ej2-asp-core-mvc/code-snippet/avatar/listview/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/avatar/listview/tagHelper @@ -1,14 +1,14 @@ -@{ - var template = "
" + - "${if(avatar!=='')}" + - "${avatar}" + - "${else}" + - " " + - "${/if}" + - "" + - "${text}
"; - - List data = new List(); +@{ + var template = "
" + + "${if(avatar!=='')}" + + "${avatar}" + + "${else}" + + " " + + "${/if}" + + "" + + "${text}
"; + + List data = new List < object > (); data.Add(new { text = "Robert", id = "s_01", avatar= "", pic= "pic04" }); data.Add(new { text = "Nancy", id = "s_02", avatar= "N", pic= "" }); data.Add(new { text = "John", id = "s_03", pic= "pic01", avatar= "" }); @@ -18,9 +18,10 @@ data.Add(new { text = "Margaret", id = "s_07", avatar= "M", pic= "" }); }
- - -
+ + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/avatar/media-formats/razor b/ej2-asp-core-mvc/code-snippet/avatar/media-formats/razor index 581e772b07..47002e2b74 100644 --- a/ej2-asp-core-mvc/code-snippet/avatar/media-formats/razor +++ b/ej2-asp-core-mvc/code-snippet/avatar/media-formats/razor @@ -85,119 +85,121 @@ \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/avatar/media-formats/tagHelper b/ej2-asp-core-mvc/code-snippet/avatar/media-formats/tagHelper index 39fdd4b39c..c4e4666749 100644 --- a/ej2-asp-core-mvc/code-snippet/avatar/media-formats/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/avatar/media-formats/tagHelper @@ -1,11 +1,4 @@ -@page -@model AvatarUGSample.Pages.VariousAvatarMediaModel - -@{ - -} - -
+
@@ -92,119 +85,121 @@
\ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/avatar/size/razor b/ej2-asp-core-mvc/code-snippet/avatar/size/razor index 0d1514720c..5c393e0e3c 100644 --- a/ej2-asp-core-mvc/code-snippet/avatar/size/razor +++ b/ej2-asp-core-mvc/code-snippet/avatar/size/razor @@ -15,6 +15,7 @@ } .e-avatar { - background-image: url(./pic01.png); + background-image: url('@Url.Content("https://ej2.syncfusion.com/aspnetmvc/Content/avatar/images/pic01.png")'); + margin: 2px; } \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/avatar/size/tagHelper b/ej2-asp-core-mvc/code-snippet/avatar/size/tagHelper index fddf9e54b7..3b652b7279 100644 --- a/ej2-asp-core-mvc/code-snippet/avatar/size/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/avatar/size/tagHelper @@ -15,6 +15,6 @@ } .e-avatar { - background-image: url(@Url.Content("~/css/avatar/images/pic01.png")); + background-image: url('@Url.Content("https://ej2.syncfusion.com/aspnetmvc/Content/avatar/images/pic01.png")'); } \ No newline at end of file