Documente Academic
Documente Profesional
Documente Cultură
NET MVC3 Razor
FREE DOWNLOAD
After completing the above mentioned steps, you’ll get a ready car rental service like on the
picture below:
Tags:
asp.net mvc5 sample
All posts
asp.net
asp.net mvc3 sample
asp.net mvc4 sample
asp.net mvc5 sample
ASPX sample
booking calendar
calendar template
case study
custom view
DHXEventsHelper
event calendar
events customization
You can skip reading this tutorial and simply download a ready package right now.
lightbox
Yes, I want to receive free trials, live update
discounts and new tutorials maintenance release
mvc
Your name...
mvc3 razor tutorial
mvc5
Your email...
recurring events
room booking
Get a Free Demo Now sample in Visual Basic
scheduler
Privacy Policy and Terms of Use
signalr
skin builder
timeline view
http://blog.schedulernet.com/post/creatingcarrentalapplicationinaspnetmvc3razor.aspx 1/14
2/16/2017 DHTMLX Scheduler .NET | Tutorial: Car Rental Application in ASP.NET MVC3 Razor
b) Database and Model Creation
Rightclick on your project name in the Solution Explorer and add a new ASP.NET folder App_Data. Now
create a new SQL Server Database and name it MyScheduler.mdf
To set up the application database create 3 tables – Type,Car and Order – and add the required
columns:
The ‘Type’ table should only have the car id and the title values:
The ‘Car’ table should include data to identify cars price, brand, type and image:
Let’s make the TypeId field a foreign key that refers to [Type].id field.
The ‘Order’ table is used to enable order placement with a car rental form. Therefore it should contain
description, time period, pick up/drop off locations and car id columns:
Like with the ‘Car’, table make’ the Car_id field a foreign key that refers to [Car].id field.
Set primary key to the id columns of the three tables. Remember to change the properties of the identity
column to id.
When the tables are completed, create a data model LINQ to SQL Classes. Name it Rental and drag the
newly created tables onto the LINQ to SQL designer surface.
http://blog.schedulernet.com/post/creatingcarrentalapplicationinaspnetmvc3razor.aspx 2/14
2/16/2017 DHTMLX Scheduler .NET | Tutorial: Car Rental Application in ASP.NET MVC3 Razor
To facilitate rendering of the Order collection as a json string during data loading, no cyclic
links between ‘Order’ and ‘Type’ should be set.
To achieve this, change Parent Property Access from Public to Internal for each association:
Go to Views, create a new folder ‘Home’ and add Index.cshtml. Delete the views we do not
require from the folders Home and Shared, that’s Error.cshtml and About.cshtml.
Rightclick on the ‘Models’ to create a ViewModel.cs with the Scheduler object and a category (car)
count:
1 using System; ?
2 using System.Collections.Generic;
3 using System.Linq;
4 using System.Web;
5 using DHTMLX.Scheduler;
6 namespace Rental.Models
7 {
8 public class ViewModel
9 {
10 public DHXScheduler Scheduler { get; set; }
11 public int CategoryCount { get; set; }
12
13 }
Output data generated with the car search form are stored in the FormState:
1 public class FormState ?
2 {
3 public string Type { get; set; }
4 public string Price { get; set; }
5 }
To change our website layout go to Views > Shared > _Layout.cshtml :
1 <!DOCTYPE html> ?
2 <html>
3 <head>
4 <title>@ViewBag.Title</title>
5 <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css"
6 <script src="@Url.Content("~/Scripts/jquery‐1.7.2.min.js")" type="text/javascript"
7 </head>
8 <body>
9 <div class="page">
10 <div id="header">
http://blog.schedulernet.com/post/creatingcarrentalapplicationinaspnetmvc3razor.aspx 3/14
2/16/2017 DHTMLX Scheduler .NET | Tutorial: Car Rental Application in ASP.NET MVC3 Razor
10 <div id="header">
11 </div>
12 <div id="main">
13 @RenderBody()
14 <div id="footer">
15 </div>
16 </div>
17 </div>
18 </body>
Go to Home > Index.cshtml to make changes also to the calendar page.
The full code at this stage should look as follows:
1 @{ ?
2 ViewBag.Title = "Car Rental Service";
3 }
4 @model Rental.Models.ViewModel
5
6 @Html.Raw(Model.Scheduler.GenerateCSS())
7 @Html.Raw(Model.Scheduler.GenerateJS())
8
9 <style type="text/css">
10 /*override some scheduler css*/
11 #scheduler_here .dhx_cal_tab
12 {
13 display:none;
14 }
15 .dhx_cal_header div div
16 {
17 border:none;
18 }
Below you can find detailed descriptions of how we implement Scheduler .NET rendering and
initialization as well as customize the calendar template :
1. Scheduler .NET rendering
This time we render the Scheduler in an unusual way to override some default css styles after loading
and before Scheduler initialization. Instead of using Scheduler.Render () we did in the following way:
At first, we loaded the required css and js:
1 @Html.Raw(Model.Scheduler.GenerateCSS()) ?
2
3 @Html.Raw(Model.Scheduler.GenerateJS())
And finalized it with generating the markup and initialization code:
1 @Html.Raw(Model.Scheduler.GenerateHTML()) ?
2. Scheduler .NET initialization
The Scheduler initializes in the container of the set height. The number of cars (and consequently, the
actual calendar height) can be different. It depends on the search form output. We’ve chosen the default
height of 7 lines. If there are < 7 lines, the calendar height is equal to the number of lines. If there are > 7
lines in the calendar, scrolling is enabled while the calendar height is set to the default 7 lines.
@{
1 //calculate height of calendar container ?
2 int rowHeigth = (Model.Scheduler.Views[0] as DHTMLX.Scheduler.Controls.TimelineView).Dy;
3 int headerHeight = 45;
4 int showRows = 7;
5 int actualHeight = rowHeigth * Model.CategoryCount + headerHeight;
6 int maxHeight = headerHeight + showRows * rowHeigth;
7 }
8 <div style="height:@(actualHeight < maxHeight ? actualHeight : maxHeight)px;"
3. Scheduler .NET template customization
http://blog.schedulernet.com/post/creatingcarrentalapplicationinaspnetmvc3razor.aspx 4/14
2/16/2017 DHTMLX Scheduler .NET | Tutorial: Car Rental Application in ASP.NET MVC3 Razor
We override templates for the car scale and rent boxes:
1 scheduler.templates['@((Model.Scheduler.Views[0]).Name)_scale_label']= function(key, label, obj){
?
2 return "<div style=\"width:100%\">\
3 <img src=\""+obj.link+"\" alt=\""+label+"\"></img><br/>\
4 <div class=\"car_brand\">"+label+"</div><div class=\"car_price\">$"
5
6 };
7
8 scheduler.templates.event_bar_text = function (start, end, event
9 return "Rented";
10 };
Proceed with adding the required classes to Site.css:
1 body ?
2 {
3 background: #5c87b2;
4 background‐image: url("./background_car_rent.png");
5 font‐size: 75%;
6 font‐family:Arial,sans‐serif;
7 margin: 0;
8 padding: 0;
9 color: #696969;
10 }
11 .hd_line
12 {
13 height:1px;
14 background‐image: url("./line.png");
15 width:100%;
16 margin:10px 0 20px;
17 }
18 .rent_title
c) Create a controller
The next stage is to create a controller. Rightclick on the Controllers folder in the Solution Explorer and
create HomeController.cs.
The full code should look like this:
1 using System.Linq; ?
2 using System.Web;
3 using System.Web.Mvc;
4 using System.Collections;
5 using System.Collections.Generic;
6 using DHTMLX.Scheduler;
7 using DHTMLX.Scheduler.Controls;
8 using DHTMLX.Scheduler.Data;
9 using DHTMLX.Common;
10 using Rental.Models;
11 namespace Rental.Controllers
12 {
13 public class HomeController : Controller
14 {
15
16
17 public ActionResult Index(FormState state)
18 {
Let’s have an insight into the most essential code snippets:
First of all, add ‘Collision extension’ to avoid multiple orders of one and the same car for the same
period. At this step we also connect a minicalendar that will be later required:
1 public ActionResult Index(FormState state) ?
2 {
3
4 var scheduler = new DHXScheduler(this);
5 scheduler.Extensions.Add(SchedulerExtensions.Extension.Collision);
6 scheduler.Extensions.Add(SchedulerExtensions.Extension.Minical);
http://blog.schedulernet.com/post/creatingcarrentalapplicationinaspnetmvc3razor.aspx 5/14
2/16/2017 DHTMLX Scheduler .NET | Tutorial: Car Rental Application in ASP.NET MVC3 Razor
It’s easy to implement filtration with LINQ to SQL. We simply add several where filters.
1 protected IQueryable<Car> _SelectCars(RentalDataContext context, FormState state)
?
2 {
3 IQueryable<Car> cars = from car in context.Cars select car;
4 if (state == null)
5 return cars;
6
7 string _type = state.Type;
8 string _price = state.Price;
It means, LINQ doesn’t filter the collection each time when we call Where(). LINQ to SQL will
translate these conditions into the equivalent SQL query and send it to the SQL server for processing
just before cars collection is enumerated.
1 //filter by car type ?
2 if (!string.IsNullOrEmpty(_type))
3 {
4 int type = context.Types.First().id;
5 if (!string.IsNullOrEmpty(_type))
6 {
7 int.TryParse(_type, out type);
8 }
9 cars = cars.Where(c => c.TypeId == type);
10 }
11
12 //filter by price
13 if (!string.IsNullOrEmpty(_price))
14 {
15 var price = _price.Split('‐');
16 int low = int.Parse(price[0]);
17 int top = int.Parse(price[1]);
18 cars = cars.Where(c => c.Price <= top && c.Price >= low);
19 }
We set a 2 step time interval for car order with the scale of 12 cells in the TimelineView.
Columns and rent boxes height as well as the height of rows are also set here. The function
scheduler.Views.Clear(); removes the default scheduler views.
1 var units = new TimelineView("Orders", "car_id"); ?
2 units.X_Step = 2;
3 units.X_Length = 12;
4 units.X_Size = 12;
5 //width of the first column
6 units.Dx = 149;
7 //row height
8 units.Dy = 76;
9 //rent boxes height
10 units.EventDy = units.Dy ‐ 5;
11 units.AddOptions(cars);
12 units.RenderMode = TimelineView.RenderModes.Bar;
13 scheduler.Views.Clear();
14 scheduler.Views.Add(units);
15 scheduler.InitialView = scheduler.Views[0].Name;
Create a list of select options in the controller and pass them to view via ViewData. Retain the
selected values in the controls after page reload.
1 protected void _UpdateViewData(DHXScheduler scheduler, RentalDataContext context, FormState state)
?
2 {
3 ViewData["Price"] = _CreatePriceSelect(scheduler , state.Price);
4 ViewData["Type"] = _CreateTypeSelect(context.Types, state.Type);
5 }
Let’s customize the customer’s form for order placement by adding the following code:
1 protected void _ConfigureLightbox(DHXScheduler scheduler, IEnumerable cars)?
2 {
3 scheduler.Lightbox.Add(new LightboxText("text", "Contact details") { Height = 42, Focus =
4 scheduler.Lightbox.Add(new LightboxText("description", "Note") { Height = 63 });
5 var select = new LightboxSelect("car_id", "Car Brand");
6 scheduler.Lightbox.Add(select);
7 scheduler.Lightbox.Add(new LightboxText("pick_location", "Pick up location"
8 scheduler.Lightbox.Add(new LightboxText("drop_location", "Drop off location"
9
http://blog.schedulernet.com/post/creatingcarrentalapplicationinaspnetmvc3razor.aspx 6/14
2/16/2017 DHTMLX Scheduler .NET | Tutorial: Car Rental Application in ASP.NET MVC3 Razor
9
10 select.AddOptions(cars);
11 scheduler.Lightbox.Add(new LightboxTime("time", "Time period"));
12 }
The form will look like the picture below:
Note: Save and Data methods we use in this app are described in the Simple ASP.NET MVC
application with Scheduler.
Copy the available car images (image size is 80x48 px) to the Content folder of your project. Rightclick
on the database in the Server Explorer to create a new query. Add the car rental static data to the tables
Cars and Types, and execute the SQL file. The data and the necessary pics are available in the
download package.
The first part of the tutorial is completed. Now you have a nicelooking basic rental calendar in ASP.NET
MVC3 Razor with vertically arranged cars and a simple price and time select:
http://blog.schedulernet.com/post/creatingcarrentalapplicationinaspnetmvc3razor.aspx 7/14
2/16/2017 DHTMLX Scheduler .NET | Tutorial: Car Rental Application in ASP.NET MVC3 Razor
Open Index.cshtml and update it by adding the following time selects:
1 <div> ?
2 <span>Pick Up Date:</span><br />
3 @Html.TextBox("DateFrom")
4 <img src="@Url.Content("~/Content/calendar.gif")" class="date_calendar"
5 @Html.DropDownList("TimeFrom")
6 </div>
7 <div>
8 <span>Drop Off Date:</span><br />
9 @Html.TextBox("DateTo")
10 <img src="@Url.Content("~/Content/calendar.gif")" class="date_calendar"
11 @Html.DropDownList("TimeTo")
12 </div>
We also add a checkbox to enable/disable date filters:
1 <div class="check_dates"> ?
2 <span>Only available: </span>
3 @Html.CheckBox("DateFilter", true)
4 </div>
Go back to Site.css and add styles for the new controls:
1 .check_dates ?
2 {
3 line‐height:14px;
4 margin‐bottom:‐10px;
5 margin‐top:0 !important;
6 }
7 .check_dates > input
8 {
9 width:20px;
10 vertical‐align:middle;
11 }
12
13 #DateFrom, #DateTo
14 {
15 width:80px;
16 }
17 #TimeFrom, #TimeTo
18 {
19 width:60px;
Let’s define the date picker behavior. Go to Scripts folder and create scripts.js. Add a minical
function for the automatic show/ remove of the date picker:
1 /* ?
2 Date picker behavior
3 */
4 scheduler.pickerDateFormat = "%m/%d/%Y";
5
6 function remove_minical() {
7 if (scheduler._calendar) {
8 scheduler.destroyCalendar(scheduler._calendar);
9 $("#minical_cont").remove();
10 scheduler._calendar = null;
11 }
http://blog.schedulernet.com/post/creatingcarrentalapplicationinaspnetmvc3razor.aspx 8/14
2/16/2017 DHTMLX Scheduler .NET | Tutorial: Car Rental Application in ASP.NET MVC3 Razor
10 scheduler._calendar = null;
11 }
12 }
13 function show_minical(id) {
14 //if mini calendar already shown ‐ destroy it
15 if (scheduler._calendar) {
16 remove_minical();
17
18 }
Update Index.cshtml by connecting the JavaScript library as it is shown below:
1 <script src="@Url.Content("~/Scripts/scripts.js")" type="text/javascript"></script>
?
Now we can adjust the serverside application logic:
a) Model
Update ViewModel.cs by adding properties for the new controls to the FormState:
1 public class FormState ?
2 {
3 public string DateFrom { get; set; }
4 public string DateTo { get; set; }
5 public string TimeFrom { get; set; }
6 public string TimeTo { get; set; }
7 public string Type { get; set; }
8 public string Price { get; set; }
9 public bool DateFilter { get; set; }
10 }
b) Controller and View
Date is selected from the two inputs – date picker and ‘select time’ dropdown list. We add a function to
HomeController.cs to parse the date to the DataTime object.
1 private DateTime _ParseDate(string date, string time) ?
2 {
3 var datestr = string.Format("{0} {1}", date, time);
4 DateTime result = new DateTime();
5 DateTime.TryParse(datestr, System.Globalization.CultureInfo.InvariantCulture, System.Globalization.DateTime
6 return result;
7 }
If Pick Up Date is selected, we make it the calendar initial date:
1 public ActionResult Index(FormState state) ?
2 {
3 …
4 if (_ParseDate(state.DateFrom, state.TimeFrom) != default(DateTime))
5 {
6 scheduler.InitialDate = _ParseDate(state.DateFrom, state.TimeFrom);
7 }
8 …
9 }
Let’s add one more filter to the method _SelectCars:
1 protected IQueryable<Car> _SelectCars(RentalDataContext context) ?
2 {
3 …
4 var _from = default(DateTime);
5 var _to = default(DateTime);
6 //try to parse time range
7 if (!string.IsNullOrEmpty(state.DateFrom))
8 {
9 _from = _ParseDate(state.DateFrom, state.TimeFrom);
10 _to = _ParseDate(state.DateTo, state.TimeTo);
11 if (_from.CompareTo(default(DateTime)) != 0 && _to.CompareTo(
12 {
13 _to = _from.AddHours(1);
14 }
15 }
http://blog.schedulernet.com/post/creatingcarrentalapplicationinaspnetmvc3razor.aspx 9/14
2/16/2017 DHTMLX Scheduler .NET | Tutorial: Car Rental Application in ASP.NET MVC3 Razor
15 }
16
17 if (state.DateFilter && _from != default(DateTime) && _to != default(DateTime))
18 {
Render the values of new controllers to ViewData:
1 protected void _UpdateViewData(DHXScheduler scheduler, RentalDataContext context, FormState state)
?
2 {
3 ViewData["Price"] = _CreatePriceSelect(scheduler , state.Price);
4 ViewData["Type"] = _CreateTypeSelect(context.Types, state.Type) ;
5 ViewData["DateFrom"] = state.DateFrom;
6 ViewData["DateTo"] = state.DateTo;
7 ViewData["TimeFrom"] = _CreateTimeSelect(scheduler, state.TimeFrom);
8 ViewData["TimeTo"] = _CreateTimeSelect(scheduler, state.TimeTo);
9 ViewData["DateFilter"] = state.DateFilter;
10 }
Here is the full code:
251 changedEvent = data.Orders.SingleOrDefault(ev => ev.id == action.SourceId);
252 data.Orders.DeleteOnSubmit(changedEvent);
253 break;
254 default:// "update"
255 var eventToUpdate = data.Orders.SingleOrDefault(ev => ev.id == action.SourceId);
256 DHXEventsHelper.Update(eventToUpdate, changedEvent,
257 break;
258 }
259 data.SubmitChanges();
260 action.TargetId = changedEvent.id;
261 }
262 catch
263 {
264 action.Type = DataActionTypes.Error;
265 }
266
267 return (new AjaxSaveResponse(action));
268 }
269 }
The calendar with a date filter is ready.
1 scheduler.templates.event_bar_text = function (start, end, event) { ?
2 var text = "Rented";
3 return text + " for " + get_formatted_duration(start, end);
That’s it! Car rental application for ASP.NET MVC3 Razor is ready to use.
Sign up now and get a ready car rental service.
Yes, I want to receive free trials,
discounts and new tutorials
Your name...
Your email...
Privacy Policy and Terms of Use
If you find this tutorial helpful, you are welcome to comment below and share it with your friends.
Related Posts
Scheduler .NET with NHibernate ASP.NET MVC3 Room Booking Calendar
Tutorial (Terrace Skin)
Jul 20, 2015 May 06, 2015
A 7step tutorial that explains how to create a Check out this new tutorial that explains how to
NHibernatebased app with Scheduler .NET. implement a room booking calendar in ASP.NET
Read more and get a ready sample with MVC3 Razor with user authentication using
NHibernate. ASP.NET Membership. A demo sample is
availab…
Read more Read more
All posts, mvc3 razor tutorial, asp.net mvc3 sample, tutorials Read other blog posts
http://blog.schedulernet.com/post/creatingcarrentalapplicationinaspnetmvc3razor.aspx 11/14
2/16/2017 DHTMLX Scheduler .NET | Tutorial: Car Rental Application in ASP.NET MVC3 Razor
Comments (22) -
Vikram Purohit, June 19, 2012 10:00
Thanks a lot Lana !
Reply
elena, October 14, 2012 07:11
I have checked your application doesn't work.
At all at least in my browser (IE). Will try in another one.
Hope you will not delete my comments. Just in case I will make a screen print.
Reply
Alexander, October 15, 2012 12:34
Hi,
what version of IE do you use and what exactly doesn't work for you?
Application should work correctly in IE7+
Reply
elena, October 14, 2012 07:16
A trivial sujestion for your app:
if a pick up date is 10/03/2014
the drop off date start date can not be October 2012.
Whatever the app is a joke.
I will report a "spam".
Reply
Alexander, October 15, 2012 15:16
>>if a pick up date is 10/03/2014
>>the drop off date start date can not be October 2012.
Thanks for pointing out this bug. We have fixed it
Reply
Rasul, October 24, 2012 10:46
how to edit cars?
Reply
Lana, October 29, 2012 10:13
Hi! This demo has no admin page with a car form. Information about cars is static. To edit cars
you have to create your own view.
Reply
k, October 25, 2012 03:28
I tried to open solution but it said "CarRent requires SQL server express, which is not installed on
this computer..... Visual Studio 2012 is SQL server local DB express"
I have installed Visual Studio 2012 and SQL server management 2012. But I dont undestand why
cant open this file.
Reply
Alexander, November 14, 2012 14:44
You can modify db connection string to use LocalDB, which is included in visual studio, instead
of MSSql server. It should be changed as following
connectionString="Data Source=
(LocalDB)\v11.0;AttachDbFilename=|DataDirectory|\Scheduler.mdf;Integrated Security=True"
i.e. you should change datasource to "(LocalDB)\v11.0" and remove "User Instance" setting
Reply
Ian Robinson, November 26, 2012 21:08
http://blog.schedulernet.com/post/creatingcarrentalapplicationinaspnetmvc3razor.aspx 12/14
2/16/2017 DHTMLX Scheduler .NET | Tutorial: Car Rental Application in ASP.NET MVC3 Razor
Hello I followed your tutorial but must have messed up somewhere along the way because I am
getting an Error of
"A circular reference was detected while serializing an object of type 'CarRent.Models.Order'."
in HomeController.cs
at function Data()
Reply
RD, November 30, 2012 05:46
I am trying out the car rental application and everything seems to be testing out great! One
question though; how can I implement a month view/tab into the demo? I need to be able to view
all cars at a glance for the month. Thanks in advance
Reply
taw, March 1, 2013 22:24
In which visual studio does this program run?
Reply
Alexander, March 4, 2013 00:28
The demo was developed in Visual Studio 2010
Reply
Leaa Jeb, April 4, 2013 06:17
I downloaded the your demo package and there is no SQL file (to fill in cars & types tables). Could
you update us on that?
Reply
Leaa Jeb, April 4, 2013 07:05
One issue I found, when browsing the application with Firefox: The search menu is listing all
controls (input, date pickers,...). It's just a bad UI, but it works fine. Hopefully someone will look into
it. Thank you for this nice tutorial.
Reply
Alexander, April 5, 2013 04:00
Hi,
thanks for your feedback, we'll check the issues.
Reply
Tony, April 26, 2013 13:43
is there sample source without MVC?
Reply
Lana, April 29, 2013 14:01
Unfortunately, not.
Reply
malik, May 4, 2013 02:07
I'm trying to use it with entity framework(db first), can u please tel me the changes i need to make
in it.
Reply
Alexander, May 6, 2013 01:56
Hello,
most of the changes will relate Data and Save actions. please check the following post:
blog.schedulernet.com/.../...uideandSample.aspx
As for selecting and filtering cars, it must be pretty similar to the current implementation
Reply
Mugdha, May 9, 2013 22:55
http://blog.schedulernet.com/post/creatingcarrentalapplicationinaspnetmvc3razor.aspx 13/14
2/16/2017 DHTMLX Scheduler .NET | Tutorial: Car Rental Application in ASP.NET MVC3 Razor
Hi,
I am trying to develop a meeting room booking app in similar lines to the car rental demo.But I am
not able to make an changes like add a new week view tab,add a cutom button etc.
P.S :I have made a new solution and not referring to the demo package and I am using the trial
version.
Can you please help me?
Reply
Alexander, May 16, 2013 01:00
Try using TimelineView
http://schedulernet.com/docs/timelineview.html
Reply
Add comment
Before posting a comment on "Tutorial: Car Rental Application in ASP.NET MVC3 Razor" read our Blog Comment Policy
Name
Email
Comment
Notify me when new comments are added
Solve the capcha 1 + 9 =
SUBMIT COMMENT
http://blog.schedulernet.com/post/creatingcarrentalapplicationinaspnetmvc3razor.aspx 14/14