ascending order of data from database by Id - asp.net-core

I am trying to learn asp.net-core, and I am stuck on trying to retieve the data from database in ascending order of database Id, my code is below but not sure why its not doing it, it does acccessnding order by page but I want all the data in ascending order by database Id, any pointers wold be great...
#model IEnumerable<Citrus.Models.Customers>
#{
ViewData["Title"] = "Index";
Pager pager = new Pager();
int pageNo = 0;
if (ViewBag.Pager !=null)
{
pager = ViewBag.Pager;
pageNo = pager.CurrentPage;
}
}
<form asp-controller="Customers" asp-action="Index">
<p>
<div class="container body-content">
<div class="row">
<div class="col-lg-6">
<div class="form-group">
<label class="control-label" for="searchString"></label>
<div class="input-group">
<input class="form-control" type="text" name="searchString" placeholder="Search by company name" />
<span class="input-group-btn" name="searchString"><button class="btn btn-default btn-primary mr-1"><i class="fas fa-search"></i> Search</button></span>
#*<span asp-validation-for="searchString"></span>*#
<a class="btn btn-primary" asp-action="Create"><i class="far fa-plus-square"></i> Customer</></a>
</div>
</div>
</div>
</div>
</div>
</p>
</form>
<table class="table">
<thead>
<tr>
<th>
#Html.DisplayNameFor(model => model.Company)
</th>
<th>
#Html.DisplayNameFor(model => model.Title)
</th>
<th>
#Html.DisplayNameFor(model => model.FirstName)
</th>
<th>
#Html.DisplayNameFor(model => model.Surname)
</th>
<th>
#Html.DisplayNameFor(model => model.Tel)
</th>
<th></th>
</tr>
</thead>
<tbody>
#foreach (var item in Model.OrderByDescending(i => i.Id))
{
<tr>
<td>
#Html.DisplayFor(modelItem => item.Company)
</td>
<td>
#Html.DisplayFor(modelItem => item.Title)
</td>
<td>
#Html.DisplayFor(modelItem => item.FirstName)
</td>
<td>
#Html.DisplayFor(modelItem => item.Surname)
</td>
<td>
#Html.DisplayFor(modelItem => item.Tel)
</td>
<td>
<a asp-action="Edit" asp-route-id="#item.Id"><i class="fas fa-edit"></i></a> |
<a asp-action="Details" asp-route-id="#item.Id"><i class="fas fa-info-circle"></i></a> |
<a asp-action="Delete" asp-route-id="#item.Id"><i class="fas fa-trash-alt"></i></a>
</td>
</tr>
}
</tbody>
</table>
<div class="container">
#if (pager.TotalPages > 0)
{
<ul class="pagination justify-content-end">
#if (pager.CurrentPage > 1)
{
<li class="page-item">
<a class="page-link" asp-controller="Customers" asp-action="Index" asp-route-pg="1">First</a>
</li>
<li>
<a class="page-link" asp-controller="Customers" asp-action="Index" asp-route-pg="#(pager.CurrentPage -1)">Previous</a>
</li>
}
#for (var pge = pager.StartPage; pge <= pager.EndPage; pge++)
{
<li class="page-item #(pge == pager.CurrentPage ? "active" : "")">
<a class="page-link" asp-controller="Customers" asp-action="Index" asp-route-pg="#pge"> #pge</a>
</li>
}
#if (pager.CurrentPage < pager.TotalPages)
{
<li class="page-item">
<a class="page-link" asp-controller="Customers" asp-action="Index" asp-route-pg="#(pager.CurrentPage + 1)">Next</a>
</li>
<li>
<a class="page-link" asp-controller="Customers" asp-action="Index" asp-route-pg="#(pager.TotalPages)">Last</a>
</li>
}
</ul>
}
</div>
Many Thank
John

