This topic explains how to get started with Ignite UI for MVC™ components.
This topic contains the following sections:
The Ignite UI for MVC provides a server-side set of MVC Extensions that allows the Ignite UI for jQuery controls to be defined and used in the following way:
In Razor:
@(Html.Infragistics().CONTROL_NAME())
OR
In Razor:
@(Html.Infragistics().CONTROL_NAME(Model))
All controls have helper methods available off of the Infragistics() extension methods and can be seen using intellisense.
In Razor:
@(Html.Infragistics().Grid("grid1", Model.GridFiltering))
If you have chosen the typical installation of Ignite UI for jQuery 2020.1, you can find the resources under the paths below:
| Type | Path |
|---|---|
| Assemblies | %%InstallPathMVC%%\ |
| Script files | C:\Program Files (x86)\Infragistics\2020.1\Ignite UI for jQuery\js |
| CSS files | C:\Program Files (x86)\Infragistics\2020.1\Ignite UI for jQuery\css |
All the Ignite UI for MVC functionality is contained in the Infragistics.Web.Mvc assembly, which comes compiled against all MVC4 and MVC5. For further details on the assembly location of the Ignite UI for MVC, please read Using JavaScript Resources in Ignite UI for jQuery.
Note: You should set
Copy Localproperty of the reference of the dll to betrue.
The Infragistics loader is used to load dependent scripts and styles files required for the page. For further details on how to use the loader please refer to the topic: Using JavaScript Resources in Ignite UI for jQuery.
The following code listing demonstrates how to initialize the Ignite UI for MVC loader:
In Razor:
<script src="{IG Resources root}/js/infragistics.loader.js"></script>
@(Html.Infragistics()
.Loader()
.ScriptPath("{IG Resources root}/js/")
.CssPath("{IG Resources root}/css/")
.Render()
)
The JavaScript files are also available in a hosted environment on the Infragistics CDN. The benefits of using a CDN are numerous so please refer to the Infragistics Content Delivery Network (CDN) help topic for details.
In Razor:
<script src="http://cdn-na.infragistics.com/igniteui/2020.1/latest/js/infragistics.loader.js"></script>
In Razor:
@(Html.Infragistics().Loader()
.ScriptPath(“http://cdn-na.infragistics.com/igniteui/2020.1/latest/js/”)
.CssPath(“http://cdn-na.infragistics.com/igniteui/2020.1/latest/css/”)
.Render())
When instantiating a Ignite UI for MVC control, you must call the Render method last after all other options are configured. This is the method that renders the HTML and JavaScript necessary to instantiate the control on the client.
There are two different options available for declaring controls in an MVC application available. The following table lists the available methods for defining Ignite UI for MVC controls depending on whether you define the control in a Model or in the View. Additional details are available after the summary table.
| Method | Description |
|---|---|
| Defining controls in a Model | Defining the control by configuring a Model class and passing it as an argument in the grid extension method. |
| Defining controls in a View | Defining the control in the View using chaining syntax. |
Initializing the control with the chaining syntax moves all creation and configuration logic to the view, making the controller code extremely concise and clear. Defining the control in the view is achieved by exposing required properties and methods through helper’s methods that always return the same object that called them.
The following code listing demonstrates how to initialize the igTree control using the chanining syntax.
In Razor:
@(Html.
Infragistics().
Tree().
ID("MVCBoundTree").
Bindings( bindings => {
bindings.
TextKey("Text").
ValueKey("Value").
ChildDataProperty("Child").
Bindings( b1 => {
b1.
TextKey("Text").
ValueKey("Value").
ImageUrlKey("ImageUrl").
NavigateUrlKey("NavigateUrl").
TargetKey("Target");
});
}).
DataSource(Model).
DataBind().
Render()
)
For complex objects lambda expressions are used in order to achieve the syntax. The following code listing demonstrates how to configure ColumnLayouts using lambda expressions.
In Razor:
.ColumnLayouts(layouts =>
{
layouts.For(x => x.CustomerAddresses)
.PrimaryKey("AddressID")
.ForeignKey("CustomerID")
.AutoGenerateColumns(false)
.Columns(childcols1 =>
{
childcols1.For(x => x.AddressTypeID).HeaderText("AddressTypeID");
childcols1.For(x => x.AddressID).HeaderText("AddressID");
childcols1.For(x => x.CustomerID).HeaderText("CustomerID");
})
})
Using a model class relies on the controller to configure the control. This is useful in a scenario where after a request, you need to retrieve some of the settings or properties of the control which wouldn’t be otherwise available if you would have used chaining to configure everything in the View.
Note: The model class exists as a helper that can be used to help return data to the view. It is not required for any specific functionality in the controller but does make more complex remote operations easier to code.
In C#:
[ActionName("Filtering")]
public ActionResult GridFiltering()
{
GridFilteringModel model = new GridFilteringModel();
model.GridFiltering.DataSourceUrl = Url.Action("BindGridFiltering");
this.InitializeSortingGridOptions(model.GridFiltering);
return View(model);
}
private void InitializeSortingGridOptions(GridModel model)
{
model.Height = "500px";
model.Columns.Add(new GridColumn("Product ID", "ProductID", "number", "100px"));
model.Columns.Add(new GridColumn("Product Name", "Name", "string", "300px"));
model.Columns.Add(new GridColumn("Product Number", "ProductNumber", "string", "205px"));
model.Columns.Add(new GridColumn("Standard Cost", "StandardCost", "number", "110px"));
GridFiltering filtering = new GridFiltering();
model.Features.Add(filtering);
}
The following procedure demonstrates how to add the required assemblies and resources (CSS and JavaScript files) to work with Ignite UI for MVC.
To complete the procedure, you need the following:
This topic takes you step-by-step toward developing an ASP.NET MVC application with the igTree control. The following is a conceptual overview of the process:
Declaring the igTree in an MVC application using chaining
Adding the controller’s code
Bindings
The following steps demonstrate how to develop ASP.NET MVC application with igTree.
Adding required resource to the MVC application
Navigate to the installation folder of Ignite UI for jQuery 2020.1: C:\Program Files (x86)\Infragistics\2020.1\Ignite UI for jQuery
Copy the js and css folder to the root directory of your MVC application
Add reference to Infragistics.Web.Mvc assembly
Note: You should set
Copy Localproperty of the reference of the dll totrue.
Declare the igTree in an MVC application
Add the Infragistics loader
This step adds the Infragistics loader to the header of the page
In Razor:
@(Html.Infragistics()
.Loader()
.ScriptPath("{IG Resources root}/js/")
.CssPath("{IG Resources root}/css/")
.Render()
)
Add the igTree control
This step adds the igTree control to the MVC application.
In Razor:
@(Html.Infragistics()
.Tree()
.ID("XmlTree")
.InitialExpandDepth(0)
.DataSource(Model)
.CheckboxMode(CheckboxMode.TriState)
.DataBind()
.Render()
)
Note: Notice the use of the Render method the code listing. All Ignite UI for MVC require the Render method to be called as the last method in order to initiate server-side rendering for the control.
Add the controller’s code
Add the action name
This step adds the ActionName to the controller
In C#:
[ActionName("node-images")]
public ActionResult DataBindingUsingMVC()
{
return View("NodeImages", this.GetData());
}
Add the GetData() helper method to the controller
This step defines the helper method for creating the data source
In C#:
private IEnumerable<Folders> GetData()
{
string phisicalFilePath = System.Web.HttpContext.Current.Server.MapPath(System.Web.HttpContext.GetGlobalResourceObject("Tree", "path_treeData").ToString());
var ctx = XDocument.Load(phisicalFilePath);
IEnumerable<Folders> data = from item in ctx.Root.Elements("Folder")
select new Folders
{
Text = item.Attribute("Text").Value,
Value = item.Attribute("Value").Value,
ImageUrl = Url.Content(item.Attribute("ImageUrl").Value),
Folder = from i1 in item.Elements("Folder")
select new Folders
{
Text = i1.Attribute("Text").Value,
Value = i1.Attribute("Value").Value,
ImageUrl = Url.Content(i1.Attribute("ImageUrl").Value),
Folder = from i2 in i1.Elements("Folder")
select new Folders
{
Text = i2.Attribute("Text").Value,
Value = i2.Attribute("Value").Value,
ImageUrl = Url.Content(i2.Attribute("ImageUrl").Value),
Folder = from i3 in i2.Elements("Folder")
select new Folders
{
Text = i3.Attribute("Text").Value,
Value = i3.Attribute("Value").Value,
ImageUrl = Url.Content(i3.Attribute("ImageUrl").Value)
}
}
}
};
return data;
}
Bindings
Add the tree bindings
This step adds the bindings configuration to the igTree.
Note: In order for the igTree control to determine how each field of the bound data should function in the hierarchy, a binding object must be configured for each type of object that needs to be displayed in the tree.
In C#:
.Bindings( bindings => {
bindings.
ValueKey("Value").
TextKey("Text").
ImageUrlKey("ImageUrl").
ChildDataProperty("Folder");
})
Now that you've had the opportunity to learn about working with Ignite UI for MVC, make sure to check out Developing ASP.NET MVC Applications with igGrid for more detail on working specifically with ASP.NET MVC and the igGrid.
The following topics provide additional information related to this topic.
View on GitHub