Getting Started

2 Aug 20232 minutes to read

This section explains briefly about how to create a SpellCheck Control in your application with ASP.NET MVC

Create your first SpellCheck in MVC

Create a ASP.NET MVC Project and add necessary assemblies, CSS and scripts with the help of the given MVC-Getting Started documentation. After creating this project, you can create a SpellCheck in following ways.

SpellCheck Using Helper element

In the view page, add SpellCheck helper as shown below.

CSHTML

@Html.EJ().SpellCheck("TextArea")

Service Reference

Assign the service method (CheckWords) path reference to the property dictionaryUrl, which is mandatory to check the spelling of the word.
The CheckWords method will perform the splitting of target sentence into separate words and check each word is that an erroneous or not. If the word is erroneous fetching the possible suggestions for it and returns those details as a result.

CSHTML

@Html.EJ().SpellCheck("TextArea").DictionarySettings(dictionary => dictionary.CustomDictionaryUrl("../api/SpellCheck/AddToDictionary").DictionaryUrl("../api/SpellCheck/CheckWords"))

Spell Checking

To spell check the content of the target element, you need to add one button and calling any one of the spell check method showInDialog or validate by clicking the button to highlight the error words.
The following code example depicts that checking the spelling of the target element through the showInDialog method.

CSHTML

@section ControlsSection{ 

<div id="TextArea" contenteditable="true" name="sentence">
    Facebook is a social networking service headquartered in Menlo Park, California. Its website was launched on February 4, 2004, by Mark Zuckerberg with his Harvard College roommates and fellow students Eduardo, Andrew McCollum, Dustin and Chris Hughes.
    The founders had initially limited the websites membership to Harvard students, but later expanded it to collages in the Boston area, the Ivy League, and Stanford University. It gradually added support for students at various other universities and later to high-school students.
</div><br />
 
   @Html.EJ().SpellCheck("TextArea").DictionarySettings(dictionary => dictionary.CustomDictionaryUrl("../api/SpellCheck/AddToDictionary").DictionaryUrl("../api/SpellCheck/CheckWords"))
 
   @Html.EJ().Button("SpellCheck").Width("200px").Height("25px").Text("Spell check using dialog").ClientSideEvents(event => event.Click("showDialog"))
 
}
@section ScriptSection{

    <script type="text/javascript">
        function showDialog() {
            var spellObj = $("#TextArea").data("ejSpellCheck");
            spellObj.showInDialog();
        }
    </script>
}

Once you have completed the above steps, you will get an output like below.

Dependencies

To render the SpellCheck control, the following list of external dependencies are needed,

jQuery - 1.7.1 and later versions

The other required internal dependencies are tabulated below,

File	Description/Usage
ej.core.min.js	Must be referred always first before using all the JS controls.
ej.data.min.js	Used to handle data operation and should be used while binding data to JS controls.
ej.spellcheck.min.js	spell check core script file.
ej.unobtrusive.min.js	Used to create our SpellCheck component with basic level HTML tag-like structure.
ej.scroller.js ej.button.js ej.dialog.js ej.menu.js ej.listbox.js ej.draggable.js ej.globalize.js	These files are referred for proper working of the sub-controls used within SpellCheck.

NOTE

SpellCheck uses one or more sub-controls, therefore refer the ej.web.all.min.js (which encapsulates all the ej controls and frameworks in a single file) in the application instead of referring all the above specified internal dependencies.

To get the real appearance of the SpellChecker, the dependent CSS file ej.web.all.min.css (which includes styles of all the widgets) should also needs to be referred.