You need to use OrderBy in backend,use OrderBy firstly,and then get the current page data,for example:
List<Citrus.Models.Customers> data = _context.Customers
.OrderBy(c => c.Id)
.Skip(position).Take(pageSize)
.ToList();
For details,you can refer to the official doc.

Related

Confirmation Boostrap modal posting

I'm attempting to take a confirm event and turning it into a modal. Here is the original code:
#page
#model AllCustomerModel
#{
ViewData["Title"] = "AllCustomer";
}
<h2>All Customers</h2>
<p>
<a asp-page="Customer">Create New Customer</a>
</p>
<table class="table">
<thead>
<tr>
<th>
#Html.DisplayName("Name")
</th>
<th>
#Html.DisplayName("Address")
</th>
<th>
#Html.DisplayName("Country")
</th>
<th>
#Html.DisplayName("City")
</th>
<th>
#Html.DisplayName("Phone")
</th>
<th>Edit | Delete</th>
</tr>
</thead>
<tbody>
#foreach (var item in Model.customerList)
{
<tr>
<td>
#Html.DisplayFor(modelItem => item.Name)
</td>
<td>
#Html.DisplayFor(modelItem => item.Address)
</td>
<td>
#Html.DisplayFor(modelItem => item.Country)
</td>
<td>
#Html.DisplayFor(modelItem => item.City)
</td>
<td>
#Html.DisplayFor(modelItem => item.Phone)
</td>
<td>
<a asp-page="./EditCustomer" asp-route-id="#item.CustomerID">Edit</a> |
<a asp-page="./AllCustomer" onclick="return confirm('Are you sure you want to delete this item?');" asp-page-handler="Delete" asp-route-id="#item.CustomerID">Delete</a>
</td>
</tr>
}
</tbody>
</table>
Code Behind,
public ActionResult OnGetDelete(int? id)
{
if (id != null)
{
var data = _context.CustomerTB.Find(id);
_context.Remove(data);
_context.SaveChanges();
}
return RedirectToPage("AllCustomer");
}
Here is what I've tried/currently trying (for brevity sake, I haven't pasted the MVP)
<button type="button" class="btn btn-primary" data-toggle="modal" data-id="#item.CustomerID" data-target="#myModal">
Delete
</button>
<div class="modal fade" id="myModal">
<form id="myForm" method="post">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Delete Customer</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
Are you sure you want to delete this customer?
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-danger">Yes</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">No</button>
</div>
</div>
</div>
</form>
</div>
Code Behind,
[BindProperty]
public Customer Customer { get; set; }
public void OnPost()
{
Customer customer = Customer;
if (customer != null)
_context.Remove(_context.CustomerTB.Find(customer.CustomerID));
customerList = _context.CustomerTB.ToList();
}
It will hit the OnPost method but the customer object is empty. Is this a proper way to tackle this issue? What more do I need to add in order to pick up the object on the code behind?
You need to pass the selected customerId to modal(with a hidden type) by javascript when click the button,and then bind the Customer.CustomerId in page using asp-for tag helper.
For example:
<button type="button" class="btn btn-primary myButton" data-toggle="modal" data-id="#item.CustomerID" data-target="#myModal">
Delete
</button>
<div class="modal fade" id="myModal">
<form id="myForm" method="post">
<div class="modal-dialog">
<div class="modal-content">
//..
<div class="modal-body">
<input type="hidden" class="hiddenid" asp-for="Customer.CustomerID" />
Are you sure you want to delete this customer?
</div>
//..
</div>
</div>
</form>
</div>
#section Scripts{
<script>
$('.myButton').on('click', function (event) {
var passedID = $(this).data('id');
$(".modal-body .hiddenid").val(passedID);
});
</script>
}

jQuery Datatables - footerCallback sum columns, issues with table total

