Disabling certain timeslot from another table for dynamically generated checkbox

Question

Hi All,

This is regarding my previous question in this link https://learn.microsoft.com/en-us/answers/questions/1180015/disabling-dynamically-generated-checkbox?page=1&orderby=helpful&comment=answer-1174655

I have a table to add non operating dates and timeslots.So if admin add a non operating days with preferred timeslot like below

So it will insert the time as 05:30 PM and 07:00 PM. I want to disable the time period between 05.30 PM and 07:00 PM in the checkbox, where the checkbox are in 24 hr format.

I tried to add another parameter in json result.

public async Task<JsonResult> OnGetGetAvailableSlotsAsync(string ActivityName, string BookedDate)
        {
            
            DateTime BookingDate = Convert.ToDateTime(BookedDate);
            ActivityName = ActivityName.ToString();
            
            List<HourlyBasedView> AvailableSlots = new List<HourlyBasedView>();
            List<string> BookedSlots = new List<string>();
           
            AvailableSlots = _context.HourlyBasedView.FromSqlRaw("Select HourlyBasedTime from HalfAnHour order by id").AsNoTracking().ToList();
            BookedSlots = _context.ManageBooking.Where(x => x.ActivityName == ActivityName && x.BookingDate== BookingDate).Select(x => x.PreferredTimeslot).ToList();
           // NonOperatingHoursStartTime = _context.BookingDates.Where(x => x.DateToBeBlock == BookingDate).Select(x => x.StartTime).ToList();
             //LstPreferredTimeSlot = _context.HourlyBasedView.FromSqlRaw("EXEC dbo.sp_AvailableBookingSlotsTest @ActivityName = {0}, @BookedDate = {1}", ActivityName, BookingDate).
            //        AsNoTracking().ToList();

            //if (LstPreferredTimeSlot.Count == 0)
            //{
            //LstPreferredTimeSlot = _context.HourlyBasedView.FromSqlRaw("Select HourlyBasedTime from HalfAnHour order by id").AsNoTracking().ToList();
            //}
            return new JsonResult(new { AvailableSlots, BookedSlots });
        }

$.ajax({
                type: "Get",
                url: rootPath + "/ManageActivityBooking/Create?handler=GetAvailableSlots",
                headers: { "RequestVerificationToken": $('input[name="__RequestVerificationToken"]').val() },
                data: { ActivityName: ActivityListValue, BookedDate: BookedDate },
                dataType: "json",
                success: function (result) {
                    console.log(result);
                    console.log(result.AvailableSlots);
                    console.log(result.BookedSlots);
                    $("#PreferredTimeSlot").html("");
                    $("#PreferredTimeSlot").append('<label class="control-label">Preferred Timeslot</label><br/>');
                    $("#PreferredTimeSlot").css("display", "block"); //clear the container.
                    $.each(result.availableSlots, function (key, value) {                        
                        let disabled = result.bookedSlots.includes(value.hourlyBasedTime) ? "disabled" : "";
                        $("#PreferredTimeSlot").append(`<label style="white-space:pre"><input type="checkbox" class="form-check-inline mr-2" value="${value.hourlyBasedTime}" name="ManageBooking.PreferredTimeslot" ${disabled} />${value.hourlyBasedTime} <span></span></label>`);
                    });
                    
                }

Anyhelp would be appreciated

Answer 1

Hi @Blooming Developer

According to your provider code and data, I create a sample using the following code, it seems that your code works well.

booking.cshtml.cs

    public class BookingModel : PageModel
    {
        public void OnGet()
        {
        }
        public async Task<JsonResult> OnGetGetAvailableSlotsAsync(string ActivityName, string BookedStartDate, string BookedEndDate)
        {

            //DateTime BookingDate = Convert.ToDateTime(BookedDate);
            //ActivityName = ActivityName.ToString();
             
            List<string> BookedSlots = new List<string>();
            List<HourlyBasedView> AvailableSlots = new List<HourlyBasedView>()
            {
                #region
                new HourlyBasedView() { hourlyBasedTime ="00.00 - 00.30" }, 
                ...  
                new HourlyBasedView() { hourlyBasedTime ="23.30 - 23.59" },
                #endregion
            };
 
            //based on the entered date to filter the BookedSlots.
            var filterdate = AvailableSlots.Where(c => (Convert.ToDouble(c.hourlyBasedTime.Split(" - ")[0]) >= Convert.ToDouble(BookedStartDate))
                        && (Convert.ToDouble(c.hourlyBasedTime.Split(" - ")[1]) <= Convert.ToDouble(BookedEndDate))).Select(c=>c.hourlyBasedTime).ToList();

            BookedSlots.AddRange(filterdate); 

            return new JsonResult(new { AvailableSlots, BookedSlots});
        }

    }

Booking.cshtml:

@page
@model Core7RazorSample.Pages.BookingModel

<div class="row">
    <div class="col-md-4">
    <form method="post">
            <div class="form-group">
                <label for="BookedStartTime" class="control-label">Blocked Start Time</label>
                <input id="BookedStartTime" name="BookedStartTime" class="form-control" value="" /> 
            </div>
            <div class="form-group">
                <label for="BookedEndTime" class="control-label">Blocked End Time</label>
                <input id="BookedEndTime" name="BookedEndTime" class="form-control" value="" />
            </div>
            <div class="form-group"> 
                <input type="button" id="btn" value="Show Prefered Time Slot" />
            </div>
            <div class="form-group"> 
                <div id="PreferredTimeSlot">
                </div>
            </div>
    </form>
    </div>
</div>
@section Scripts{ 
    <script>
        $(function(){
            $("#btn").click(function(){
                var bookstartdate = $("#BookedStartTime").val();
                var bookenddate = $("#BookedEndTime").val();
                $.ajax({
                    type: "Get",
                    url: "/booking?handler=GetAvailableSlots",
                    headers: { "RequestVerificationToken": $('input[name="__RequestVerificationToken"]').val() },
                    data: { ActivityName: "aa", BookedStartDate: bookstartdate, BookedEndDate : bookenddate },
                    dataType: "json",
                    success: function (result) {
                        console.log(result);
                        console.log(result.AvailableSlots);
                        console.log(result.BookedSlots);
                        $("#PreferredTimeSlot").html("");
                        $("#PreferredTimeSlot").append('<label class="control-label">Preferred Timeslot</label><br/>');
                        $("#PreferredTimeSlot").css("display", "block"); //clear the container.
                        $.each(result.availableSlots, function (key, value) {
                            let disabled = result.bookedSlots.includes(value.hourlyBasedTime) ? "disabled" : "";
                            $("#PreferredTimeSlot").append(`<label style="white-space:pre"><input type="checkbox" class="form-check-inline mr-2" value="${value.hourlyBasedTime}" name="ManageBooking.PreferredTimeslot" ${disabled} />${value.hourlyBasedTime} <span></span></label>`);
                        });
                    }
                });
            });
        })
    </script>
}

Then the result as below, as we can see that relate checkboxes are disabled.

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Best regards,

Dillion