Skip to content

SEO-176113-Image-Alt-Text-MVC #390

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 7 commits into
base: hotfix/hotfix-v24.1.41
Choose a base branch
from
Open

SEO-176113-Image-Alt-Text-MVC #390

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
1cfcc8b
SEO-176113-Image-Alt-Text-MVC
berylouma Sep 25, 2023
bf8f019
Updated
berylouma Sep 27, 2023
e4fa40a
Updated
berylouma Sep 28, 2023
018edca
Updated
berylouma Oct 3, 2023
e90be27
Update Screen-Tips.md
berylouma Oct 4, 2023
573b700
Updated
berylouma Oct 6, 2023
8ba456d
Update DataBinding.md
berylouma Oct 17, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion aspnetmvc/Button/Getting-Started.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -202,7 +202,7 @@ Essential ASP.NET MVC Button control contains built-in features like Click and d



![](Getting-Started_images/Getting-Started_img1.png)
![Create Multimedia Player in ASP.NET MVC Button](Getting-Started_images/Getting-Started_img1.png)

Multimedia Player Control
{:.caption}
Expand Down
6 changes: 3 additions & 3 deletions aspnetmvc/Captcha/Enabling-Validation.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ The following code example is used to render the Captcha with Auto-Validation su

2. The following screenshot illustrates the Captcha with Auto-Validation support.

![](Enabling-Validation_images/Enabling-Validation_img2.png)
![Auto Validation in ASP.NET MVC Captcha](Enabling-Validation_images/Enabling-Validation_img2.png)

Captcha with auto validation support
{:.caption}
Expand Down Expand Up @@ -88,7 +88,7 @@ The following code example is used to render the Captcha with manual validation.

2. The following screenshot illustrates the Captcha with manual validation support.

![](Enabling-Validation_images/Enabling-Validation_img3.png)
![Validation by Method in ASP.NET MVC Captcha](Enabling-Validation_images/Enabling-Validation_img3.png)

Captcha validation by method
{:.caption}
Expand Down Expand Up @@ -122,7 +122,7 @@ The following code example is used to render the Captcha with Case sensitive val

2. The following screenshot illustrates the Captcha with Case sensitive validation support.

![](Enabling-Validation_images/Enabling-Validation_img4.png)
![Case Sensitive Validation in ASP.NET MVC Captcha](Enabling-Validation_images/Enabling-Validation_img4.png)

Captcha with Case sensitive validation support
{:.caption}
34 changes: 17 additions & 17 deletions aspnetmvc/Chart/Data-Markers.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
---
layout: post
title: Markers and data labels in Essential ASP.NET MVC Chart
description: Learn how to add markers and data point labels to a Chart series.
title: Markers and data labels in Essential ASP.NET MVC Chart | Syncfusion
description: Learn how to add markers and data point labels to a Chart series in Syncfusion Essential ASP.NET MVC Chart Control, its elements, and more.
platform: ejmvc
control: Chart
documentation: ug
---

# Data Markers
# Data Markers in Essential ASP.NET MVC Chart

Data markers are used to provide information about the data point to the user. You can add a shape and label to adorn each data point.

Expand Down Expand Up @@ -46,7 +46,7 @@ The following code example explains on how to enable series marker and add shape

{% endhighlight %}

![](Data-Markers_images/Data-Markers_img1.png)
![Add Shapes in ASP.NET MVC Charts](Data-Markers_images/Data-Markers_img1.png)


## Add image as marker
Expand Down Expand Up @@ -76,7 +76,7 @@ The following code example illustrates this,

{% endhighlight %}

![](Data-Markers_images/Data-Markers_img2.png)
![Add image as marker in ASP.NET MVC Chart](Data-Markers_images/Data-Markers_img2.png)


## Add labels
Expand Down Expand Up @@ -110,7 +110,7 @@ The following code example shows how to enable data label and set its horizontal

{% endhighlight %}

![](Data-Markers_images/Data-Markers_img3.png)
![Add labels in ASP.NET MVC Chart](Data-Markers_images/Data-Markers_img3.png)


Label content can be formatted by using the template option. Inside the template, you can add the placeholder text *"point.x"* and *"point.y"* to display corresponding data points x & y value.
Expand Down Expand Up @@ -169,7 +169,7 @@ The following code example shows how to add background shapes and set template t

