Dear All , I met with an issue I need to show my partial view listing as data table for that I have set up everything I needed and I am able to see the datatable in partial view as well , THE PROBLEM IS THAT main main view render twice with two times menu and main content in which i am calling partial view and the code never ends I debug the code and it comes in index controller method for infinit number of times below is my code.
My main view code is below
@model WEB.ViewModels.MyVm @using WEB.Classes
<div class="card radius-0 p-0 border-0 border-b-1 brc-grey-l3"> <div class="border-0" id="headingOne2"> <a class="btn btn-light-dark text-600 bgc-white bgc-h-green-l3">
Listing </a> </div> <form asp-action="Save" asp-controller="Students" method="post" name="Main" id="Main"> <div id="detail" class="show" aria-labelledby="headingOne3" data-parent="#accordionExample2" style=""> <div class="card-body px-4 bgc-event-form-body">
<div style="height:auto; width:max; border:1px solid;border-radius:6px; border-color:silver; padding: 5px 20px 5px 20px; ">
<div style="position:relative; top:-17px;left:5px;height:20px;width:max-content; background-color:#F7F9FA; border:2px sold ;text-align:center; color:black; font-size:14px; font-weight:600;"> Student Details </div> <input type="hidden" asp-for="StudentDetail.userid" /> <div class="form-group row col-sm-12 col-md-12 col-lg-12 col-xl-12"> <div class="col-sm-2 col-md-2 col-lg-2 col-xl-2"> <label asp-for="StudentDetail.ID" class="input-label"> Student Type </label> </div> <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4"> <select asp-items="Lookups.GetCategoryDetail()" id="StudentDetail.ID" name="StudentDetail.ID" asp-for="StudentDetail.ID" onchange="GetsubCategory()" type="text" class="form-control"> <option value="">-- Select --</option>
</select> <span asp-validation-for="StudentDetail.ID" class="form-text form-error text-danger-m2 "> </span> </div> </div> </div> </div> </form> <div class="card-body p-0 border-0"> <div id="PartialViewContainer"> @await Html.PartialAsync("~/Views/details/studentdetails.cshtml")
</div> </div>
</div> @section Scripts {
<script type="text/javascript"> function GetsubCategory() { LoadPartialView(); $(document).ready(function () { SaveToken = function () {
Swal.fire({ title: 'Confirmation', text: 'Are you sure you want to save Information ? ', icon: 'question', showCancelButton: true, confirmButtonText: 'Ok' }).then((result) => { if (result.isConfirmed) {
$("#application").trigger('submit'); } })
} GetSubCategoryByType(); });
$("#StudentDetail.ID").change(function () { GetSubCategoryByType(); }); var e = document.getElementById("StudentDetail.ID"); var value = e.options[e.selectedIndex].value; var text = e.options[e.selectedIndex].text;
var GetSubCategoryByType = function () { $.ajax({ //pass in query path by concatination url: 'students/' + text, type: 'GET', success: function (data) {
console.log(data); $('#ddlSubcategory').find('option').remove(); $.each(data, function (index, item) { $("#ddlSubcategory").append('<option value="' + item.id + '">' + item.subCategory + '</option>'); }); // $(data).each(function (index, item) {
// $("#ddlSubcategory").append('<option value="' + data+ '">' + + '</option>'); // }); }, error: function (xhr, status, error) { console.log('Some error occured:', status, error); } });
} }
</script> <script type="text/javascript"> function LoadPartialView() { $.ajax({ url: @Url.Action("Index","studentdetails"), type:'GET', success: function (data) { alert('this is me'); $('#PartialViewContainer').html(data); $('#tblApplications').DataTable(); } }); }
</script>
} My partial view code is below
@model WEB.ViewModels.MyVm
<div class="card radius-0 p-0 border-0 border-b-1 brc-grey-l3"> <div class="border-0" id="headingOne2"> <h2 class="card-title text-dark-tp2 brc-grey-l3"> student List </h2> </div>
<div class="panel panel-default">
<div class="table-responsive"> <table id="tblApplications" class="table table-bordered table-hover"> <thead> <tr> <th width="5%" style="text-align:center">student Type</th> <th width="5%" style="text-align:center">Category</th> <th width="5%" style="text-align:center">Description</th> <th width="5%" style="text-align:center">Delete</th> </tr> </thead> <tbody style="text-align:center"></tbody> @foreach(var item in Model.student details) { <tr>
<td> @item.student.SubCategory </td> <td> @item.student.Category </td> <td> @item.Description </td> <td> <a class="btn btn-danger" asp-action="Delete" asp-controller="Details" asp-route-id="@item.Id">Delete</a> </td> </tr> } </table>
</div> <!-- END table-responsive--> <div class="panel-footer"> </div> </div>
</div>
@section scripts{
<script language="javascript" type="text/javascript"> $(document).ready(function () { var table = $("#tblUsers").DataTable(); });
} Controller Index method is bwlow
[HttpGet] public IActionResult Index() {
try { List<Students> students = new List<studetns>(); students = DbContext.Students.Include(a => a.Students).Include(a => a.Tracking).Take(20).ToList(); if(Students.Any()) {
myvm model = new myvm { studentDetail = students.ToList(), }; return View("Index", model); }
return View(); } catch (Exception ex) {
return BadRequest("There is something wrong with this request!"); } } ignore speeling and other stuff the issue is main loop is not ending and it call index for infinite time and load the main view content multiple times and cannot get out from dubugging