Getting error on using partial view in asp.net core 2.2

Question

I am working on a project. I am displaying a list of services (OurServices View) and when click on particular service a view (Single View) will be displayed in which other partial view (_Facial View) will be displayed with its particular model. But I am getting an error- NullReference Exception- Object reference not set to an instance of an object. Below is the code.

 

Our Services View code:

@model IEnumerable<NiyaSpa.Models.Service>
@{
ViewData["Title"] = "OurServices";
Layout = "~/Views/Shared/_NiyaSpaLayout.cshtml";
}
<!-- breadcrumb -->
<div class="w3_breadcrumb">
<div class="breadcrumb-inner">
<ul>
<li><a href="index.html">Home</a> <i> /</i></li>
<li>Our Services</li>
</ul>
</div>
</div>
<!-- //breadcrumb -->
<!--/content-inner-section-->
<div class="w3_content_agilleinfo_inner">
<div class="container">
<div class="inner-agile-w3l-part-head">
<h2 class="w3l-inner-h-title">Our Services</h2>
</div>
<div>
<p style="text-align:center; font-size:medium;">We currently offer Facial, Waxing, and Body Massaging services to our clients. </p>
</div>
<br />
<div class="gallery-grids">
@foreach (var services in Model)
{
<div class="col-md-4 gallery-grid">
<div class="grid">
<figure class="effect-apollo">
<a class="example-image-link" asp-controller="OurServices" asp-action="SingleView" asp-route-serviceId="@Convert.ToInt32(services.Service_ID)" data-lightbox="example-set" >
<img src="~/images/g8.jpg" alt="" />
<figcaption>
<h3><p>@services.ServiceName</p></h3>
</figcaption>
</a>
</figure>
</div>
</div>
}
<div class="clearfix"> </div>
</div>
</div>
</div>
<!--//content-inner-section-->

Our Services Controller:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using NiyaSpa.Models;
namespace NiyaSpa.Controllers
{
public class OurServicesController : Controller
{
private NiyaDBContext _dbcontext=null ;
public OurServicesController(NiyaDBContext dbContext)
{
_dbcontext = dbContext;
}
public IActionResult OurServices()
{
return View(_dbcontext.Services.ToList());
}
public IActionResult SingleView(int ServiceId)
{
var serviceName = _dbcontext.Services.SingleOrDefault(s => s.Service_ID == ServiceId)?.ServiceName;
ViewBag.service_name = serviceName;
return View();
}
}
}

Single View Code

@model NiyaSpa.Models.Booking
@{
ViewData["Title"] = "SingleView";
Layout = "~/Views/Shared/_NiyaSpaLayout.cshtml";
}
@{
var sname = ViewBag.service_name;
}
<div class="w3_breadcrumb">
<div class="breadcrumb-inner">
<ul>
<li><a href="">Our Services</a> <i> /</i></li>
<li>@sname</li>
</ul>
</div>
</div>
<div class="w3_content_agilleinfo_inner">
<div class="container">
@{
await Html.PartialAsync("_Facials", new Booking());
}
</div>
</div>

_Facial - Partial View Code

@model NiyaSpa.Models.Booking
<div class="inner-agile-w3l-part-head">
<h2 class="w3l-inner-h-title">Facials</h2>
</div>
<div>
<p style="text-align:center; font-size:medium;">
We provide skin specific facials as listed below. Each contains 5-8 step treatments including cleansing, chemical or physical exfoliation, gel treatment, steam facial, toning and moisturizing. Our blood circulating facial massage allows products to absorb deep into the skin giving clients long lasting results.
</p>
</div>
<br />
<br />
<div class="row">
<div class="card-deck">
@foreach (var facialService in Model as IEnumerable<Booking>)
{
<div class="col-md-4">
<div class="card border-primary mb-3" style="width: 18rem;">
<img style="width:280px; height:180px; border-radius:10px; border-width:thin;" class="card-img-top" src="~/images/t2.jpg" alt="Card image cap">
<div class="card-body">
<h4 class="card-title" style="font-weight:600; margin-bottom:10px; margin-top:10px">@facialService.SubService.ServiceName </h4>
<p class="card-text" style="margin:0 0 10px; font-size:small;">
@facialService.SubService.Description.Substring(0, 100);
<a href="modal" data-toggle="modal" data-target="#ModalDescription">View More...</a>
</p>
<a asp-controller="OurServices" asp-action="BookAppointment" data-toggle="modal" data-target="#ModalBooking" class="btn btn-primary">Book Now</a>
</div>
</div>
</div>
<!-- Modal Description -->
<div class="modal fade" id="ModalDescription" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle" style="font-weight:600; font-size:18px">@facialService.SubService.ServiceName </h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close" style="font-size:22px; margin-top:-23px;">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" style="font-size:15px; padding:10px 15px; text-align:justify;">
<b>@facialService.SubService.Description.Split("", StringSplitOptions.None)</b> @facialService.SubService.Description
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
}
</div>
</div>
<div class="modal fade" id="ModalBooking" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle" style="font-weight:600; color:crimson; font-family:cursive; font-size:28px; text-align:center;">Book an Appointment</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close" style="font-size:22px; margin-top:-28px;">
<span aria-hidden="true">×</span>
</button>
<div style="margin-top:10px;">
<p>
<label style="color:crimson; font-size:small;"><b>Booking Policies</b></label>
<ul style="font-size:11px; margin-top:2px;">
<li>
Please arrive 15 mins before your appointment.
</li>
<li>
For appointment cancellation, please call 24 hours before.
</li>
<li>
To make your experience more enjoyable please turn off your phone during body massages and facial.
</li>
</ul>
</p>
</div>
</div>
<div class="modal-body" style="font-size:15px; padding:15px 15px; text-align:justify; margin-top:-15px">
<div class="signup-form">
<form asp-controller="OurServices" asp-action="BookAppointment" method="post">
<div class="form-group">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-user"></i></span>
<input type="text" asp-for="Customer.CustomerName" placeholder="Customer Name" class="form-control" required="required" />
</div>
</div>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-paper-plane"></i></span>
<input type="email" asp-for="Customer.Email_ID" placeholder="Email Address" class="form-control" required="required" />
</div>
</div>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-phone"></i></span>
<input type="text" asp-for="Customer.PhoneNumber" placeholder="Contact Number" class="form-control" required="required" />
</div>
</div>
<div class="form-group">
<div class="input-group date">
<div class="input-group-addon">
<i class="fa fa-calendar"></i>
</div>
<input type="text" class="form-control pull-right" asp-for="BookingDate" placeholder="Appointment Date" required="required" id="datepicker">
</div>
<!-- /.input group -->
</div>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-list"></i></span>
<input type="text" asp-for="SubService.ServiceName" class="form-control" placeholder="Service Name" disabled="disabled" />
</div>
</div>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-dollar"></i></span>
<input type="text" asp-for="TotalAmount" class="form-control" placeholder="Total Amount" disabled="disabled" />
</div>
</div>
<br />
<div class="form-group">
<button type="submit" class="btn btn-primary btn-block btn-lg" style="background-color:crimson; border-color:crimson;">Book Appointment</button>
</div>
</form>
</div>
</div>
</div>
@*<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>*@
</div>
</div>

I am invoking partial view using @await Html.PartialAysnc("viewname","model");