1
Answer

Div element is not rendering in asp.net core mvc

Akash Patel

Akash Patel
6y
1.9k
1
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
  1. @model Tuple<Booking,Customer >  
  2. @{  
  3. ViewData["Title"] = "SingleView";  
  4. Layout = "~/Views/Shared/_NiyaSpaLayout.cshtml";  
  5. }  
  6. @{  
  7. var sname = ViewBag.serviceName;  
  8. }  
  9. <div class="w3_breadcrumb">  
  10. <div class="breadcrumb-inner">  
  11. <ul>  
  12. <li><a href="">Our Services</a> <i> /</i></li>  
  13. <li>@sname</li>  
  14. </ul>  
  15. </div>  
  16. </div>  
  17. <div class="w3_content_agilleinfo_inner">  
  18. <div class="container">  
  19. @{  
  20. switch (sname)  
  21. {  
  22. case "Facials": await Html.PartialAsync("_Facials",Model);  
  23. break;  
  24. case "Waxing": await Html.PartialAsync("_Waxing");  
  25. break;  
  26. case "Massage": await Html.PartialAsync("_Massage");  
  27. break;  
  28. case "Haircut": await Html.PartialAsync("_Haircut");  
  29. break;  
  30. default:  
  31. break;  
  32. }  
  33. }  
  34. </div>  
  35. </div>  
Partial View
  1. @using NiyaSpa.Models  
  2. @model Tuple<Booking, Customer>  
  3. <div class="inner-agile-w3l-part-head">  
  4. <h2 class="w3l-inner-h-title">Facials</h2>  
  5. </div>  
  6. <div>  
  7. <p style="text-align:center; font-size:medium;">  
  8. 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.  
  9. </p>  
  10. </div>  
  11. <br />  
  12. <br />  
  13. <div class="row">  
  14. <div class="card-deck">  
  15. @foreach (var facialService in ViewBag.subServices as List<SubService>)  
  16. {  
  17. <div class="col-md-4">  
  18. <div class="card border-primary mb-3" style="width: 18rem;">  
  19. <img style="width:280px; height:180px; border-radius:10px; border-width:thin;" class="card-img-top" src="~/images/t2.jpg" alt="Card image cap">  
  20. <div class="card-body">  
  21. <h4 class="card-title" style="font-weight:600; margin-bottom:10px; margin-top:10px">  
  22. @facialService.Sub_ServiceName  
  23. </h4>  
  24. <p class="card-text" style="margin:0 0 10px; font-size:small;">  
  25. @facialService.Description.Substring(0, 100)  
  26. <a href="modal" data-toggle="modal" data-target="#ModalDescription">View More...</a>  
  27. </p>  
  28. <a asp-controller="OurServices" asp-action="BookAppointment" data-toggle="modal" data-target="#ModalBooking" class="btn btn-primary">Book Now</a>  
  29. </div>  
  30. </div>  
  31. </div>  
  32. <!-- Modal Description -->  
  33. <div class="modal fade" id="ModalDescription" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">  
  34. <div class="modal-dialog modal-dialog-centered" role="document">  
  35. <div class="modal-content">  
  36. <div class="modal-header">  
  37. <h5 class="modal-title" id="exampleModalLongTitle" style="font-weight:600; font-size:18px">@facialService.Sub_ServiceName </h5>  
  38. <button type="button" class="close" data-dismiss="modal" aria-label="Close" style="font-size:22px; margin-top:-23px;">  
  39. <span aria-hidden="true">×</span>  
  40. </button>  
  41. </div>  
  42. <div class="modal-body" style="font-size:15px; padding:10px 15px; text-align:justify;">  
  43. <b>@facialService.Description.Split("", StringSplitOptions.None) ?? null)</b> @facialService.Description ?? null)  
  44. </div>  
  45. <div class="modal-footer">  
  46. <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>  
  47. </div>  
  48. </div>  
  49. </div>  
  50. </div>  
  51. }  
  52. </div>  
  53. </div>  
  54. <div class="modal fade" id="ModalBooking" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">  
  55. <div class="modal-dialog modal-dialog-centered" role="document">  
  56. <div class="modal-content">  
  57. <div class="modal-header">  
  58. <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>  
  59. <button type="button" class="close" data-dismiss="modal" aria-label="Close" style="font-size:22px; margin-top:-28px;">  
  60. <span aria-hidden="true">×</span>  
  61. </button>  
  62. <div style="margin-top:10px;">  
  63. <p>  
  64. <label style="color:crimson; font-size:small;"><b>Booking Policies</b></label>  
  65. <ul style="font-size:11px; margin-top:2px;">  
  66. <li>  
  67. Please arrive 15 mins before your appointment.  
  68. </li>  
  69. <li>  
  70. For appointment cancellation, please call 24 hours before.  
  71. </li>  
  72. <li>  
  73. To make your experience more enjoyable please turn off your phone during body massages and facial.  
  74. </li>  
  75. </ul>  
  76. </p>  
  77. </div>  
  78. </div>  
  79. <div class="modal-body" style="font-size:15px; padding:15px 15px; text-align:justify; margin-top:-15px">  
  80. <div class="signup-form">  
  81. <form asp-controller="OurServices" asp-action="BookAppointment" method="post">  
  82. <div class="form-group">  
  83. <div class="input-group">  
  84. <span class="input-group-addon"><i class="fa fa-user"></i></span>  
  85. <input type="text" asp-for="Item2.CustomerName" placeholder="Customer Name" class="form-control" required="required" />  
  86. </div>  
  87. </div>  
  88. <div class="form-group">  
  89. <div class="input-group">  
  90. <span class="input-group-addon"><i class="fa fa-paper-plane"></i></span>  
  91. <input type="email" asp-for="Item2.Email_ID" placeholder="Email Address" class="form-control" required="required" />  
  92. </div>  
  93. </div>  
  94. <div class="form-group">  
  95. <div class="input-group">  
  96. <span class="input-group-addon"><i class="fa fa-phone"></i></span>  
  97. <input type="text" asp-for="Item2.PhoneNumber" placeholder="Contact Number" class="form-control" required="required" />  
  98. </div>  
  99. </div>  
  100. <div class="form-group">  
  101. <div class="input-group date">  
  102. <div class="input-group-addon">  
  103. <i class="fa fa-calendar"></i>  
  104. </div>  
  105. <input type="text" class="form-control pull-right" asp-for="Item1.BookingDate" placeholder="Appointment Date" required="required" id="datepicker">  
  106. </div>  
  107. <!-- /.input group -->  
  108. </div>  
  109. <div class="form-group">  
  110. <div class="input-group">  
  111. <span class="input-group-addon"><i class="fa fa-list"></i></span>  
  112. <input type="text" asp-for="Item1.SubService.ServiceName" class="form-control" placeholder="Service Name" disabled="disabled" />  
  113. </div>  
  114. </div>  
  115. <div class="form-group">  
  116. <div class="input-group">  
  117. <span class="input-group-addon"><i class="fa fa-dollar"></i></span>  
  118. <input type="text" asp-for="Item1.TotalAmount" class="form-control" placeholder="Total Amount" disabled="disabled" />  
  119. </div>  
  120. </div>  
  121. <br />  
  122. <div class="form-group">  
  123. <button type="submit" class="btn btn-primary btn-block btn-lg" style="background-color:crimson; border-color:crimson;">Book Appointment</button>  
  124. </div>  
  125. </form>  
  126. </div>  
  127. </div>  
  128. </div>  
  129. @*<div class="modal-footer">  
  130. <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>  
  131. </div>*@  
  132. </div>  
  133. </div>  
Answers (1)
Next Recommended Forum