{% endhighlight %}

![](Data-Markers_images/Data-Markers_img4.png)
![Background Shapes in ASP.NET MVC Chart](Data-Markers_images/Data-Markers_img4.png)


The appearance of the labels can be customized by using the *Font* and *Offset* options. The Offset option is used to move the labels vertically. Also, labels can be rotated by using the *Rotate* option.
Expand Down Expand Up @@ -203,7 +203,7 @@ The following code example shows how to rotate data label text and customize the

{% endhighlight %}

![](Data-Markers_images/Data-Markers_img5.png)
![Rotate data label text and customize the font in ASP.NET MVC Chart](Data-Markers_images/Data-Markers_img5.png)


You can position the label to the top, center or bottom position of the segment by using the **TextPosition** option for the chart types such as Column, Bar, Stacked bar, Stacked column, 100% Stacked bar, 100% Stacked column, Candle and OHLC.
Expand Down Expand Up @@ -235,7 +235,7 @@ The following code example shows how to set textPosition to display data label i

{% endhighlight %}

![](Data-Markers_images/Data-Markers_img6.png)
![Set textPosition in ASP.NET MVC Chart](Data-Markers_images/Data-Markers_img6.png)

The label can be positioned inside or outside the perimeter of the series by using the **LabelPosition** option for the chart types such as Pie and Doughnut, .

Expand Down Expand Up @@ -277,17 +277,17 @@ The following code example shows how to set the LabelPosition,

{% endhighlight %}

![](Data-Markers_images/Data-Markers_img7.png)
![Set LabelPosition in ASP.NET MVC Chart](Data-Markers_images/Data-Markers_img7.png)


The following screenshot displays the labels when the LabelPosition is set as *Inside* position.

![](/js/Chart/Data-Markers_images/Data-Markers_img8.png)
![LabelPosition set as inside in ASP.NET MVC Chart](/js/Chart/Data-Markers_images/Data-Markers_img8.png)


The following screenshot displays the labels when the LabelPosition is set as *OutsideExtended* position.

![](Data-Markers_images/Data-Markers_img9.png)
![LabelPosition set as outside extended in ASP.NET MVC Chart](Data-Markers_images/Data-Markers_img9.png)


The label can be wrapped for pie, doughnut, funnel, and pyramid series by setting the enableWrap property.
Expand All @@ -313,7 +313,7 @@ The label can be wrapped for pie, doughnut, funnel, and pyramid series by settin

{% endhighlight %}

![](Data-Markers_images/Data-Markers_img13.png)
![Setting the enableWrap property in ASP.NET MVC Chart](Data-Markers_images/Data-Markers_img13.png)


## Binding label from the datasource
Expand Down Expand Up @@ -442,7 +442,7 @@ When the data is provided by using the Points option, you can add marker for eac

{% endhighlight %}

![](Data-Markers_images/Data-Markers_img10.png)
![Customize specific points in ASP.NET MVC Chart](Data-Markers_images/Data-Markers_img10.png)


When the data is bound to the series by using the DataSource option, you can customize the points in the **SeriesRendering** event as illustrated in the following code example,
Expand Down Expand Up @@ -501,7 +501,7 @@ When the data is bound to the series by using the DataSource option, you can cus

{% endhighlight %}

![](Data-Markers_images/Data-Markers_img10.png)
![Customizing the points in the SeriesRendering in ASP.NET MVC Chart](Data-Markers_images/Data-Markers_img10.png)


## Connect Line
Expand Down Expand Up @@ -536,7 +536,7 @@ This feature is used to connect label and data point by using a line. It can be

{% endhighlight %}

![](Data-Markers_images/Data-Markers_img11.png)
![Connect Line in ASP.NET MVC Chart](Data-Markers_images/Data-Markers_img11.png)


## Smart labels
Expand Down Expand Up @@ -570,7 +570,7 @@ The following code example shows how to enable smart labels,

{% endhighlight %}

![](Data-Markers_images/Data-Markers_img12.png)
![Smart labels in ASP.NET MVC Chart](Data-Markers_images/Data-Markers_img12.png)


