Syncfusion.AspNetMvc.FormRenderer
34.2.9
Prefix Reserved
dotnet add package Syncfusion.AspNetMvc.FormRenderer --version 34.2.9
NuGet\Install-Package Syncfusion.AspNetMvc.FormRenderer -Version 34.2.9
<PackageReference Include="Syncfusion.AspNetMvc.FormRenderer" Version="34.2.9" />
<PackageVersion Include="Syncfusion.AspNetMvc.FormRenderer" Version="34.2.9" />
<PackageReference Include="Syncfusion.AspNetMvc.FormRenderer" />
paket add Syncfusion.AspNetMvc.FormRenderer --version 34.2.9
#r "nuget: Syncfusion.AspNetMvc.FormRenderer, 34.2.9"
#:package Syncfusion.AspNetMvc.FormRenderer@34.2.9
#addin nuget:?package=Syncfusion.AspNetMvc.FormRenderer&version=34.2.9
#tool nuget:?package=Syncfusion.AspNetMvc.FormRenderer&version=34.2.9
Syncfusion ASP.NET MVC Form Renderer Component
The Syncfusion ASP.NET MVC Form Renderer is a schema-driven UI component that renders complete, interactive forms in ASP.NET MVC 5 applications from a declarative form schema. It eliminates repetitive form-building code by generating the form UI, validation, conditional behavior, and dynamic data wiring directly from JSON.
Using this package with an AI coding agent
Before generating Syncfusion code, ask your AI coding agent to run the Syncfusion setup using the following prompt:
Set up this project for Syncfusion before generating code. Fetch and follow the official instructions at https://ai.syncfusion.com, then report the detected platform, installed skill pack, MCP status, and any required licensing action.The setup detects your project's platform and loads the appropriate Syncfusion skill pack. No Syncfusion account or MCP key is required to install or read Syncfusion agent skills.
Platform reference: https://ai.syncfusion.com/aspnet-mvc/llms.txt
Key Features
- Schema-driven rendering – Render forms from a form schema object, or any raw JSON format.
- Layouts – Built-in
SingleColumn,TwoColumn,ThreeColumn, andFourColumnresponsive layouts for both compact and wide forms. - Built-in validations – Validations such as required, email, URL, number, min/max length, regex, and more, all declared in the schema can be handled in the component.
- Expressions – Compute field values dynamically from other fields using formula/expression support in the schema.
- Conditions – Show, hide, enable, disable, or require fields based on the value of other fields using conditional rules.
- Dependent dropdowns – Cascade one dropdown's options off another field's value, including async data-source loading.
- Events –
created,onChange,onButtonClick, andonSubmitevents for reacting to user interaction. - Globalization –
locale,enableRtl, and culture-aware formatting out of the box.
Common Setup
These setup steps are required only once for your application, regardless of which Syncfusion components you use.
1. Install the NuGet Package
Install-Package Syncfusion.AspNetMvc.FormRenderer
2. Add Namespace Reference
Edit Web.config under the Views folder and add the Syncfusion.EJ2 namespace:
<namespaces>
<add namespace="Syncfusion.EJ2"/>
</namespaces>
3. Add Stylesheet & Script References
In your layout file (~/Views/Shared/_Layout.cshtml), add the following in the <head> section:
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>@ViewBag.Title - Syncfusion Application</title>
<link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/34.2.9/fluent2.css" />
<script src="https://cdn.syncfusion.com/ej2/34.2.9/dist/ej2.min.js"></script>
</head>
4. Register Script Manager
At the end of the <body> tag in your layout file (~/Views/Shared/_Layout.cshtml):
<body>
@RenderBody()
@Html.EJS().ScriptManager()
</body>
Quick Start
Step 1: Add the Form Renderer to a view
Add the Form Renderer control to ~/Views/Home/Index.cshtml. The Schema property accepts an inline object, a JSON string, or a model property from your controller.
@using Syncfusion.EJ2.FormRenderer
@{
var schema = @"{
"version": "0.1.0",
"properties": {
"customerName": {
"id": "textbox_1780380000001_202",
"name": "customerName",
"type": "string",
"label": "Customer Name",
"textboxType": "text",
"required": true,
"widget": "textbox",
"labelPosition": "top",
"size": "Bigger",
"placeholder": "Enter your full name"
},
"phoneNumber": {
"id": "textbox_1780380000003_404",
"name": "phone",
"type": "string",
"label": "Phone Number",
"textboxType": "number",
"required": true,
"widget": "textbox",
"labelPosition": "top",
"size": "Bigger",
"placeholder": "Enter your phone number"
}
}
}";
}
@Html.EJS().FormRenderer("employeeForm")
.Layout(FormLayout.TwoColumn)
.Schema(schema)
.Render()
Step 2: Wire it up in the controller
using System.Web.Mvc;
public class HomeController : Controller
{
public ActionResult Index()
{
return View();
}
[HttpPost]
public ActionResult Submit(FormCollection form)
{
// The renderer will raise onSubmit and post the collected payload
// back to this action via the form's submit handler.
return View("Index");
}
}
Step 3: Run the Application
Press Ctrl+F5 to run the application in your browser.
Documentation
Support
License
This is a commercial product and requires a paid license for possession or use. Review the Syncfusion EULA
About Syncfusion
Syncfusion provides 1600+ UI components and frameworks for web, mobile, and desktop development across multiple platforms:
Web: Blazor | ASP.NET MVC | JavaScript | Angular | React | Vue
Desktop: WinForms | WPF | WinUI
Learn more at www.syncfusion.com
sales@syncfusion.com | Toll Free: 1-888-9-DOTNET
| Product | Versions Compatible and additional computed target framework versions. |
|---|---|
| .NET Framework | net462 is compatible. net463 was computed. net47 was computed. net471 was computed. net472 was computed. net48 was computed. net481 was computed. |
-
- Newtonsoft.Json (>= 13.0.3)
- Syncfusion.AspNetMvc.Base (>= 34.2.9)
- Syncfusion.EJ2.JavaScript (>= 34.2.9)
- Syncfusion.Licensing (>= 34.2.9)
NuGet packages
This package is not used by any NuGet packages.
GitHub repositories
This package is not used by any popular GitHub repositories.