ive created a function that I can call on columns that I wish to sum up using the below. however the total (table total) entry for column 9 is always zero. the page total seems to work. and the page total and table total for column 9 works also.
"footerCallback": function ( row, data, start, end, display ) {
var api = this.api(), data;
// Remove the formatting to get integer data for summation
var intVal = function ( i ) {
return typeof i === 'string' ?
i.replace(/[\£,]/g, '')*1 :
typeof i === 'number' ?
i : 0;
};
var column_sum = function (col) {
// Total over all pages
total = api
.column(col)
.data()
.reduce( function (a, b) {
return intVal(a) + intVal(b);
}, 0 );
// Total over this page
pageTotal = api
.column(col, { page: 'current'} )
.data()
.reduce( function (a, b) {
return intVal(a) + intVal(b);
}, 0 );
return accounting.formatMoney(pageTotal) +' ('+ accounting.formatMoney(total) +' total)'
};
// Update footer
$( api.column(6).footer()).html(
column_sum(6)
);
$( api.column(9).footer()).html(
column_sum(9)
);
}
EDIT
I have added some sanitised data. currently the page total works for the first column and second columns.
The all pages total does not work. i.e each time I filter by the column header I should see the total across each page
<table width="100%" class="table table-striped table-bordered table-hover dataTable no-footer dtr-inline" id="circuit_list"
role="grid" style="width: 100%;">
<thead>
<tr>
<th>Info</th>
<th>Type</th>
<th>Cost PM</th>
<th>Term</th>
<th>Remaining Term</th>
<th>Remaining Cost</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<a href="/circuits/edit/238/1/all_cl" class="btn btn-primary btn-circle">
<i class="fa fa-list"></i>
</a>
</td>
<td>Fibre</td>
<td>£950.00</td>
<td>12</td>
<td>0</td>
<td>£0.00</td>
</tr>
<tr>
<td>
<a href="/circuits/edit/238/2/all_cl" class="btn btn-primary btn-circle">
<i class="fa fa-list"></i>
</a>
</td>
<td>Fibre</td>
<td>£950.00</td>
<td>12</td>
<td>0</td>
<td>£0.00</td>
</tr>
<tr>
<td>
<a href="/circuits/edit/333/101/all_cl" class="btn btn-primary btn-circle">
<i class="fa fa-list"></i>
</a>
</td>
<td>MPLS</td>
<td>£1791.33</td>
<td>12</td>
<td>11</td>
<td>£19,704.63</td>
</tr>
<tr>
<td>
<a href="/circuits/edit/334/101/all_cl" class="btn btn-primary btn-circle">
<i class="fa fa-list"></i>
</a>
</td>
<td>MPLS</td>
<td>£100.00</td>
<td>12</td>
<td>11</td>
<td>£1,100.00</td>
</tr>
<tr>
<td>
<a href="/circuits/edit/235/1/all_cl" class="btn btn-primary btn-circle">
<i class="fa fa-list"></i>
</a>
</td>
<td>MPLS</td>
<td>£593.33</td>
<td>36</td>
<td>15</td>
<td>£8,899.95</td>
</tr>
<tr>
<td>
<a href="/circuits/edit/317/82/all_cl" class="btn btn-primary btn-circle">
<i class="fa fa-list"></i>
</a>
</td>
<td>Fibre</td>
<td>£103.00</td>
<td>3</td>
<td>0</td>
<td>£0.00</td>
</tr>
<tr>
<td>
<a href="/circuits/edit/229/2/all_cl" class="btn btn-primary btn-circle">
<i class="fa fa-list"></i>
</a>
</td>
<td>MPLS</td>
<td>£373.33</td>
<td>36</td>
<td>11</td>
<td>£4,106.63</td>
</tr>
<tr>
<td>
<a href="/circuits/edit/233/1/all_cl" class="btn btn-primary btn-circle">
<i class="fa fa-list"></i>
</a>
</td>
<td>DSL</td>
<td>£1837.66</td>
<td>60</td>
<td>6</td>
<td>£11,025.96</td>
</tr>
<tr>
<td>
<a href="/circuits/edit/234/1/all_cl" class="btn btn-primary btn-circle">
<i class="fa fa-list"></i>
</a>
</td>
<td>DSL</td>
<td>£373.34</td>
<td>36</td>
<td>15</td>
<td>£5,600.10</td>
</tr>
<tr>
<td>
<a href="/circuits/edit/243/5/all_cl" class="btn btn-primary btn-circle">
<i class="fa fa-list"></i>
</a>
</td>
<td>DSL</td>
<td>£373.34</td>
<td>36</td>
<td>15</td>
<td>£5,600.10</td>
</tr>
<tr>
<td>
<a href="/circuits/edit/244/4/all_cl" class="btn btn-primary btn-circle">
<i class="fa fa-list"></i>
</a>
</td>
<td>MPLS</td>
<td>£373.34</td>
<td>36</td>
<td>12</td>
<td>£4,480.08</td>
</tr>
<tr>
<td>
<a href="/circuits/edit/324/83/all_cl" class="btn btn-primary btn-circle">
<i class="fa fa-list"></i>
</a>
</td>
<td>4G</td>
<td>£103.00</td>
<td>3</td>
<td>0</td>
<td>£0.00</td>
</tr>
<tr>
<td>
<a href="/circuits/edit/2/6/all_cl" class="btn btn-primary btn-circle">
<i class="fa fa-list"></i>
</a>
</td>
<td>4G</td>
<td>£41.50</td>
<td>12</td>
<td>0</td>
<td>0.00</td>
</tr>
<tr>
<td>
<a href="/circuits/edit/57/18/all_cl" class="btn btn-primary btn-circle">
<i class="fa fa-list"></i>
</a>
</td>
<td>4G</td>
<td>£45.00</td>
<td>12</td>
<td>0</td>
<td>£0.00</td>
</tr>
<tr>
<td>
<a href="/circuits/edit/113/35/all_cl" class="btn btn-primary btn-circle">
<i class="fa fa-list"></i>
</a>
</td>
<td>Fibre</td>
<td>£45.00</td>
<td>12</td>
<td>0</td>
<td>£0.00</td>
</tr>
<tr>
<td>
<a href="/circuits/edit/218/71/all_cl" class="btn btn-primary btn-circle">
<i class="fa fa-list"></i>
</a>
</td>
<td>4G</td>
<td>£57.00</td>
<td>12</td>
<td>0</td>
<td>£0.00</td>
</tr>
<tr>
<td>
<a href="/circuits/edit/264/71/all_cl" class="btn btn-primary btn-circle">
<i class="fa fa-list"></i>
</a>
</td>
<td>MPLS</td>
<td>£45.00</td>
<td>12</td>
<td>0</td>
<td>£0.00</td>
</tr>
<tr>
<td>
<a href="/circuits/edit/269/61/all_cl" class="btn btn-primary btn-circle">
<i class="fa fa-list"></i>
</a>
</td>
<td>DSL</td>
<td>£45.00</td>
<td>12</td>
<td>0</td>
<td>£0.00</td>
</tr>
<tr>
<td>
<a href="/circuits/edit/300/85/all_cl" class="btn btn-primary btn-circle">
<i class="fa fa-list"></i>
</a>
</td>
<td>4G</td>
<td>£30.00</td>
<td>12</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>
<a href="/circuits/edit/307/76/all_cl" class="btn btn-primary btn-circle">
<i class="fa fa-list"></i>
</a>
</td>
<td>4G</td>
<td>£45.00</td>
<td>12</td>
<td>6</td>
<td>270.00</td>
</tr>
</tbody>
</table>
Most probably in one or more of the cells for column 9, the value there fails to convert to a number and you are getting a NaN returned by intVal function.
There are 2 issues in intVal:
line i.replace(/[\£,]/g, '')*1 can return NaN
typeof i === 'number' can be true for NaN
From what it seems, intVal is trying to check for this, but the logic is wrong.
change the intVal to:
var intVal = function ( i ) {
if(typeof i === 'string') {
i = i.replace(/[\£,]/g, '')*1;
}
// check if you got a valid number.
if (Number.isNaN(i)) {
return 0;
}
return i;
};
If the filtered total is needed, use:
total = api.column(col, {"filter": "applied"})
or
total = api.column(col, {"search": "applied"})