[Click](https://mvc.syncfusion.com/demos/web/chart/pie) here to view the SmartLabel online demo sample.
8 changes: 4 additions & 4 deletions aspnetmvc/Diagram/Exporting.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
---
layout: post
title: Export Diagram content as image/svg files
description: How to export the Diagram as image/svg?
title: Export Diagram content in ASP.NET MVC Diagram | Syncfusion
description: Learn here about how to export the Diagram as image/svg in Syncfusion Essential ASP.NET MVC Diagram Control, its elements, and more.
platform: ejmvc
control: Diagram
documentation: ug
---

# Exporting
# Exporting Diagram as image/svg in ASP.NET MVC Diagram

Diagram provides support to export its content as image/svg files.
The client side method `exportDiagram` helps to export the Diagram. The following code illustrates how to export the Diagram as image.
Expand All @@ -20,7 +20,7 @@ diagram.exportDiagram();

{% endhighlight %}

![](Exporting_images/Exporting_img1.png)
![Exporting Diagram as image/svg in ASP.NET MVC Diagram](Exporting_images/Exporting_img1.png)

## Exporting options

Expand Down
46 changes: 23 additions & 23 deletions aspnetmvc/Diagram/Shapes.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
---
layout: post
title: Pick the type of node among the predefined nodes and shapes
description: How to choose the type of the node with respect to the requirement?
title: Pick the type of node in ASP.NET MVC Diagram | Syncfusion
description: Learn here about how to choose the type of node with respect to the requirement in Syncfusion Essential ASP.NET MVC Diagram Control, its elements, and more.
platform: ejmvc
control: Diagram
documentation: ug
---

# Shapes
# Pick the type of node in ASP.NET MVC Diagram

Diagram provides support to add different kind of nodes. They are as follows.

Expand Down Expand Up @@ -40,7 +40,7 @@ Texts can be added to the Diagram as text nodes. For text nodes, the text node c

{% endhighlight %}

![](Shapes_images/Shapes_img59.png)
![Text in ASP.NET MVC Diagram](Shapes_images/Shapes_img59.png)

## Image
Diagram allows to add images as image nodes. For image nodes,the **image** node can be created with ImageNode class. In addition, the `Source` property of node enables you to set the image source. The following code illustrates how an **Image** node is created.
Expand All @@ -60,7 +60,7 @@ Diagram allows to add images as image nodes. For image nodes,the **image** node

{% endhighlight %}

![](Shapes_images/Shapes_img60.png)
![Image in ASP.NET MVC Diagram](Shapes_images/Shapes_img60.png)

Deploy your HTML file in the web Application and export the diagram (image node) or else the image node will not be exported in the chrome and Firefox due to security issues. Please refer to the link below.

Expand Down Expand Up @@ -101,7 +101,7 @@ Link1: http://stackoverflow.com/questions/4761711/local-image-in-canvas-in-chrom

{% endhighlight %}

![](Shapes_images/Shapes_img61.png)
![HTML in ASP.NET MVC Diagram](Shapes_images/Shapes_img61.png)

N> HTML node cannot be exported to image format, like JPEG, PNG, and BMP. It is by design that while exporting, Diagram is drawn in a canvas. Further, this canvas is exported into image formats. Currently, drawing in a canvas equivalent from all possible HTML is not feasible. Hence, this limitation.

Expand Down Expand Up @@ -142,7 +142,7 @@ N> HTML node cannot be exported to image format, like JPEG, PNG, and BMP. It is

{% endhighlight %}

![](Shapes_images/Shapes_img62.png)
![Native in ASP.NET MVC Diagram](Shapes_images/Shapes_img62.png)

N> Like HTML node, Native node also cannot be exported to image format. Fill color of native node can be overridden by the inline style or fill of the SVG element specified in the template.

Expand Down Expand Up @@ -171,7 +171,7 @@ The following code example illustrates how to create a basic shape.

{% endhighlight %}

![](Shapes_images/Shapes_img1.png)
![Basic Shapes in ASP.NET MVC Diagram](Shapes_images/Shapes_img1.png)


N> When the `Shape` is not set for a basic shape, it is considered a "rectangle".
Expand Down Expand Up @@ -202,11 +202,11 @@ Path node is a commonly used basic shape that allows visually to represent the g

{% endhighlight %}

![](Shapes_images/Shapes_img58.png)
![Path in ASP.NET MVC Diagram](Shapes_images/Shapes_img58.png)

The list of basic shapes are as follows.

![](Shapes_images/Shapes_img2.png)
![List of Basic Shapes in ASP.NET MVC Diagram](Shapes_images/Shapes_img2.png)

## Flow Shapes

Expand All @@ -228,11 +228,11 @@ The flow shapes are used to represent the process flow. It is used for analyzing

{% endhighlight %}

![](Shapes_images/Shapes_img3.png)
![Flow Shapes in ASP.NET MVC Diagram](Shapes_images/Shapes_img3.png)

The list of flow shapes are as follows.

![](Shapes_images/Shapes_img4.png)
![List of Flow Shapes in ASP.NET MVC Diagram](Shapes_images/Shapes_img4.png)

## BPMN Shapes

Expand All @@ -258,7 +258,7 @@ BPMN shapes are used to represent the internal business procedure in a graphical

{% endhighlight %}

![](Shapes_images/Shapes_img5.png)
![BPMN Shapes in ASP.NET MVC Diagram](Shapes_images/Shapes_img5.png)

N> The default value for the property `Shape` is "Event".

Expand Down Expand Up @@ -309,7 +309,7 @@ The `Event` property of the node allows you to define the type of the event. The

{% endhighlight %}

![](Shapes_images/Shapes_img12.png)
![Event in ASP.NET MVC Diagram](Shapes_images/Shapes_img12.png)

| Event | Image |
|---|---|
Expand Down Expand Up @@ -361,7 +361,7 @@ Gateway is used to control the flow of a process. It is represented as a diamond

{% endhighlight %}

![](Shapes_images/Shapes_img27.png)
![Getaway in ASP.NET MVC Diagram](Shapes_images/Shapes_img27.png)

N> By default, the `Gateway` will be set as "None".

Expand Down Expand Up @@ -410,7 +410,7 @@ To create a BPMN activity, you need to set the `Shape` as "Activity". You also n

{% endhighlight %}

![](Shapes_images/Shapes_img33.png)
![Activity in ASP.NET MVC Diagram](Shapes_images/Shapes_img33.png)

The different activities of BPMN process are listed as follows.

Expand Down Expand Up @@ -445,7 +445,7 @@ The `Task` property of node allows you to define the `Type` of task such as send

{% endhighlight %}

![](Shapes_images/Shapes_img34.png)
![Tasks in ASP.NET MVC Diagram](Shapes_images/Shapes_img34.png)

The various types of BPMN tasks are tabulated as follows.

Expand Down Expand Up @@ -502,7 +502,7 @@ Loop is a task that is internally being looped. The `Loop` property of task allo

{% endhighlight %}

![](Shapes_images/Shapes_img43.png)
![Loop in in ASP.NET MVC Diagram](Shapes_images/Shapes_img43.png)

The following table contains various types of BPMN loops.

Expand Down Expand Up @@ -554,7 +554,7 @@ Compensation is triggered when operation is partially failed and you can enable
Model.Nodes.Add(Node);
{% endhighlight %}

![](Shapes_images/Shapes_img50.png)
![Compensation in ASP.NET MVC Diagram](Shapes_images/Shapes_img50.png)

#### Call

Expand All @@ -579,7 +579,7 @@ A call activity is a global sub-process that is reused at various points of the

{% endhighlight %}

![](Shapes_images/Shapes_img51.png)
![Call in ASP.NET MVC Diagram](Shapes_images/Shapes_img51.png)

#### Ad-Hoc

Expand All @@ -604,7 +604,7 @@ An ad hoc subprocess is a group of tasks that are executed in any order or skipp

{% endhighlight %}

![](Shapes_images/Shapes_img52.png)
![Ad-Hoc in ASP.NET MVC Diagram](Shapes_images/Shapes_img52.png)

#### Boundary

Expand Down Expand Up @@ -658,7 +658,7 @@ A data object represents information flowing through the process, such as data p

{% endhighlight %}

![](Shapes_images/Shapes_img56.png)
![Data in in ASP.NET MVC Diagram](Shapes_images/Shapes_img56.png)

### Datasource

Expand All @@ -681,4 +681,4 @@ DataSource is used to store or access data associated with a business process. T

{% endhighlight %}

![](Shapes_images/Shapes_img57.png)
![DataSource in ASP.NET MVC Diagram](Shapes_images/Shapes_img57.png)
Loading