@page "/"
@using Microsoft.JSInterop
@inject IComponentContext ComponentContext
@inject IJSRuntime jsRuntime
<p>Navigate to the counter component.</p>
@code{
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (!ComponentContext.IsConnected) return;
UriHelper.NavigateTo("/counter");
}
} 
@page "/hotel/rooms"
@if (Rooms is not null && Rooms.Any())
{
}
else
{
<div style="position:fixed;top:50%;left:50%;margin-top:-50px;margin-left:-100px;">
<img src="images/loader.gif" />
</div>
}
@code {
IEnumerable<HotelRoomDTO> Rooms = new List<HotelRoomDTO>();
// ...
} <body>
<div id="app">
<div
style="
position: fixed;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -100px;
"
>
<img src="images/ajax-loader.gif" />
</div>
</div> namespace BlazorServer.Models
{
public class HotelRoomDTO
{
// ...
public int TotalDays { get; set; }
public decimal TotalAmount { get; set; }
}
} @code
{
HomeVM HomeModel = new HomeVM();
// ...
private async Task LoadRoomsAsync()
{
Rooms = await HotelRoomService.GetHotelRoomsAsync(HomeModel.StartDate, HomeModel.EndDate);
foreach (var room in Rooms)
{
room.TotalAmount = room.RegularRate * HomeModel.NoOfNights;
room.TotalDays = HomeModel.NoOfNights;
}
}
} 
@if (Rooms is not null && Rooms.Any())
{
<EditForm Model="HomeModel" OnValidSubmit="SaveBookingInfo" class="bg-light">
<div class="pt-3 pb-2 px-5 mx-1 mx-md-0 bg-secondary">
<DataAnnotationsValidator />
<div class="row px-3 mx-3">
<div class="col-6 col-md-4">
<div class="form-group">
<label class="text-warning">Check in Date</label>
<InputDate @bind-Value="HomeModel.StartDate" class="form-control" />
</div>
</div>
<div class="col-6 col-md-4">
<div class="form-group">
<label class="text-warning">Check Out Date</label>
<input @bind="HomeModel.EndDate" disabled="disabled"
readonly="readonly" type="date" class="form-control" />
</div>
</div>
<div class=" col-4 col-md-2">
<div class="form-group">
<label class="text-warning">No. of nights</label>
<select class="form-control" @bind="HomeModel.NoOfNights">
<option value="Select" selected disabled="disabled">(Select No. Of Nights)</option>
@for (var i = 1; i <= 10; i++)
{
<option value="@i">@i</option>
}
</select>
</div>
</div>
<div class="col-8 col-md-2">
<div class="form-group" style="margin-top: 1.9rem !important;">
@if (IsProcessing)
{
<button class="btn btn-success btn-block form-control">
<i class="fa fa-spin fa-spinner"></i>Processing...
</button>
}
else
{
<input type="submit" value="Update" class="btn btn-success btn-block form-control" />
}
</div>
</div>
</div>
</div>
</EditForm> @code {
bool IsProcessing;
// ...
private async Task SaveBookingInfo()
{
IsProcessing = true;
HomeModel.EndDate = HomeModel.StartDate.AddDays(HomeModel.NoOfNights);
await LocalStorage.SetItemAsync(ConstantKeys.LocalInitialBooking, HomeModel);
await LoadRoomsAsync();
IsProcessing = false;
}
} 
@foreach (var room in Rooms)
{
<div class="row p-2 my-3 " style="border-radius:20px; border: 1px solid gray">
<div class="col-12 col-lg-3 col-md-4">
<div id="carouselExampleIndicators_@room.Id"
class="carousel slide mb-4 m-md-3 m-0 pt-3 pt-md-0"
data-ride="carousel">
<ol class="carousel-indicators">
@{
int imageIndex = 0;
int innerImageIndex = 0;
}
@foreach (var image in room.HotelRoomImages)
{
if (imageIndex == 0)
{
<li data-target="#carouselExampleIndicators_@room.Id"
data-slide-to="@imageIndex" class="active"></li>
}
else
{
<li data-target="#carouselExampleIndicators_@room.Id"
data-slide-to="@imageIndex"></li>
}
imageIndex++;
}
</ol>
<div class="carousel-inner">
@foreach (var image in room.HotelRoomImages)
{
var imageUrl = $"{ImagesBaseAddress}/{image.RoomImageUrl}";
if (innerImageIndex == 0)
{
<div class="carousel-item active">
<img class="d-block w-100" style="border-radius:20px;"
src="@imageUrl" alt="First slide">
</div>
}
else
{
<div class="carousel-item">
<img class="d-block w-100" style="border-radius:20px;"
src="@imageUrl" alt="First slide">
</div>
}
innerImageIndex++;
}
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators_@room.Id"
role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators_@room.Id"
role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
} var imageUrl = $"{ImagesBaseAddress}/{image.RoomImageUrl}"; @code {
string ImagesBaseAddress = "https://localhost:5006"; @foreach (var room in Rooms)
{
<div class="col-12 col-lg-9 col-md-8">
<div class="row pt-3">
<div class="col-12 col-lg-8">
<p class="card-title text-warning" style="font-size:xx-large">@room.Name</p>
<p class="card-text">
@((MarkupString)room.Details)
</p>
</div>
<div class="col-12 col-lg-4">
<div class="row pb-3 pt-2">
<div class="col-12 col-lg-11 offset-lg-1">
<a href="@($"hotel/room-details/{room.Id}")" class="btn btn-success btn-block">Book</a>
</div>
</div>
<div class="row ">
<div class="col-12 pb-5">
<span class="float-right">
<span class="float-right">Occupancy : @room.Occupancy adults </span><br />
<span class="float-right pt-1">Room Size : @room.SqFt sqft</span><br />
<h4 class="text-warning font-weight-bold pt-4">
<span style="border-bottom:1px solid #ff6a00">
@room.TotalAmount.ToString("#,#.00;(#,#.00#)")
</span>
</h4>
<span class="float-right">Cost for @room.TotalDays nights</span>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
} <Project Sdk="Microsoft.NET.Sdk.Web">
<ItemGroup>
<PackageReference Include="Parbad.AspNetCore" Version="1.1.0" />
<PackageReference Include="Parbad.Storage.EntityFrameworkCore" Version="1.2.0" />
</ItemGroup>
</Project> <Project Sdk="Microsoft.NET.Sdk.Web">
<ItemGroup>
<PackageReference Include="Parbad.Storage.EntityFrameworkCore" Version="1.2.0" />
</ItemGroup>
</Project> namespace BlazorWasm.WebApi
{
public class Startup
{
// ...
public void ConfigureServices(IServiceCollection services)
{
// ...
var connectionString = Configuration.GetConnectionString("DefaultConnection");
services.AddParbad()
.ConfigureHttpContext(httpContextBuilder => httpContextBuilder.UseDefaultAspNetCore())
.ConfigureGateways(gatewayBuilder =>
{
gatewayBuilder
.AddParbadVirtual()
.WithOptions(gatewayOptions => gatewayOptions.GatewayPath = "/MyVirtualGateway");
})
.ConfigureStorage(storageBuilder =>
{
storageBuilder.UseEfCore(efCoreOptions =>
{
var assemblyName = typeof(ApplicationDbContext).Assembly.GetName().Name;
efCoreOptions.ConfigureDbContext = db =>
db.UseSqlServer(
connectionString,
sqlServerOptionsAction: sqlOptions => sqlOptions.MigrationsAssembly(assemblyName)
);
});
})
.ConfigureAutoTrackingNumber(opt => opt.MinimumValue = 1)
.ConfigureOptions(parbadOptions =>
{
// parbadOptions.Messages.PaymentSucceed = "YOUR MESSAGE";
});
// ...
}
// This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
// ...
app.UseEndpoints(endpoints =>
{
endpoints.MapControllers();
});
if (env.IsDevelopment())
{
app.UseParbadVirtualGatewayWhenDeveloping();
}
else
{
app.UseParbadVirtualGateway();
}
}
}
} using System;
using System.ComponentModel.DataAnnotations;
using System.ComponentModel.DataAnnotations.Schema;
namespace BlazorServer.Entities
{
public class RoomOrderDetail
{
// ...
[Required]
public long ParbadTrackingNumber { get; set; }
public bool IsPaymentSuccessful { get; set; }
public string Status { get; set; }
}
} dotnet tool update --global dotnet-ef --version 5.0.4 dotnet build dotnet ef migrations --startup-project ../../BlazorWasm/BlazorWasm.WebApi/ add AddParbadFields --context ApplicationDbContext dotnet ef migrations --startup-project ../../BlazorWasm/BlazorWasm.WebApi/ add AddParbad --context Parbad.Storage.EntityFrameworkCore.Context.ParbadDataContext dotnet ef --startup-project ../../BlazorWasm/BlazorWasm.WebApi/ database update --context ApplicationDbContext dotnet ef --startup-project ../../BlazorWasm/BlazorWasm.WebApi/ database update --context Parbad.Storage.EntityFrameworkCore.Context.ParbadDataContext
https://localhost:5001/api/ParbadPayment/PayRoomOrder?orderId=1&amount=1000
https://localhost:5002/payment-result/OrderId/TrackingNumber/Message
https://localhost:5001/api/ParbadPayment/PayRoomOrder?orderId=1&amount=1000
namespace BlazorWasm.WebApi.Controllers
{
[Route("api/[controller]/[action]")]
[ApiController]
public class ParbadPaymentController : Controller
{
private readonly IConfiguration _configuration;
private readonly IOnlinePayment _onlinePayment;
private readonly IRoomOrderDetailsService _roomOrderService;
public ParbadPaymentController(
IConfiguration configuration,
IOnlinePayment onlinePayment,
IRoomOrderDetailsService roomOrderService)
{
_configuration = configuration;
_onlinePayment = onlinePayment ?? throw new ArgumentNullException(nameof(onlinePayment));
_roomOrderService = roomOrderService ?? throw new ArgumentNullException(nameof(roomOrderService));
}
[HttpGet]
public async Task<IActionResult> PayRoomOrder(int orderId, long amount)
{
var verifyUrl = Url.Action(
action: nameof(ParbadPaymentController.VerifyRoomOrderPayment),
controller: nameof(ParbadPaymentController).Replace("Controller", string.Empty),
values: null, protocol: Request.Scheme);
var result = await _onlinePayment.RequestAsync(invoiceBuilder =>
invoiceBuilder.UseAutoIncrementTrackingNumber()
.SetAmount(amount)
.SetCallbackUrl(verifyUrl)
.UseParbadVirtual()
);
if (result.IsSucceed)
{
await _roomOrderService.UpdateRoomOrderTrackingNumberAsync(orderId, result.TrackingNumber);
// It will redirect the client to the gateway.
return result.GatewayTransporter.TransportToGateway();
}
else
{
return Redirect(getClientReturnUrl(orderId, result.TrackingNumber, result.Message));
}
}
[HttpGet, HttpPost]
public async Task<IActionResult> VerifyRoomOrderPayment()
{
var invoice = await _onlinePayment.FetchAsync();
var orderDetail = await _roomOrderService.GetOrderDetailByTrackingNumberAsync(invoice.TrackingNumber);
if (invoice.Status == PaymentFetchResultStatus.AlreadyProcessed)
{
return Redirect(getClientReturnUrl(orderDetail.Id, invoice.TrackingNumber, "The payment is already processed."));
}
var verifyResult = await _onlinePayment.VerifyAsync(invoice);
if (verifyResult.Status == PaymentVerifyResultStatus.Succeed)
{
var result = await _roomOrderService.MarkPaymentSuccessfulAsync(verifyResult.TrackingNumber, verifyResult.Amount);
if (result == null)
{
return Redirect(getClientReturnUrl(orderDetail.Id, verifyResult.TrackingNumber, "Can not mark payment as successful"));
}
return Redirect(getClientReturnUrl(orderDetail.Id, verifyResult.TrackingNumber, verifyResult.Message));
}
return Redirect(getClientReturnUrl(orderDetail.Id, verifyResult.TrackingNumber, verifyResult.Message));
}
private string getClientReturnUrl(int orderId, long trackingNumber, string errorMessage)
{
var clientBaseUrl = _configuration.GetValue<string>("Client_URL");
return new Uri(new Uri(clientBaseUrl),
$"/payment-result/{orderId}/{trackingNumber}/{WebUtility.UrlEncode(errorMessage)}").ToString();
}
}
} [HttpGet] public async Task<IActionResult> PayRoomOrder(int orderId, long amount)
namespace BlazorServer.Services
{
public class RoomOrderDetailsService : IRoomOrderDetailsService
{
// ...
public async Task UpdateRoomOrderTrackingNumberAsync(int roomOrderId, long trackingNumber)
{
var order = await _dbContext.RoomOrderDetails.FindAsync(roomOrderId);
if (order == null)
{
return;
}
order.ParbadTrackingNumber = trackingNumber;
_dbContext.RoomOrderDetails.Update(order);
await _dbContext.SaveChangesAsync();
}
}
} [HttpGet, HttpPost] public async Task<IActionResult> VerifyRoomOrderPayment()
namespace BlazorServer.Services
{
public class RoomOrderDetailsService : IRoomOrderDetailsService
{
// ...
public async Task<RoomOrderDetailsDTO> GetOrderDetailByTrackingNumberAsync(long trackingNumber)
{
var roomOrderDetailsDTO = await _dbContext.RoomOrderDetails
.Include(u => u.HotelRoom)
.ThenInclude(x => x.HotelRoomImages)
.ProjectTo<RoomOrderDetailsDTO>(_mapperConfiguration)
.FirstOrDefaultAsync(u => u.ParbadTrackingNumber == trackingNumber);
roomOrderDetailsDTO.HotelRoomDTO.TotalDays =
roomOrderDetailsDTO.CheckOutDate.Subtract(roomOrderDetailsDTO.CheckInDate).Days;
return roomOrderDetailsDTO;
}
}
} namespace BlazorServer.Services
{
public class RoomOrderDetailsService : IRoomOrderDetailsService
{
// ...
public async Task<RoomOrderDetailsDTO> MarkPaymentSuccessfulAsync(long trackingNumber, long amount)
{
var order = await _dbContext.RoomOrderDetails.FirstOrDefaultAsync(x => x.ParbadTrackingNumber == trackingNumber);
if (order?.IsPaymentSuccessful != false || order.TotalCost != amount)
{
return null;
}
order.IsPaymentSuccessful = true;
order.Status = BookingStatus.Booked;
var markPaymentSuccessful = _dbContext.RoomOrderDetails.Update(order);
await _dbContext.SaveChangesAsync();
return _mapper.Map<RoomOrderDetailsDTO>(markPaymentSuccessful.Entity);
}
}
} private string getClientReturnUrl(int orderId, long trackingNumber, string errorMessage)
{
var clientBaseUrl = _configuration.GetValue<string>("Client_URL");
return new Uri(new Uri(clientBaseUrl),
$"/payment-result/{orderId}/{trackingNumber}/{WebUtility.UrlEncode(errorMessage)}").ToString();
} {
"Client_URL": "https://localhost:5002/"
} @page "/hotel-room-details/{Id:int}"
@inject IJSRuntime JsRuntime
@inject ILocalStorageService LocalStorage
@inject IClientHotelRoomService HotelRoomService
@inject IClientRoomOrderDetailsService RoomOrderDetailsService
@inject NavigationManager NavigationManager
@inject HttpClient HttpClient
// ...
@code {
// ...
private async Task HandleCheckout()
{
if (!await HandleValidation())
{
return;
}
try
{
HotelBooking.OrderDetails.ParbadTrackingNumber = -1;
HotelBooking.OrderDetails.RoomId = HotelBooking.OrderDetails.HotelRoomDTO.Id;
HotelBooking.OrderDetails.TotalCost = HotelBooking.OrderDetails.HotelRoomDTO.TotalAmount;
var roomOrderDetailsSaved = await RoomOrderDetailsService.SaveRoomOrderDetailsAsync(HotelBooking.OrderDetails);
await LocalStorage.SetItemAsync(ConstantKeys.LocalRoomOrderDetails, roomOrderDetailsSaved);
var paymentUri = new UriBuilderExt(new Uri(HttpClient.BaseAddress, $"/api/ParbadPayment/PayRoomOrder"))
.AddParameter("orderId", roomOrderDetailsSaved.Id.ToString())
.AddParameter("amount", roomOrderDetailsSaved.TotalCost.ToString())
.Uri;
NavigationManager.NavigateTo(paymentUri.ToString(), forceLoad: true);
}
catch (Exception e)
{
await JsRuntime.ToastrError(e.Message);
}
}
// ...
} namespace BlazorWasm.WebApi.Controllers
{
[ApiController]
[Route("api/[controller]/[action]")]
public class RoomOrderController : Controller
{
private readonly IRoomOrderDetailsService _roomOrderService;
public RoomOrderController(IRoomOrderDetailsService roomOrderService)
{
_roomOrderService = roomOrderService ?? throw new ArgumentNullException(nameof(roomOrderService));
}
[HttpPost]
public async Task<IActionResult> Create([FromBody] RoomOrderDetailsDTO details)
{
var result = await _roomOrderService.CreateAsync(details);
return Ok(result);
}
[HttpGet]
public async Task<IActionResult> GetOrderDetail(int trackingNumber)
{
var result = await _roomOrderService.GetOrderDetailByTrackingNumberAsync(trackingNumber);
return Ok(result);
}
}
} namespace BlazorServer.Services
{
public class RoomOrderDetailsService : IRoomOrderDetailsService
{
// ...
public async Task<RoomOrderDetailsDTO> CreateAsync(RoomOrderDetailsDTO details)
{
var roomOrder = _mapper.Map<RoomOrderDetail>(details);
roomOrder.Status = BookingStatus.Pending;
var result = await _dbContext.RoomOrderDetails.AddAsync(roomOrder);
await _dbContext.SaveChangesAsync();
return _mapper.Map<RoomOrderDetailsDTO>(result.Entity);
}
public async Task<RoomOrderDetailsDTO> GetOrderDetailByTrackingNumberAsync(long trackingNumber)
{
var roomOrderDetailsDTO = await _dbContext.RoomOrderDetails
.Include(u => u.HotelRoom)
.ThenInclude(x => x.HotelRoomImages)
.ProjectTo<RoomOrderDetailsDTO>(_mapperConfiguration)
.FirstOrDefaultAsync(u => u.ParbadTrackingNumber == trackingNumber);
roomOrderDetailsDTO.HotelRoomDTO.TotalDays =
roomOrderDetailsDTO.CheckOutDate.Subtract(roomOrderDetailsDTO.CheckInDate).Days;
return roomOrderDetailsDTO;
}
// ...
}
} namespace BlazorWasm.Client.Services
{
public interface IClientRoomOrderDetailsService
{
Task<RoomOrderDetailsDTO> SaveRoomOrderDetailsAsync(RoomOrderDetailsDTO details);
Task<RoomOrderDetailsDTO> GetOrderDetailAsync(long trackingNumber);
}
}
namespace BlazorWasm.Client.Services
{
public class ClientRoomOrderDetailsService : IClientRoomOrderDetailsService
{
private readonly HttpClient _httpClient;
public ClientRoomOrderDetailsService(HttpClient httpClient)
{
_httpClient = httpClient ?? throw new ArgumentNullException(nameof(httpClient));
}
public Task<RoomOrderDetailsDTO> GetOrderDetailAsync(long trackingNumber)
{
// How to url-encode query-string parameters properly
var uri = new UriBuilderExt(new Uri(_httpClient.BaseAddress, $"/api/roomorder/GetOrderDetail"))
.AddParameter("trackingNumber", trackingNumber.ToString())
.Uri;
return _httpClient.GetFromJsonAsync<RoomOrderDetailsDTO>(uri);
}
public async Task<RoomOrderDetailsDTO> SaveRoomOrderDetailsAsync(RoomOrderDetailsDTO details)
{
details.UserId = "unknown user!";
var response = await _httpClient.PostAsJsonAsync("api/roomorder/create", details);
var responseContent = await response.Content.ReadAsStringAsync();
if (response.IsSuccessStatusCode)
{
return JsonSerializer.Deserialize<RoomOrderDetailsDTO>(responseContent);
}
else
{
//var errorModel = JsonSerializer.Deserialize<ErrorModel>(responseContent);
throw new InvalidOperationException(responseContent);
}
}
}
} namespace BlazorWasm.Client
{
public class Program
{
public static async Task Main(string[] args)
{
// ...
builder.Services.AddScoped<IClientRoomOrderDetailsService, ClientRoomOrderDetailsService>(); var paymentUri = new UriBuilderExt(new Uri(HttpClient.BaseAddress, $"/api/ParbadPayment/PayRoomOrder"))
.AddParameter("orderId", roomOrderDetailsSaved.Id.ToString())
.AddParameter("amount", roomOrderDetailsSaved.TotalCost.ToString())
.Uri;
NavigationManager.NavigateTo(paymentUri.ToString(), forceLoad: true); @page "/payment-result/{OrderId:int}/{TrackingNumber:long}/{Message}"
@inject ILocalStorageService LocalStorage
@inject IClientRoomOrderDetailsService RoomOrderDetailService
@inject IJSRuntime JsRuntime
@inject NavigationManager NavigationManager
@if (IsLoading)
{
<div style="position:fixed;top:50%;left:50%;margin-top:-50px;margin-left:-100px;">
<img src="images/ajax-loader.gif" />
</div>
}
else
{
<div class="container">
<div class="row mt-4 pt-4">
<div class="col-10 offset-1 text-center">
@if(IsPaymentSuccessful)
{
<h2 class="text-success">Booking Confirmed!</h2>
<p>Your room has been booked successfully with order id @OrderId & tracking number @TrackingNumber .</p>
}
else
{
<h2 class="text-warning">Booking Failed!</h2>
<p>@Message</p>
}
<a class="btn btn-primary" href="hotel-rooms">Back to rooms</a>
</div>
</div>
</div>
}
@code
{
private bool IsLoading;
private bool IsPaymentSuccessful;
[Parameter] public int OrderId { set; get; }
[Parameter] public long TrackingNumber { set; get; }
[Parameter] public string Message { set; get; }
protected override async Task OnInitializedAsync()
{
IsLoading = true;
try
{
var finalOrderDetail = await RoomOrderDetailService.GetOrderDetailAsync(TrackingNumber);
var localOrderDetail = await LocalStorage.GetItemAsync<RoomOrderDetailsDTO>(ConstantKeys.LocalRoomOrderDetails);
if(finalOrderDetail is not null &&
finalOrderDetail.IsPaymentSuccessful &&
finalOrderDetail.Status == BookingStatus.Booked &&
localOrderDetail is not null &&
localOrderDetail.TotalCost == finalOrderDetail.TotalCost)
{
IsPaymentSuccessful = true;
await LocalStorage.RemoveItemAsync(ConstantKeys.LocalRoomOrderDetails);
await LocalStorage.RemoveItemAsync(ConstantKeys.LocalInitialBooking);
}
else
{
IsPaymentSuccessful = false;
}
}
catch(Exception ex)
{
await JsRuntime.ToastrError(ex.Message);
}
finally
{
IsLoading = false;
}
}
} @page "/payment-result/{OrderId:int}/{TrackingNumber:long}/{Message}" 
public class HotelRoomDTO
{
public bool IsBooked { get; set; }
// ...
} namespace BlazorServer.Services
{
public class HotelRoomService : IHotelRoomService
{
// ...
public async Task<List<HotelRoomDTO>> GetAllHotelRoomsAsync(DateTime? checkInDateStr, DateTime? checkOutDatestr)
{
var hotelRooms = await _dbContext.HotelRooms
.Include(x => x.HotelRoomImages)
.Include(x => x.RoomOrderDetails)
.ProjectTo<HotelRoomDTO>(_mapperConfiguration)
.ToListAsync();
foreach (var hotelRoom in hotelRooms)
{
hotelRoom.IsBooked = isRoomBooked(hotelRoom, checkInDateStr, checkOutDatestr);
}
return hotelRooms;
}
public async Task<HotelRoomDTO> GetHotelRoomAsync(int roomId, DateTime? checkInDate, DateTime? checkOutDate)
{
var hotelRoom = await _dbContext.HotelRooms
.Include(x => x.HotelRoomImages)
.Include(x => x.RoomOrderDetails)
.ProjectTo<HotelRoomDTO>(_mapperConfiguration)
.FirstOrDefaultAsync(x => x.Id == roomId);
hotelRoom.IsBooked = isRoomBooked(hotelRoom, checkInDate, checkOutDate);
return hotelRoom;
}
private bool isRoomBooked(HotelRoomDTO hotelRoom, DateTime? checkInDate, DateTime? checkOutDate)
{
if (checkInDate == null || checkOutDate == null)
{
return false;
}
return hotelRoom.RoomOrderDetails.Any(x => x.IsPaymentSuccessful &&
//check if checkin date that user wants does not fall in between any dates for room that is booked
((checkInDate < x.CheckOutDate && checkInDate.Value.Date >= x.CheckInDate)
//check if checkout date that user wants does not fall in between any dates for room that is booked
|| (checkOutDate.Value.Date > x.CheckInDate.Date && checkInDate.Value.Date <= x.CheckInDate.Date))
);
}
}
} @if (room.IsBooked)
{
<button disabled class="btn btn-secondary btn-block">Sold Out</button>
}
else
{
<a href="@($"hotel-room-details/{room.Id}")" class="btn btn-success btn-block">Book</a>
} @if (HotelBooking.OrderDetails.HotelRoomDTO.IsBooked)
{
<button disabled class="btn btn-secondary btn-block">Sold Out</button>
}
else
{
<button type="submit" class="btn btn-success form-control">Checkout Now</button>
} import Pagination from "./common/pagination";
<Pagination
itemsCount={this.state.movies.length}
pageSize={this.state.pageSize}
onPageChange={this.handlePageChange}
/> state = {
movies: getMovies(),
pageSize: 4
}; handlePageChange = page => {
console.log("handlePageChange", page);
}; import React, { Component } from "react";
class Pagination extends Component {
render() {
return (
<nav>
<ul className="pagination">
<li className="page-item">
<a className="page-link">1</a>
</li>
</ul>
</nav>
);
}
}
export default Pagination; 
class Pagination extends Component {
// ...
getPageNumbersArray() {
const { itemsCount, pageSize } = this.props;
const pagesCount = Math.ceil(itemsCount / pageSize);
if (pagesCount === 1) {
return null;
}
const pages = new Array();
for (let i = 1; i <= pagesCount; i++) {
pages.push(i);
}
return pages;
}
} class Pagination extends Component {
render() {
const pages = this.getPageNumbersArray();
if (!pages) {
return null;
}
return (
<nav>
<ul className="pagination">
{pages.map(page => (
<li key={page} className="page-item">
<a className="page-link">{page}</a>
</li>
))}
</ul>
</nav>
);
} 
<a
onClick={() => this.props.onPageChange(page)}
className="page-link"
style={{ cursor: "pointer" }}
>
{page}
</a> <Pagination
itemsCount={this.state.movies.length}
pageSize={this.state.pageSize}
onPageChange={this.handlePageChange}
currentPage={this.state.currentPage}
/> class Movies extends Component {
state = {
movies: getMovies(),
pageSize: 4,
currentPage: 1
}; handlePageChange = page => {
console.log("handlePageChange", page);
this.setState({currentPage: page});
}; <li
key={page}
className={
page === this.props.currentPage
? "page-item active"
: "page-item"
}
> 
paginate() {
const first = (this.state.currentPage - 1) * this.state.pageSize;
const last = first + this.state.pageSize;
return this.state.movies.slice(first, last);
} render() {
const { length: count } = this.state.movies;
if (count === 0) return <p>There are no movies in the database.</p>;
const movies = this.paginate(); 
> npm i -g typescript eslint tslint eslint-plugin-react-hooks jshint babel-eslint eslint-plugin-react eslint-plugin-mocha
> npm i prop-types --save
C:/Users/{username}/AppData/Local/Microsoft/TypeScript/3.6/node_modules/@types/prop-types/index import PropTypes from "prop-types";
Pagination.propTypes = {
itemsCount: PropTypes.number.isRequired,
pageSize: PropTypes.number.isRequired,
currentPage: PropTypes.number.isRequired,
onPageChange: PropTypes.func.isRequired
};
export default Pagination; 
npm install -g vue-cli
vue init webpack-simple dntVue
npm install
<template>
<div>
<!-- Write your HTML with Vue in here -->
</div>
</template>
<script>
export default {
// Write your Vue component logic here
}
</script>
<style scoped>
/* Write your styles for the component in here */
</style> import { New } from "./components/New.vue";
export default {
components: {
New
}
} npm install -g @vue/cli
3.0.0-beta.11
vue create my-project
Vue CLI v3.0.0-beta.11 ? Please pick a preset: (Use arrow keys) ❯ default (babel, eslint) Manually select features
{
"useConfigFiles": true,
"router": true,
"vuex": true,
"cssPreprocessor": "sass",
"plugins": {
"@vue/cli-plugin-babel": {},
"@vue/cli-plugin-eslint": {
"config": "airbnb",
"lintOn": ["save", "commit"]
}
}
} 
<!-- MyCard.vue -->
<template>
<div class="card">
<h1>Card Title</h1>
<p>Card content goes here. Make sure it's not Lorem.</p>
</div>
</template> npm install -g @vue/cli-service-global
vue serve MyCard.vue
خروجی:
