We have released ASP.NET Core 1.0 compatible MVC Edition controls, with this our controls support the new TagHelpers feature available in MVC. We can either use the C1 Templates inside Visual Studio 2015 or the ASP.NET Core default template to get started using TagHelpers. In this blog post, I will show you how to use the TagHelpers with the default template.

Create an ASP.NET Core MVC Project

1. Open Visual Studio 2015. Go to File->New Project.

2. Select ASP.NET Core Web Application Template.

3. From the "ASP.NET Core Templates", select Web Application. Click OK button.

Adding ComponentOne Studio ASP.NET MVC Edition Package

1. Right Click References. Select "Manage NuGet Packages" from the context menu.

2. In the search box type "C1.AspNetCore.Mvc", the package source should be GrapeCity NuGet. If this NuGet path setting is not added to your Visual Studio NuGet Package Manager Source then please add using: Tools->NuGet Package Manager-> Package Manager Settings before proceeding.
The Source path for GrapeCity NuGet is http://nuget.grapecity.com/nuget.

Please refer the image below for the Package Manager setting:

GrapeCityNuget

3. Select the latest package and click Install.

Note that the above step creates a dependency inside Project.json for "C1.AspNetCore.Mvc". You may directly add the dependency in the project.json and the package will be downloaded.

Configure TagHelper & Register Resources

1. Open the _ViewImports.CS file and add the following @addTagHelper to use TagHelpers for ASP.NET MVC Edition controls.


@addTagHelper *, C1.AspNetCore.Mvc

2. Register the resources. We can choose to register all the resources which is default, or select to register the controls we wish to use in the application. In this sample, I will use the FlexGrid control. So open _Layout.cshtml from the Views->Shared directory and add the below code inside the "head" tags:


 <c1-resources control-types="C1Grid" theme="default"></c1-resources>

You could also add the resource tag to your view page but by putting it in _Layout.cshtml you just have to define it once and all views using _Layout.cshtml would get the resources.

Add Licensing

1. If you are working inside Visual Studio 2015, go to Tools->GrapeCity License Manager, this menu should be available if you have the ASP.NET Core compatible C1Studio MVC Edition installed on the machine(i.e. 2016V2 and later). Login with your C1 credentials and click on the "Generate App(run time) Licenses". On the next screen select serial number from drop down or "Eval"(if evaluating) and click "Generate App(run time) Licenses" button. This step adds an app based license to the project and creates "GCDTLicenses.xml" license file.

If you are working in any other Editor visit Licensing site to add an App based license to your ASP.NET Core project.

To learn more about ASP.NET Core licensing refer the documentation.

Setting Model & Controller

1. This example uses a Sales model class in the project which has a static method that returns sales data.


public class Sale
{
public int ID { get; set; }
public DateTime Start { get; set; }
public DateTime End { get; set; }
public string Country { get; set; }
public string Product { get; set; }
public string Color { get; set; }
public double Amount { get; set; }
public double Amount2 { get; set; }
public double Discount { get; set; }
public bool Active { get; set; }public MonthData[] Trends { get; set; }
public int Rank { get; set; }private static List COUNTRIES = new List { "US", "UK", "Canada", "Japan", "China", "France", "German", "Italy", "Korea", "Australia" };
private static List PRODUCTS = new List { "Widget", "Gadget", "Doohickey" };

///
/// Get the data.
///

//////
public static IEnumerable GetData(int total)
{
var colors = new[] { "Black", "White", "Red", "Green", "Blue" };
var rand = new Random(0);
var dt = DateTime.Now;
var list = Enumerable.Range(0, total).Select(i =>
{
var country = COUNTRIES[rand.Next(0, COUNTRIES.Count - 1)];
var product = PRODUCTS[rand.Next(0, PRODUCTS.Count - 1)];
var color = colors[rand.Next(0, colors.Length - 1)];
var startDate = new DateTime(dt.Year, i % 12 + 1, 25);
var endDate = new DateTime(dt.Year, i % 12 + 1, 25, i % 24, i % 60, i % 60);

return new Sale
{
ID = i + 1,
Start = startDate,
End = endDate,
Country = country,
Product = product,
Color = color,
Amount = Math.Round(rand.NextDouble() * 10000 - 5000, 2),
Amount2 = Math.Round(rand.NextDouble() * 10000 - 5000, 2),
Discount = Math.Round(rand.NextDouble() / 4, 2),
Active = (i % 4 == 0),
Trends = Enumerable.Range(0, 12).Select(x => new MonthData { Month = x + 1, Data = rand.Next(0, 100) }).ToArray(),
Rank = rand.Next(1, 6)
};
});
return list;
}

public static List GetCountries()
{
var countries = new List();
countries.AddRange(COUNTRIES);
return countries;
}

public static List GetProducts()
{
List products = new List();
products.AddRange(PRODUCTS);
return products;
}
}

public class MonthData
{
public int Month { get; set; }
public double Data { get; set; }
}


2. Right click the Controller folder in the project and select Add-> New Item.
3. In the Add New Item Dialog select "MVC Controller Class". Name the class "FlexGridIntro".
4. Add Index_Bind function in the controller to return sales data as below:


public ActionResult Index_Bind([C1JsonRequest] CollectionViewRequest requestData)
{
return this.C1Json(CollectionViewHelper.Read(requestData,Sale.GetData(50)));
}

Using FlexGrid to Display Sales Data

1. Right click the Views folder and add another folder by the name "FlexGridIntro". 2. Right click "FlexGridIntro" folder and select Add->New Item. In the Add New Item dialog, select "MVC View Page". Name it "Index".
3. In the cshtml of Index page add the following code, you'll find that you get IntelliSense for each tag in editor.


<c1-flex-grid id="fg" auto-generate-columns="false" width="440px" height="500px" group-by="Country" show-groups="true" >   
    <c1-flex-grid-column binding="ID" ></c1-flex-grid-column>
    <c1-flex-grid-column binding="Start"></c1-flex-grid-column>
    <c1-flex-grid-column binding="End"></c1-flex-grid-column>
    <c1-flex-grid-column binding="Country"></c1-flex-grid-column>
    <c1-flex-grid-column binding="Product"></c1-flex-grid-column>
    <c1-flex-grid-column binding="Color"></c1-flex-grid-column>
    <c1-flex-grid-column binding="Amount"></c1-flex-grid-column>
    <c1-flex-grid-column binding="Amount2"></c1-flex-grid-column>
    <c1-flex-grid-column binding="Discount"></c1-flex-grid-column>
    <c1-flex-grid-column binding="Active"></c1-flex-grid-column>
    <c1-items-source read-action-url="@Url.Action("Index_Bind")"></c1-items-source>
</c1-flex-grid>

Refer to documentation for implementing different features using TagHelpers.

Refer ASP.NET Core MVCExplorer demo for examples of all controls.

Download Free Trial >>

Tags