1
Answer

How to show lists of added card in bootstrap?

Photo of Guest User

Guest User
4y
491
1
Hi Team
 
I want to create lists of created courses, based on the given logic i have created. Meaning i want when creating course button, it must add list to 'Unpublished Courses(0)=>1 etc. Here is my client side logic on bootstrap
  1. <center>  
  2.     <div class="z-inex" style="width:1500px;">  
  3.         <div class="register-logo">  
  4.   
  5.         </div>  
  6.         <div class="card">  
  7.             <div class="card-body register-card-body">  
  8.                 <center>  
  9.                     <img src="~/Images/eNtsa.png" />  
  10.                 </center>  
  11.                 <!--Main Navigation-->  
  12.   
  13.                 <h1 style="text-align:center">Dashboard</h1>  
  14.                 <hr />  
  15.                 <main>  
  16.                     <div class="container" style="height:1000px;">  
  17.                         <div class="row mt-5 pt-5">  
  18.                             <div class="col text-center">  
  19.                                 <h2>Published Course(0)</h2>  
  20.                                 <hr />  
  21.                                 <br>  
  22.                                 <p>No courses to display</p>  
  23.                                 <hr />  
  24.                                 <h3>Unpublished Courses(0)</h3>  // This must add here lists and be shown to a user.
  25.   
  26.                                 <center>  
  27.                                     <div class="card" style="width: 18rem;">  
  28.                                         <div class="jump-response"></div>  
  29.                                         <div class="card-body d-flex flex-1">  
  30.                                             <a href="#" class="btn btn-primary pull-left">Published</a>  
  31.                                         </div>  
  32.   
  33.                                         <div id="divLogo" class="card-body d-flex flex-center">  
  34.                                             <a href="@Url.Action("Modules","Home")" class="card-link pull-left">Me</a>  
  35.                                             <hr/>  
  36.                                             <a href="@Url.Action("Files", "Home")" id="divSiteTitle"></a>  
  37.                                             <img class="card-img-bottom" src="~/Images/folders/folder-icon.png"  style="max-width:32px;">  
  38.   
  39.                                         </div>  
  40.                                     </div>  
  41.   
  42.                                 </center>  
  43.                             </div>  
  44.                             @using (Html.BeginForm("CoursesRegistration", "Home", FormMethod.Post))  
  45.                             {  
  46.                                 <div class="form-group row">  
  47.                                     <div class="col-xs-3 ml-auto">  
  48.                                         <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">  
  49.                                             Start New Course  
  50.                                         </button>  
  51.                                     </div>  
  52.                                 </div>  
  53.                             }  
  54.                             <hr />  
  55.                             <!--Button View Grades-->  
  56.                             @using (Html.BeginForm("ViewCourses", "Home", FormMethod.Post))  
  57.                             {  
  58.                                 <div class="form-group row">  
  59.                                     <div class="col-xs-3 ml-auto">  
  60.                                         <a class="btn btn-large btn-success" id="viewCourse" href="@Url.Action("ViewCourses", "Home")">View Grades</a>  
  61.                                         <script type="text/javascript">  
  62.                                             $('#ViewCourses').on('click', function (e) {  
  63.   
  64.   
  65.   
  66.                                             });  
  67.                                         </script>  
  68.   
  69.                                     </div>  
  70.                                 </div>  
  71.                             }  
  72.   
  73.                             <!-- Modal -->  
  74.   
  75.                             @using (Html.BeginForm("CoursesRegistration", "Home", FormMethod.Post))  
  76.                             {  
  77.                                 <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">  
  78.                                     <div class="modal-dialog" role="document">  
  79.                                         <div class="modal-content">  
  80.                                             <div class="modal-header">  
  81.                                                 <h5 class="modal-title" id="exampleModalLabel">Start New Course</h5>  
  82.                                                 <button type="button" class="close" data-dismiss="modal" aria-label="Close">  
  83.                                                     <span aria-hidden="true">×</span>  
  84.                                                 </button>  
  85.                                             </div>  
  86.                                             <div class="form-group row">  
  87.                                                 <label for="CourseName" class="col-sm-3 col-form-label">CourseName</label>  
  88.                                                 <div class="col-sm-5">  
  89.   
  90.                                                     @Html.EditorFor(model => model.Dashboard.CourseName, new { htmlAttributes = new { @class = "form-control", autofocus = "autofocus", placeholder = "CourseName" } })  
  91.                                                 </div>  
  92.                                             </div>  
  93.                                             @using (Html.BeginForm("CourseList", "Home", FormMethod.Post))  
  94.                                             {  
  95.                                                 <div class="form-group row">  
  96.                                                     <label for="Content-Licence" class="col-sm-3 col-form-label">Content Licence</label>  
  97.                                                     <div class="col-sm-5">  
  98.                                                         @Html.DropDownListFor(model => model.eCourses.CourseList, CourseListData as List<SelectListItem>)  
  99.                                                     </div>  
  100.                                                 </div>  
  101.   
  102.                                             }  
  103.   
  104.                                             @using (Html.BeginForm("CoursesRegistration", "Home", FormMethod.Post))  
  105.                                             {  
  106.                                                 <div class="modal-footer">  
  107.                                                     <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>  
  108.                                                     <a href="@Url.Action("CoursesRegistration", "Home")" class="btn btn-large btn-success">Create Courses</a>  
  109.                                                     <script type="text/javascript">  
  110.                                                         $(".btn-success").click(function () {  
  111.                                                             saveData();  
  112.                                                         });  
  113.   
  114.                                                         function saveData() {  
  115.                                                             var clientNo = $("#ClientId").val();  
  116.                                                             var courseName = $("#CourseName").val();  
  117.                                                             debugger  
  118.                                                             $.ajax({  
  119.                                                                 url: "/Home/CoursesRegistration",  
  120.                                                                 type: 'POST',  
  121.                                                                 data: JSON.stringify({ 'clientNo': clientNo, 'courseName': courseName }),  
  122.                                                                 dataType: "json",  
  123.                                                                 traditional: true,  
  124.                                                                 contentType: "application/json; charset=utf-8",  
  125.                                                                 success: function (result) {  
  126.   
  127.                                                                 }  
  128.                                                             });  
  129.                                                             //return false;  
  130.                                                         }  
  131.   
  132.   
  133.                                                     </script>  
  134.   
  135.                                                 </div>  
  136.                                             }  
  137.                                         </div>  
  138.                                     </div>  
  139.                                 </div>  
  140.                             }  
  141.                         </div>  
  142.   
  143.                 </main>  
  144.             </div>  
  145.         </div>  
  146.     </div>  
  147. </center>  
 

Answers (1)

Next Recommended Forum