Div element is not rendering in asp.net core mvc

I am working on a project. I am using a view from that i am calling partial view. I have a razor code in partial view which displays cards. I have tested using breakpoint. everything is working well but the div is not rendering. I even checked using inspect element in chrome and not div code is rendered in it. Please suggest any solution.

Main View from which partial view is called

@model Tuple<Booking,Customer >
@{
ViewData["Title"] = "SingleView";
Layout = "~/Views/Shared/_NiyaSpaLayout.cshtml";
}
@{
var sname = ViewBag.serviceName;
}
<div class="w3_breadcrumb">
<div class="breadcrumb-inner">
<ul>
<li><a href="">Our Servicesa> <i> /i>li>
<li>@snameli>
ul>
div>
div>
<div class="w3_content_agilleinfo_inner">
<div class="container">
@{
switch (sname)
{
case "Facials": await Html.PartialAsync("_Facials",Model);
break;
case "Waxing": await Html.PartialAsync("_Waxing");
break;
case "Massage": await Html.PartialAsync("_Massage");
break;
case "Haircut": await Html.PartialAsync("_Haircut");
break;
default:
break;
}
}
div>
div>

Partial View

@using NiyaSpa.Models
@model Tuple<Booking, Customer>
<div class="inner-agile-w3l-part-head">
<h2 class="w3l-inner-h-title">Facialsh2>
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 ViewBag.subServices as List<SubService>)
{
<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.Sub_ServiceName
h4>
<p class="card-text" style="margin:0 0 10px; font-size:small;">
@facialService.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 Nowa>
div>
div>
div>
<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.Sub_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.Description.Split("", StringSplitOptions.None) ?? null)b> @facialService.Description ?? null)
div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Closebutton>
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 Appointmenth5>
<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 Policiesb>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="Item2.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="Item2.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="Item2.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="Item1.BookingDate" placeholder="Appointment Date" required="required" id="datepicker">
div>
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="Item1.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="Item1.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 Appointmentbutton>
div>
form>
div>
div>
div>
@*<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Closebutton>
div>*@
div>
div>

1 Reply

Know the answer? Post it — somebody with the same question will find it here.

Kalyani Shevale7y ago
please refer below link

https://www.c-sharpcorner.com/UploadFile/ff2f08/partial-view-in-mvc/
https://stackoverflow.com/questions/7295835/how-can-i-load-partial-view-inside-the-view
https://www.codeproject.com/Questions/1197206/How-to-call-partial-view-with-model-in-main-view

http://techfunda.com/howto/221/render-call-a-partial-view-from-a-content-page-view
+1