How to get the updated count of rows in a table after changing the page number

Actually in the table i'm working on there is pagination. I could get the count of rows present in the first page.
When i change the page number, table row count is not getting updated as per the second page.
How to force selenium to update the count after changing the page number. page refresh is not the solution as i need to navigate to second page again
public Boolean checkMessageIsFailed(String message, String channelNameToCheck, String channelTypeToCheck) {
UIPublish uiPublish = new UIPublish(driver);
Boolean isMessageSent = null;
SimplifyUtils.waitTillElementFound(uiPublish.currentPageNumber, 60);
//getting the page count
int pageCount = Integer.parseInt( uiPublish.totalPages.getText());
for (int j=1; j< pageCount;pageCount++)
{
//getting the rows present in the table
int messagesCount = uiPublish.listOfTextInMessages.size();
for (int i = 0; i < messagesCount; i++)
{
//getting the text from each row to match
//matching the text of the required message sent with the messages present in the sent messages
if (uiPublish.listOfTextInMessages.get(i).getText().equalsIgnoreCase(message))
{
String currentChannel = driver.findElements(By.xpath("//*[#id='inbox-wrapper']//tr["+ (i + 1)+ "]")).get(i).getAttribute("data-original-title");
}
}
//navigating to naxt page if the condition is not matched
uiPublish.navigateToNextPage.click();
}
return isMessageSent;
}
<div class="grid simple">
<div class="grid-body no-border email-body">
<br>
<div class="row-fluid">
<div id="email-list" class="table-responsive">
<form id="schMsgFORM" name="schMsgFORM" action="/viewSentSchMessage.action"
method="post">
<table class="table table-striped table-hover" id="emails">
<thead>
<tr>
<th>
</th>
<th>Social Channel
</th>
<th>Message
</th>
<th>Scheduled Time
</th>
<th>Actions
</th>
</tr>
</thead>
<tbody>
<tr id="outputWTFrUjUyYlE1d1piNG1XUmNuUFBnUT09">
<td class="small-cell v-align-middle" style="width: 2%">
<div class="checkbox check-success ">
<input name="msgcheckbox" id="chkboxWTFrUjUyYlE1d1piNG1XUmNuUFBnUT09"
value="WTFrUjUyYlE1d1piNG1XUmNuUFBnUT09" type="checkbox">
<label for="chkboxWTFrUjUyYlE1d1piNG1XUmNuUFBnUT09"></label>
</div>
</td>
<td style="width: 150px">
<div class="account-sent">
<div class="row">
<div class="display-inline">
<div class="profile-pic" data-toggle="tooltip" title=""
data-original-title="galloway360">
<img class="account-profile"
src="http://pbs.twimg.com/profile_images/378800000473105984/b0ad2b50b4fb81303d32720afea274ea_normal.png"
alt="">
<div class="social-icon-pub">
<span
class="social-icon-twitter img-responsive social-icon-box">
</span>
</div>
</div>
</div>
</div>
</div>
</td>
<td style="width: 50%">
<div class="muted message-wrap">
<br>
Source: Auto 2016/12/08 17:35:30 Message: How's your day?
</div>
<p class="sch-details">
Sent by: Nagarjuna reddy
<em>Scheduled from Profile :
NA
</em>
</p>
</td>
<td style="width: 15%">
<p class="muted m-t-5">
2016-12-08 05:35 PM
</p>
<p class="region">
(Asia/Calcutta)
</p>
</td>
<td style="width: 10%">
<a
href="/social/editUpdate?s360securetoken=SU0wxc4jrR8DE8Lf5hzKnRYasjg&schMsgId=WTFrUjUyYlE1d1piNG1XUmNuUFBnUT09&pageSource=publish"
data-toggle="tooltip" title="" type="button"
class="btn btn-success btn-small" data-original-title="Edit">
<i class="fa fa-pencil">
</i>
</a>
</td>
</tr>
</tbody>
</table>
</form>
</div>
</div>
</div>
</div>

