How to check if booking exists

Question

0.00/5 (No votes)

See more:

Hello

I have a problem that I hope you will be able to help resolve.

I have built an asset booking system to enable staff to book out equipment. When booking, staff have to choose the time using the provided calendar, and then assets using a checkbox. All is working, but I would like to PostBack once the user choose time, then check if there are any assets that are booked for the same time, then display 'Unavailable' label box instead of the checkbox.

I would greatly appreciate it if you have any suggestions on how to go about achieving this.

Posted 26-May-15 23:44pm

Awoldeselassie

Add a Solution

2 solutions

Solution 1

hmm. maybe you need a mix of Asynchronous Javascript And Xml? That's a mouthful. lets shorten it to AJAX :Þ

Here is a good article:
How to call a Web Service from client-side JavaScript using ASP.NET AJAX[^]

Basically, this call will send to a webservice and receive what is returned. This all happens via javascript so the page doesn't need to reload or anything.

The data you send and how to handle the returned values is the only challenge here as you need to do this all from javascript.

Have fun ^_^

Posted 27-May-15 0:20am

Andy Lanng

Comments

Awoldeselassie 27-May-15 8:04am

Thanks for your suggestion Andy, but I have created the application using web form and fully working. I just need to add that functionality using whatever, (C# if possible, rather than creating a new webservice.

Andy Lanng 27-May-15 8:14am

So you want the whole form to postback when they type? or on a button?

F-ES Sitecore 27-May-15 11:05am

Use a WebMethod instead then, google "calling a webmethod from jQuery" for example code.

Awoldeselassie 27-May-15 12:06pm

There is a calendar control for date, and time is just a normal dropdown menu populated at runtime. It would be ideal when the user choose a date, if I can compare it with the startDate column of the tblBooking, and if it matches, then compare the StartTime too. If that matches too, or is in between the StartTime and EndTime, then Checkbox.visible = false and lable.visible = true. If not insert booking data into the database.

I have few dropdown. Every time a dropdown changes, the page postBack and populate a gridView and other dropdown depending on the first dropdown option.

Sorry if this sounds complicated.

Andy Lanng 27-May-15 12:16pm

It's ok. We just need to understand what the question is.
If I have this correct: The page already posts back when dropdowns are changed. You want it to also postback if the calendar control dropdowns change.

I assume that the calender control does not expose any obvious methods to allow for the postback.

hmm

Please post the markup where you add the calendar control. There are many calendars out there so I need to know which one you are using.

Awoldeselassie 27-May-15 13:05pm

That is correct, the page postBack already for other dropdown. Then databound gridview and another dropdown menu populate base on the choice in the first dropdown menu. postBack is not the problem, it is comparing it to the database. In lame terms, I would like to check if an asset is booked for the time the user choose, and make it unavailable. This should be done as soon as the user choose the date and time. Then page postBack, compare it in the Booking table, and display either label or checkbox accordingly.

<asp:TextBox ID="StartDate" class="dropdownArrow1" runat="server"
Width="200px"
Height="20px" BorderColor="#cccccc" align="left" BackColor="#fffbec" BorderWidth="1px" BorderStyle="solid" OnTextChanged="StartDate_TextChanged">

<asp:Calendar ID="CalendarStartDate" runat="server" Visible="False">

</td>
<td class="style10">
<asp:DropDownList ID="StartTime" class="dropdownArrow1" runat="server"
Width="70px"
Height="20px" BorderColor="#cccccc" align="left" TextMode="MultiLine" BackColor="#fffbec" BorderWidth="1px" BorderStyle="solid">
<asp:ListItem>
<asp:ListItem>09:00
<asp:ListItem>09:15
<asp:ListItem>09:30 .....

The calender and time dropdown menu are there to enable the user to insert the date and time in text format, then that is inserted into a datetime field.

Hope this makes it a bit clearer.

Awoldeselassie 27-May-15 13:12pm

I have a StartDate textbox with the calendar, and a StartTime dropdown menu. Then EndDate textbox with the calendar, and Endtime dropdown menu

The calendar I used is a plugin called zebra_datepicker.

Andy Lanng 28-May-15 4:30am

Ok, cool. That means that you're using jQuery, which makes things easier

You can add a javascript function on Textbox change for your date field, and a function on the time dropdown selection change too. Check that both fields are populated and perform the postback from javascript.

I will write it up in Solution 2

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Andy Lanng · Accepted Answer · 2015-05-27T22:48:00

The issue is that you need both the data and the time to be populated before you do a postback, but you want to postback as soon as these details are complete. Here's one way this can be done:

JavaScript

$.(function(){
 //get the textbox control with a jquery selector
 var startTextBox = $("#tbxStartDate");

 //and the time drop down
 var startTimeDropDown = $("#ddlStartTime");

 //capture text change events
 $(startTextBox).on('input propertychange paste', function(event){
  //prevent auto-postback;
  event.preventDefault();
  validateStartDateTime(startTextBox,startTimeDropDown );
 });

 //capture drop down change events
 $(startTimeDropDown ).on('change', function(){
  validateStartDateTime(startTextBox,startTimeDropDown );
 });

});

function validateStartDateTime (dateTextBox, timeDropDown){
  
  //Make sure that both fields are valid after the change
  

  //perform the postback event.  
  // This will cause the page to reload and the textbox's TextChanged event to fire
  __doPostBack("tbxStartDate","TextChanged");
}

....

EDIT: As for the database search:

C#

public void test(){
DateTime startDateTime = DateTime.ParseExact(txtStartDate.Text,"dd-MM-yyy",CultureInfo.InvariantCulture)
    + TimeSpan.ParseExact(ddlStartTime.SelectedText, "HH:mm", CultureInfo.InvariantCulture);

DateTime endDateTime = DateTime.ParseExact(txtEndDate.Text,"dd-MM-yyy",CultureInfo.InvariantCulture)
    + TimeSpan.ParseExact(ddlEndTime.SelectedText, "HH:mm", CultureInfo.InvariantCulture);

//Check that the booking is valid:
if(endDateTime > startDateTime)
 throw new YouMadBroException();

string queryString = @"
Select *
From Bookings b
Where b.EndDateTime > @StartDateTime AND b.StartDateTime < @EndDateTime
";
//it may look odd but that's all you need to check for overlap!


}