In this article you’ll learn how the current syntax used in Scheduler .NET can be simplified with ASP.NET MVC3 view engine called Razor.
DHTMLX Scheduler .NET can be implemented either in C# or Visual Basic. Razor uses C# or Visual Basic syntax and allows writing HTML with C# or Visual Basic in the same page. We’ll choose C# for this project.
Razor syntax used in Scheduler .NET:
- ‘@’ character precedes the code and is added inside the HTML markup;
- ASP.NET tags <% %> are omitted;
Create a new ASP.NET MVC3 project in Microsoft Visual Studio 2010 and proceed with the following steps:
- Copy DHTMLX .dll file to your project bin folder, then go to References -> Add reference and choose the mentioned library reference;
- Copy Scheduler scripts to your project Scripts folder;
- Set up a database by right-clicking on ‘Your_project_name’ (e.g. mySchedulerApp) -> Add -> Add ASP.NET Folder -> App_Data -> Add New Item and name it “Sample.mdf”;
- Add a new table and name it “Event”. It should have the following columns: id, text, start_date, end_date with int, nvarchar(250), datetime and datetime Data Types correspondingly. Set primary key to id and enable the identity column;
The other option is to create a table using the following query:
CREATE TABLE [dbo].[Events](
[id] int IDENTITY(1,1) NOT NULL,
[text] nvarchar(250) NULL,
[start_date] datetime NOT NULL,
[end_date] datetime NOT NULL,
PRIMARY KEY (id)
)
- Set up a data model by creating a new LINQ to SQL database, name it “Sample.dbml” and add “Event” table to it;
- Create a controller and name it “BasicScheduler”. Use the code written in this tutorial;
- Generate the view. Add a new Razor view “Index.cshtml” to get an event calendar with the same functionality as in ASP.NET views, but with a reduced and simplified coding:
@{
Layout = null;
}
<!DOCTYPE html >
<html>
<head >
<title>Index</title>
<style type="text/css">
html, body
{
height:100%;
padding:0px;
margin:0px;
}
</style>
</head >
<body>
@Html.Raw(Model.Render())
</body>
</html>
To render the view, remember to change the default route in Global.asax.cs as follows:
// Parameter defaults
new { controller = "BasicScheduler", action = "Index", id = UrlParameter.Optional }
The event calendar is ready to use!
Check it now, get a free trial!
Feel free to leave a comment below and share the article with your friends, if you find it useful.