Available in the Full Version

Editors - Text Editor MVC

Submitted Values

This sample is designed for a larger screen size.

On mobile, try rotating your screen, view full size, or email to another device.

This sample shows basic options of the igTextEditor using MVC wrapper.

Code View

Copy to Clipboard

ASP.NET View
ASP.NET Controller

@using Infragistics.Web.Mvc


<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title></title>
    <!-- Ignite UI for jQuery Required Combined CSS Files -->
    <link href="http://cdn-na.infragistics.com/igniteui/2024.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
    <link href="http://cdn-na.infragistics.com/igniteui/2024.2/latest/css/structure/infragistics.css" rel="stylesheet" />
    <style>
        h3 {
            font-size:20px;
            margin-bottom:20px;
        }
        .group-fields {
            margin-bottom: 10px;
        }
        .group-fields label {
            display: block;
            line-height:18px;
        }
        .group-fields .inline {
            display:inline;
        }
        .group-fields .ui-igcheckbox-normal {
            margin-right: 5px;
            float: left;
        }
        .group-fields .ui-igedit-container {
            width: 250px;
        }

		form {
			float: left;
			width: 500px;
			min-width: 500px;
		}
		.submit-container
        {
            top: 0px;
            right: 0px;
            min-width: 400px;
            float: right;
            font-size: 18px;
        }

			.submit-container h3 {
				display: none;
			}

            .submit-container p
            {
                font-size: 16px;
            }
				.submit-container p.result {
					margin-top: 10px;
					margin-bottom: 45px;
				}
				.submit-container span.result-name {
					font-weight: bold;
					text-transform: capitalize;
				}

		.clear {
			clear: both;
		}
        @@media screen and (min-width:360px) {
            .group-fields .ui-igedit-container {
                width: 300px;
            }
        }
    </style>

    <script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js"></script>
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>

    <!-- Ignite UI for jQuery Required Combined JavaScript Files -->
    <script src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/infragistics.core.js"></script>
    <script src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/infragistics.lob.js"></script>

</head>
<body>
    <form id="form1">
		<h3>Register your Infragistics Ultimate bundle</h3>
        <div class="group-fields">
            <label for="firstName">First Name</label>
            @(Html.Infragistics().TextEditor()
			.ID("firstName")
			.InputName("firstName")
			.PlaceHolder("John")
			.Render()
            )
        </div>
        <div class="group-fields">
            <label for="lastName">Last Name</label>
            @(Html.Infragistics().TextEditor()
			.ID("lastName")
			.InputName("lastName")
			.PlaceHolder("Anderson")
			.Render()
            )
        </div>
        <div class="group-fields">
            <label for="email">Email</label>
            @(Html.Infragistics().TextEditor()
			.ID("email")
			.InputName("email")
			.PlaceHolder("john@email.com")
			.Render()
            )
        </div>
        <div class="group-fields">
            <label for="password">Password</label>
            @(Html.Infragistics().TextEditor()
			.ID("password")
			.InputName("password")
			.TextMode(TextEditorTextMode.Password)
			.PlaceHolder("********")
			.Render()
            )
        </div>
        <div class="group-fields">
            <label for="note">Note (Optional)</label>
            @(Html.Infragistics().TextEditor()
			.ID("note")
			.InputName("note")
			.TextMode(TextEditorTextMode.Multiline)
			.Height(100)
			.VisibleItemsCount(5)
			.Render()
            )
        </div>
        <div class="group-fields">
            @(Html.Infragistics().CheckBoxEditor()
            .ID("readonly")
            .AddClientEvent(EditorClientEvents.ValueChanged, "toggleReadonly")
            .Render()
            )

            <label id="lock" for="readonly" class="inline">Lock for editing</label>
        </div>
        <input id="btn" type="button" value="Clear" />
		<input type="submit" id="submitBtn" value="Submit" />
		@(Html.Infragistics().Validator().ID("form1")
			.Fields(x => {
				x.Field().ID("firstName").Required(true);
				x.Field().ID("lastName").Required(true);
				x.Field().ID("email").Email(true);
				x.Field().ID("password").Required(true);
			}).Render()
		)
		
    </form>

	<div class="submit-container">
		<h3>Submitted Values</h3>
		<div class="submit-container">
			<p id="results"></p>
		</div>
	</div>
	<div class="clear"></div>

    <script type="text/javascript">
        function toggleReadonly(evt, ui) {
            if (ui.newState == true) {
                $("#note").igTextEditor("option", "readOnly", true);
            }
            else {
                $("#note").igTextEditor("option", "readOnly", false);
            }
        }

        function toggleDisable(evt, ui) {
            if (ui.newState == true) {
                $("#note").igTextEditor("option", "disabled", true);
            }
            else {
                $("#note").igTextEditor("option", "disabled", false);
            }
        }

        $(function () {
        	$("#form1").submit(function (event) {
        		var submittedValues = $("#form1").serializeArray(), submitHTML = "";

        		$("#results").empty();
        		if ($("#form1").igValidator("validate")) {
        			$(".submit-container h3").show();
        			for (var i = 0 ; i < submittedValues.length; i++) {
        				$("#results").append("<p class='result'><span class='result-name'>" + submittedValues[i].name.replace(/([A-Z])/g, ' $1') + ":</span>  " + submittedValues[i].value + "</p>");
        			}
        		}
        		return false;
        	});

        	$("#btn").click(function () {
        		$("#firstName").igTextEditor("option", "value", "");
        		$("#lastName").igTextEditor("option", "value", "");
        		$("#email").igTextEditor("option", "value", "");
        		$("#password").igTextEditor("option", "value", "");
        		$("#note").igTextEditor("option", "value", "");
        		$("#readonly").igCheckboxEditor("option", "checked", false);

        		$("#note").igTextEditor("option", "disabled", false);
        		$("#note").igTextEditor("option", "readOnly", false);
        	});
        });
    </script>
