Мобильная версияI created an event booking system in asp.net core as a web application using fullcalender. Everything works fine locally but in deployed instance all of a sudden the booked events won't render in the calender. This issue does not occur locally so I do not know how to investigate this.
And both deployed and local instance are connected to the same database, Adding events works in both instances also but the issue is that its not rendering in deployed instance.
I'm using Cors and redirect to https in my program.cs like this:
public class Program { public static async Task Main(string[] args) { var builder = WebApplication.CreateBuilder(args); var connString = builder.Configuration.GetConnectionString("DefaultConnection"); // Add services to the container. builder.Services.AddControllersWithViews(); var connectionString = builder.Configuration.GetConnectionString("DefaultConnection"); var serverVersion = ServerVersion.AutoDetect(connectionString); builder.Services.AddDbContext(options => { options.UseMySql(connectionString, serverVersion); }); builder.Services.AddDbContext(options => { options.UseMySql(connectionString, serverVersion); }); builder.Services.AddIdentity(options => { options.Password.RequireNonAlphanumeric = false; options.Password.RequireDigit = false; options.Password.RequireUppercase = false; }).AddEntityFrameworkStores().AddDefaultTokenProviders(); builder.Services.AddLogging(builder => { builder.AddConsole(options => options.LogToStandardErrorThreshold = LogLevel.Trace); }); builder.Services.ConfigureApplicationCookie(o => o.LoginPath = "/login"); builder.Services.AddScoped(); builder.Services.AddScoped(); builder.Services.AddCors(options => { options.AddPolicy("AllowAnyOrigin", builder => builder.AllowAnyOrigin() .AllowAnyMethod() .AllowAnyHeader()); }); var app = builder.Build(); // Configure the HTTP request pipeline. if (!app.Environment.IsDevelopment()) { app.UseExceptionHandler("/Home/Error"); // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts. app.UseHsts(); } app.UseCors("AllowAnyOrigin"); app.UseHttpsRedirection(); app.UseStaticFiles(); app.UseRouting(); app.UseAuthentication(); app.UseAuthorization(); app.MapControllerRoute( name: "default", pattern: "{controller=Home}/{action=Login}/{id?}"); app.Run(); } } My razor page where the fullcalender script tags resides:
@model CalenderVM /* Add a custom style for the calendar container */ #calendar-@Model.RoomId { max-width: 800px; /* Set the maximum width if needed */ margin: 0 auto; /* Center the calendar horizontally */ height: 500px; /* Set the desired height */ } /* Add some space between the calendar and the form */ form { margin-top: 20px; } @if (Model != null) { Kalender för rum @Model.RoomId } Event Information × @* Need to set variable from here to check user role and later pass to javascript *@ @{ bool isAdmin = User.IsInRole("Admin"); } console.log('Initializing FullCalendar for Room @Model.RoomId'); document.addEventListener('DOMContentLoaded', function () { var selectedDate = null; // Variable to store the selected date var selectedEventId = null; // Variable to store the selected event ID var isAdmin = @Html.Raw(Json.Serialize(isAdmin)); var calendarEl = document.getElementById('calendar-@Model.RoomId'); var calendar = new FullCalendar.Calendar(calendarEl, { events: function (fetchInfo, successCallback, failureCallback) { // Make an AJAX request to get booked events for the current time range $.ajax({ url: '/GetEvents/' + @Model.RoomId, method: 'GET', data: { start: fetchInfo.startStr, end: fetchInfo.endStr }, success: function (bookedEvents) { // Use bookedEvents to generate events array var events = bookedEvents.map(function (bookedEvent) { return { id: bookedEvent.id, name: bookedEvent.name, title: bookedEvent.title, // Use the event name as the title start: bookedEvent.start, end: bookedEvent.end, info: bookedEvent.info, status: bookedEvent.status // Include event status in the event object }; }); successCallback(events); }, error: function (error) { console.error('Error fetching booked events:', error); failureCallback(error); } }); }, headerToolbar: { left: 'prev,next today', center: 'title', right: 'dayGridMonth' }, editable: false, selectable: true, selectHelper: true, eventClick: function (info) { // Populate modal content with event information var modalBody = document.getElementById('eventModalBody'); var statusBadge = ''; switch (info.event.extendedProps.status) { case 'Pending': statusBadge = 'Väntar på bekräftelse'; break; case 'Confirmed': statusBadge = 'Bekfräftad'; break; // Add more cases for other statuses if needed default: // Default case, no badge for unknown status statusBadge = ''; break; } // Check if the user is an admin to display the delete button var deleteButton = isAdmin ? 'Delete Event' : ''; modalBody.innerHTML = ` Name: ${info.event.title}
Info: ${info.event.extendedProps.info}
Status: ${statusBadge}
${deleteButton} `; selectedEventId = info.event.id; // Show the modal $('#eventModal').modal('show'); $('#deleteEventBtn').click(function () { // Make an AJAX request to delete the event $.ajax({ url: '/DeleteEvent/' + selectedEventId, method: 'DELETE', success: function (response) { if (response.success) { alert('Event deleted successfully'); console.log('Event deleted successfully'); $('#eventModal').modal('hide'); // Refresh the calendar if needed calendar.refetchEvents(); } else { console.error(response.error); alert('Failed to delete event'); } }, error: function (xhr, status, error) { console.error('Failed to delete event:', error); console.log('Server response:', xhr.responseText); } }); }); }, select: function (info) { // Handle date selection selectedDate = info.startStr; // Update the hidden input value with the selected date $('#selectedDate').val(selectedDate); }, eventDisplay: 'block', // Show only the title without the time eventContent: function (arg) { // Customize event rendering var backgroundColor = arg.event.extendedProps.status === 'Pending' ? 'dodgerblue' : 'green'; return { html: `${arg.event.title}`, display: 'block' }; }, timeZone: 'Europe/Stockholm' // Set the time zone to Swedish time }); calendar.render(); // Handle form submission for booking $('#bookEventBtn').click(function () { if (!selectedDate) { alert('Var god och välj ett datum'); return; } // Make an AJAX request to book the event $.ajax({ url: '/BookEvent', method: 'POST', data: { selectedDate: selectedDate, timeSlot: $('#timeSlot').val(), topic: $('#topic').val(), eventInfo: $('#eventInfo').val(), roomId: @Model.RoomId, isAdmin: isAdmin }, success: function (response) { if (response.success) { $('#centerText').text('Bokingsförfrågan lyckades'); $('#centerText').css('color', 'green'); // Close the modal if needed $('#eventModal').modal('hide'); // Refresh the calendar if needed calendar.refetchEvents(); } else { console.error(response.error); $('#centerText').text(response.error); $('#centerText').css('color', 'red'); } }, error: function (xhr, status, error) { console.error('Failed to add event:', error); console.log('Server response:', xhr.responseText); $('#centerText').text('Bokningsförfrågan misslyckades'); $('#centerText').css('color', 'red'); } }); }); }); Välj tidslucka: Morgon 07 - 12 Eftermiddag 12 - 17 Kväll 17 - 22 Rubrik Information: Skicka förfrågan
I'm unable to log in to the website with https, it only works with http.
I tried to add this line of code tp program.cs:
builder.Services.AddHttpsRedirection(options => { options.HttpsPort = 443; }); and deploy the web app again but now I received an error in developer tools console instead:
Uncaught TypeError: Cannot read properties of null (reading 'classList') at onResize (VM5:44:38) at HTMLDocument.setupMobileNav (VM5:71:3)
I do not know where that comes from since I do not have a file like that.
Источник: https://stackoverflow.com/questions/780 ... p-net-core
