I have a MVC.net web application.
In the view I have a List of records from my database.
The records are displayed in the following format
if (List!=null)
{
<table>
<thead>
<th></th>
</thead>
<tbody>
foreach (item in List)
if (item.startWith("AA"))
{
hide the item originally. and add class to be used by javascript/jquery to show/hide element
}
<td>Item</td>
</tbody>
</table>
}
What i want to do is put a button above the table "Show/hide"
That will hide/show some of the results when clicked.
This is oversimplified skeleton of my code. My actual table has much more information on it.
Mark the items that should be shown/hidden, e.g. with a marker CSS class. You can also set the display CSS property to hide them initially.
#{ const string markerCssClass = "js-hideable"; }
<table>
<thead>
<th></th>
</thead>
<tbody>
foreach (item in List) {
#{ var isHideable = item.StartsWith("AA"); }
<td class="#(isHideable ? markerCssClass : string.Empty)"
style="display: #(isHideable ? "none" : "block")">Item</td>
}
</tbody>
</table>
<button id="show">Show</button>
Then use jquery to show/hide these items using the marker class as selector.
<script type="text/javascript">
$('#show').on('click', function() {
var affectedElements = $('.#markerCssClass');
affectedElements.show();
});
</script>
You can do the filtering with pure CSS if you put the button BEFORE the table and either at the same level or higher.
<html>
<head>
<style>
#filter-toggle:checked ~ .filterable-table .filterable { display: none; }
</style>
</head>
<body>
<input id="filter-toggle" type="checkbox">
<label for="filter-toggle"> Filter</label>
<table class="filterable-table">
<tr class="filterable"><td>Hide me when filtered</td></tr>
<tr><td>Show me when filtered</td></tr>
</table>
</body>
</html>
Related
I am using JQuery Data Table in my project.
I have ActionResult and getting data. I want to display data in table but if I use tbody, datatable is not styling look like normal table.
I tried without data and wrote custom tbody and tr tags. My probiem is continue. Where is my wrong ?
ActionResult
public ActionResult YayinEvleri()
{
dbContext = new DatabaseContext();
var yayinEvleri = dbContext.YayinEvi.ToList();
return View(yayinEvleri);
}
View
#model List<KitapFuari.Models.Yayinevi>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js "></script>
<script>
$(document).ready( function () {
$('#yayinEvleri').DataTable();
});
</script>
<table id="yayinEvleri" class="table table-striped table-bordered" style="width:100%" cellspacing="0">
<thead>
<tr>
<th>Yayın Evi</th>
<th>Yazar</th>
</tr>
</thead>
<tbody>
#foreach (var item in Model)
{
<tr>
<td>#item.Ad</td>
</tr>
}
</tbody>
</table>
Add this script.
$(document).ready( function () {
$('#yayinEvleri').DataTable();
});
I have a database with people and phones and i created a partial view that shows persons phones. I want this patial view to be loaded on click at some button like ShowPhones or something like that.
This is how i call view
#Html.Partial("ShowPersonsPhones", item.phones)
This is my partial view
#model IEnumerable<Project.Models.Phone>
<h2>Parial View</h2>
<table class="table">
<tr>
<th>
#Html.DisplayNameFor(model => model.Numer)
</th>
<th>
#Html.DisplayNameFor(model => model.Model)
</th>
</tr>
#foreach (var phone in Model)
{
<tr>
<td>
#Html.DisplayFor(item => phone.Numer)
</td>
<td>
#Html.DisplayFor(item => phone.Model)
</td>
</tr>
}
</table>
EDIT:
i tried to do some javascript in view but it just doesnt work
<style>
.shown{
display : inline;
}
.hidden{
display : none;
}
</style>
#Scripts.Render("~/bundles/jquery")
<script type="text/javascript">
function show_partial(i) {
alert("show partial " + i);
var divsname = '#partial' + i;
div = $(divsname);
if (div.hasClass('hidden'))
{
div.removeClass("shown");
div.addClass("hidden");
}
else
{
div.removeClass('hidden');
div.addClass("shown");
}
}
</script>
When i put alert in the function it shows but doesnt change classes for some reason.
In button click event, you can load the partial view.
ViewPage
<input type="button" id="btn" value="ClickMe" onclick="loadPartialView()" />
<div id="partialDiv"></div>
<script type="text/javascript">
function loadPartialView() {
$("#partialDiv").load('#Url.Action("IndexView","Home")');
}
</script>
In Controller, you can return the partial view with the parameter.
public ActionResult IndexView()
{
return PartialView("_PartialView", db.Phones.ToList());
}
i have to implement jquery ui accordion and sortable in asp.net mvc dynamically generated table rows. i have implemented sortable and its working fine but how can i impelement accordion to table tbody.
<table >
<tbody id="rowAccordion">
#foreach (var item in Model)
{
<tr class="rowSort">
<td style="width: 200px;">
<h3>
#item.PageTitle
</h3>
<div>
<p>
Discription
</p>
</div>
</td>
</tr>
}
</tbody>
</table>
<script>
$(function () { $("#rowAccordion").accordion(); });
$("#rowAccordion").sortable();
</script>
Use the option "header" using the column that you want to appear as the header.
$(document).ready(function () {
$("#rowAccordion").accordion({header: 'YOUR COLUMN SELECTOR HERE' });
});
hth
I am developing MVC application.
I want pass the values from list to the controller,
The below code is to display the list of Products ...it shows perfectly.
#using (Html.BeginForm("Create", "Order", FormMethod.Post, new { enctype = "multipart/form-data", id = "frmCreate" }))
{
#Html.ValidationSummary(true)
<div class="row-fluid">
<table class="table table-striped table-hover">
<thead>
<tr>
<th>Section Name</th>
<th>Quantity</th>
</tr>
</thead>
<tbody>
#foreach (var item in ViewBag.ProductList)
{
<tr>
<td >#item.SectionName</td>
<td >#item.Quantity</td>
</tr>
}
</tbody>
</table>
<span class="span12 alert alert-success" id="status-message" style="margin-bottom:10px;"><strong>Your Order has been sent to HO sucessfully.</strong>Clcik Here to check status. Please click on back button to view list.</span>
}
Now, on when I click on the above link, I want to pass the data to the method in controller.
I have written the below code, It calls the method of controller but the list doesn't contain any items. It shows the null value. how to pass the list using ajax ?
Whats wrong in code ?
<script type="text/javascript">
$(document).ready(function () {
$('#CheckOrder').click(function(){
$.ajax({
url: '#Url.Action("DATACoME")' + '?List=#ViewBag.ProductList'
}).done(function(){
//do something
});
});
</script>
Try this:
<script type="text/javascript">
$(document).ready(function () {
$('#CheckOrder').click(function(){
$.ajax({
url: '#Url.Action("DATACoME")',
data: {parameterNameFromTheController: '#ViewBag.ProductList'}
}).done(function(){
//do something
});
});
</script>
I'm trying to add a jQuery dialog in each row of a table, using jQuery, and dataTables plugin.
I want to add in the dialog data specific to each row.
I've seen in other post that you can think of two ways:
1) One dialog for each row.
2) Only one dialog for all the rows, and then fill it with specific data.
In this example, I have a list of courses in a table, with name(nombre), code(codigo), and mode(modo).
For each row, there is a button (modificar) that should show a dialog to edit the data for that course. Of course, in each dialog, must be loaded the data of that row.
My idea (viewed other ideas in other post) is to put the dialog inside the row, so I can load the data from that row.
I created a class (masInfo) and in the Javascript code, I put a function that should open the dialog after the button is. But it doesn't work.
Do you have any idea? Thanks.
HTML Y JSP
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link type="text/css"
href="css/milk.css" rel="stylesheet" />
<title>Paginadores tablas</title>
</head>
<body>
<%
CatalogoCursos catalogoCursos = CatalogoCursos.getCatalogoCursos();
ArrayList<Curso> cursos = catalogoCursos.getCursos();
%>
<div id="miTabla">
<form id="formulario" name="formulario" method="post">
<table id="tabla">
<thead>
<tr>
<th>Nombre </th>
<th>Código </th>
<th>Modo de juego </th>
<th> Acción </th>
</tr>
</thead>
<tbody>
<%
for(Curso curso: cursos) {
%>
<tr>
<td><%=curso.getNombre()%></td>
<td><%=curso.getCodigo()%></td>
<td><%=curso.getStringModo()%></td>
<td>
<input type="button" class="masInfo" value="modificar"/>
<div title="Modificar curso">
<table>
<tr>
<td><input type="text" name="mod_nombre" value="<%=curso.getNombre()%>"/></td>
<td><input type="text" name="mod_codigo" value="<%=curso.getCodigo()%>"/></td>
<td><input type="text" name="mod_modo" value="<%=curso.getStringModo()%>"/></td>
</tr>
</table>
</div>
</td>
</td>
</tr>
<%
}
%>
</tbody>
</table>
</form>
</div>
</body>
</html>
JAVASCRIPT
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery-ui.custom.js"></script>
<script type="text/javascript" src="js/jquery.dataTables.js"></script>
<script type="text/javascript">
(function($) {
// Dialog
$('.masInfo').next().dialog({
autoOpen: false,
width: 600,
buttons: {
"Borrar": function() {
document.formulario.submit();
$(this).dialog("close");
},
"Cancelar": function() {
$(this).dialog("close");
}
}
});
// Dialog Link
$('.masInfo').click(function(){
$('#dialog').dialog('open');
return false;
});
});
You are much better off using just one dialog and populate the relevant information in the dialog on the button click. The way you currently do it will result in a lot of duplicated input elements.
So, the HTML would look like:
<div id="miTabla">
<table id="tabla">
<thead>
<tr>
<th>Nombre </th>
<th>Código </th>
<th>Modo de juego </th>
<th> Acción </th>
</tr>
</thead>
<tbody>
<%
for(Curso curso: cursos) {
%>
<tr>
<td><%=curso.getNombre()%></td>
<td><%=curso.getCodigo()%></td>
<td><%=curso.getStringModo()%></td>
<td>
<input type="button" class="masInfo" value="modificar"/>
</td>
</td>
</tr>
<%
}
%>
</tbody>
</table>
</div>
<div title="Modificar curso" id="ModificarDialog">
<form id="formulario" name="formulario" method="post">
<table>
<tr>
<td><input type="text" name="mod_nombre" id="mod_nombre" /></td>
<td><input type="text" name="mod_codigo" id="mod_codigo" /></td>
<td><input type="text" name="mod_modo" id="mod_modo" /></td>
</tr>
</table>
</form>
</div>
JavaScript would change to:
(function($) {
// Dialog
$('#ModificarDialog').dialog({
autoOpen: false,
width: 600,
buttons: {
"Borrar": function() {
document.formulario.submit();
$(this).dialog("close");
},
"Cancelar": function() {
$(this).dialog("close");
}
}
});
// Dialog Link
$('.masInfo').click(function(){
var cells = $(this).parent().find('td');
$('#mod_monbre').val(cells.eq(0).text());
$('#mod_codigo').val(cells.eq(1).text());
$('#mod_modo').val(cells.eq(2).text());
$('#dialog').dialog('open');
return false;
});
});