</body>
</html>

using IgniteUI.SamplesBrowser.Models.DataAnnotations;
using IgniteUI.SamplesBrowser.Models.Northwind;
using IgniteUI.SamplesBrowser.Models.Repositories;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace IgniteUI.SamplesBrowser.Controllers
{
    public class EditorsController : Controller
    {
        //
        // GET: /Editors/

        [ActionName("data-annotation-validation")]
        public ActionResult DataAnnotationValidation()
        {
            ValidatedOrder model = new ValidatedOrder();
			ViewData["message"] = String.Empty;
			model.ShipMethodList = this.GetShipMethods();
            return View("data-annotation-validation", model);
        }

        [HttpPost]
        [ActionName("data-annotation-validation")]
        public ActionResult DataAnnotationValidation(ValidatedOrder model)
        {
			if (ModelState.IsValid)
			{
				ViewData["message"] = "Product saved successfully";
			}
            model.ShipMethodList = this.GetShipMethods();
            return View("data-annotation-validation", model);
        }

        [ActionName("load-and-save-form-values")]
        public ActionResult EditProduct()
        {
            Product product = RepositoryFactory.GetProductRepository().Get().First();
            ViewData["message"] = String.Empty;
            return View("load-and-save-form-values", product);
        }

        [ActionName("text-editor-mvc")]
        public ActionResult TextEditor()
        {
            return View();
        }

        [ActionName("date-editor-mvc")]
        public ActionResult DateEditor()
        {
            return View();
        }

        [ActionName("numeric-editor-mvc")]
        public ActionResult NumericEditor()
        {
            return View();
        }

        [ActionName("mask-editor-mvc")]
        public ActionResult MaskEditor()
        {
            return View();
        }

        public List<SelectListItem> GetShipMethods()
        {
            List<SelectListItem> selectList = new List<SelectListItem>()
            {
                new SelectListItem { Text = "Standard", Value = "Standard" },
                new SelectListItem { Text = "One Day", Value = "OneDay" },
                new SelectListItem { Text = "Two Day", Value = "TwoDay" },
                new SelectListItem { Text = "International", Value = "International" }
            };
            return selectList;
        }

    }
}

Ignite UI for jQuery | Samples

Search Results

Editors - Text Editor MVC

Register your Infragistics Ultimate bundle

Submitted Values

Code View