Bootstrap datatable not displaying on other tabs

This is the code that I have written with laravel5, basically I'm trying to display various tables separately based on the option from the dropdown chosen, the datatable works for the first table result however does not work for the rest, correct me if I'm wrong but apprently it has something to do with the data from the first call; if the second datatable uses the same function it will see that data has already been fetched and not make the ajax call to retrieve its data. and so you will not receive data to your second(nth) datatable. Been trying to solve this for two days, I believe I'm missing something, someone please helpme in providing a solution. Thank you in advance.
#extends('app')
#section('content')
<h1 class="page-header">Reports Archive</h1>
<div class="dropdown">
<a id="drop5" href="#" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" role="button" aria-expanded="false">
Zone Options:
<span class="caret"></span>
</a>
<ul id="menu2" class="dropdown-menu" role="menu" aria-labelledby="drop5">
<?php $count = 1; ?>
#foreach ($zones as $zone)
<li role="presentation" class="{{ $count == 0 ? 'active' : '' }}">
<a role="menuitem" tabindex="-1" href="#" data-target="#zone{{ $zone->id }}"> {{ $zone->zone_name }}</a></li>
<?php $count++; ?>
#endforeach
</ul>
</div>
<div role="tabpanel">
<!-- hide the below links-->
<ul class="nav nav-tabs" style="display:none;" role="tablist" id="myTab">
<?php $count = 1; ?>
#foreach ($zones as $zone)
<li role="presentation" class="{{ $count == 0 ? 'active' : '' }}">{{ $zone->zone_name }}</li>
<?php $count++; ?>
#endforeach
</ul>
<!-- Tab panes -->
<div class="tab-content">
<?php $count = 1; ?>
#foreach ($zones as $zone)
<div role="tabpanel" class="tab-pane fade in {{ $count == 0 ? 'active' : '' }}" id="zone{{ $zone->id }}">
<div class="col-md-12">
<h2> {{ $zone->zone_name }} </h2>
<table class="table table-responsive table-hover table-bordered" id="bootstrap-table">
<thead>
<tr>
<th style="vertical-align:middle">#</th>
<th>
<div class="dropdown">
<a id="drop5" href="#" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" role="button" aria-expanded="false">
Parameter Name:
<span class="caret"></span>
</a>
<ul id="menu2" class="dropdown-menu" role="menu" aria-labelledby="drop5">
#foreach ($zone->parameter as $param)
<li role="presentation">
<a class="btn btn-link" data-collapse-group="filters" data-target="#{{ $param->id }}" data-toggle="collapse">{{ $param->parameter_name }}</a></li>
#endforeach
</ul>
</div>
</th>
<th style="vertical-align:middle">Reading Value</th>
<th style="vertical-align:middle">User</th>
<th style="vertical-align:middle">Status</th>
<th style="vertical-align:middle">Timestamp</th>
</tr>
</thead>
#forelse ($parameters as $param)
<?php $index = 1; ?>
#if ($param->zone_id == $zone->id)
<tbody id="{{ $param->id }}" class="collapse">
#foreach ($readings as $reading)
#if ($param->id == $reading->parameter_id)
<tr>
<td>{{ $index }}</td>
<td>{{ $reading->parameter->parameter_name }} </td>
<td>{{ $reading->reading_value }} </td>
<td>{{ $reading->user->name }} </td>
<td>{{ $reading->parameter->threshold->getStatus($reading->reading_value) }} </td>
<td>{{ $reading->created_at }} </td>
</tr>
<?php $index++; ?>
#endif
#endforeach
#endif
#empty
<tr><td colspan="6"><div class="alert alert-warning" role="alert" style = "margin-top: 10px"> Oops! There are no parameters to display here </div></td></tr>
</tbody>
</div>
#endforelse
</div>
</table>
</div>
</div>
<?php $count++; ?>
#endforeach
</div>
</div>
#stop
#section('scripts')
<!-- Bootstrap Based Data Table Plugin Script-->
<script src="http://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="js/jquery.bdt.js" type="text/javascript"></script>
<script>
$(document).ready( function () {
$('#bootstrap-table').bdt();
});
</script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-36251023-1']);
_gaq.push(['_setDomainName', 'jqueryscript.net']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<script>
$('.dropdown-toggle').dropdown();
</script>
#stop

Accordion within table rows

I am using Twitter Bootstrap. Currently I am working on Master Details looks alike table, which I am planning to place an accordion into each table's row and if it is expanded, the partial view will be reload and displayed.
Somehow it does not work as expected but if I change it to Modal, the partial view loaded perfectly.
This is the controller that process and returning the values:
public ActionResult Index(int id,int? page)
{
List<CustomerProduct> customerProducts =
(from c in RepositoryProduct.Reload(id)
select c).ToList<CustomerProduct>();
return PartialView("_CustomerProducts", customerProducts);
}
and this is the table in the view :
<table id="tbl" class="table table-condensed" style="border-collapse:collapse;">
<thead>
<tr>
<th>
#Html.ActionLink("Customer Name", "Index", new { sortOrder = ViewBag.NameSortParm, currentFilter = ViewBag.CurrentFilter })
</th>
<th>
#Html.DisplayNameFor(model => model.First().CustLocalName)
</th>
<th>
#Html.ActionLink("Country", "Index", new { sortOrder = ViewBag.CountrySortParm, currentFilter = ViewBag.CurrentFilter })
</th>
<th>
#Html.DisplayNameFor(model => model.First().City)
</th>
</tr>
</thead>
<tbody>
#foreach (var item in Model)
{
<tr data-toggle="collapse">
<td style="display:none;">
#Html.DisplayFor(modelItem => item.CustID)
</td>
<td>
#Html.DisplayFor(modelItem => item.CustName)
</td>
<td>
#Html.DisplayFor(modelItem => item.CustLocalName)
</td>
<td>
#Html.DisplayFor(modelItem => item.Country.CountryName)
</td>
<td>
#Html.DisplayFor(modelItem => item.City)
</td>
<td>
<a class="btn btn-small btn-info" type="button" href="#Url.Action("Index", "CustomerProduct", new { id = item.CustID })" data-toggle="collapse" data-target="##item.CustID" >Products</a>
</td>
</tr>
<tr>
<td colspan="6" class="hiddenRow">
<div id="#item.CustID" class="accordian-body collapse" tabindex="-1">
<div class="accordion-header">
<label>
<strong>#item.CustName product(s)</strong>
</label>
</div>
<div class="accordion-body">TEST</div>
</div>
</td>
</tr>
}
</tbody>
</table>
this is part of the code that calling the controller Index function :
<a class="btn btn-small btn-info" type="button" href="#Url.Action("Index", "CustomerProduct", new { id = item.CustID })" data-toggle="collapse" data-target="##item.CustID" >Products</a>
Actually I would like to load the partialview(_CustomerProduct) in the div class="accordion-body" as what I did in div class="modal-body" but no success. May I know if it is possible to do it and if yes, may I know how?
Any help will be appreciated.
for me to get the view to work i used
<td colspan="6" class="hiddenRow">
<div id="#item.CustID" class="accordian-body collapse" tabindex="-1">
<div class="accordion-header">
<label>
<strong>#item.CustName product(s)</strong>
</label>
</div>
<div class="accordion-body">
#Html.Partial("_CustomerProduct")
</div>
</div>
</td>