how to get the value of checked row from table in mvc5 - asp.net-mvc

I'm new in MVC5 and i don't know much about dealing with view controls . I create an MVC project , but I need to get the data of checked Rows when submit in the controller , Please can anyone help me ??
this is my view code for the table
<table class="table" id="Table_Session">
<tr>
<th>
<label> </label>
</th>
<th>
<label>User Id</label>
</th>
<th>
<label>IP Address</label>
</th>
<th>
<label>Licence Type</label>
</th>
<th>
<label>Login Date</label>
</th>
<th>
<label>Login Time</label>
</th>
<th></th>
</tr>
#For Each item In Model
#<tr>
<td>
#If Not IsNothing(item) Then
#Html.Hidden("SessionID", item.SessionID)
#<input type="checkbox" id="chboxRow" value="item.SessionID" onclick="">
End If
</td>
<td>
#Html.DisplayFor(Function(modelItem) item.sUserId)
</td>
<td>
#Html.DisplayFor(Function(modelItem) item.IpAddress)
</td>
<td>
#Html.DisplayFor(Function(modelItem) item.licencetype)
</td>
<td>
#Html.DisplayFor(Function(modelItem) item.LoginDate)
</td>
<td>
#Html.DisplayFor(Function(modelItem) item.Logintime)
</td>
</tr>
Next
</table>
<div>
#Using Html.BeginForm("KillSession", "KillSession", FormMethod.Post)
#<input type="submit"
class="btn btn-default btn-xs"
value="Kill Session" />
End Using
#Using Html.BeginForm("s_Continue", "KillSession")
#<input type="submit"
class="btn btn-default btn-xs"
value="s_Continue" />
End Using
</div>

So you need to wrap all of the checkboxes in the form or the data will not be included when you post the form. Try this as a stating place.
#Using Html.BeginForm("KillSession", "KillSession", FormMethod.Post)
<table class="table" id="Table_Session">
<tr>
<th>
<label> </label>
</th>
<th>
<label>User Id</label>
</th>
<th>
<label>IP Address</label>
</th>
<th>
<label>Licence Type</label>
</th>
<th>
<label>Login Date</label>
</th>
<th>
<label>Login Time</label>
</th>
<th></th>
</tr>
#For Each item In Model
#<tr>
<td>
#If Not IsNothing(item) Then
#Html.Hidden("SessionID", item.SessionID)
#<input type="checkbox" id="chboxRow" value="item.SessionID" onclick="">
End If
</td>
<td>
#Html.DisplayFor(Function(modelItem) item.sUserId)
</td>
<td>
#Html.DisplayFor(Function(modelItem) item.IpAddress)
</td>
<td>
#Html.DisplayFor(Function(modelItem) item.licencetype)
</td>
<td>
#Html.DisplayFor(Function(modelItem) item.LoginDate)
</td>
<td>
#Html.DisplayFor(Function(modelItem) item.Logintime)
</td>
</tr>
Next
</table>
#<input type="submit" class="btn btn-default btn-xs" value="Kill Session" />
End Using
Then maybe read this and do some Googling, the answers to this are out there, over and over and over again!

Related

How to remove extra/excess header from bootstrap table?

<div class="col-md-5">
<div class="card border-0 shadow">
<div class="card-body ">
<table class="table table-bordered">
<thead class="thead-light">
<tr>
<th style="text-align:center;">
#Html.DisplayNameFor(model => model.Barangay)
</th>
<th style="text-align:center;">
#Html.DisplayNameFor(model => model.Confirmed)
</th>
<th style="text-align:center;">
#Html.DisplayNameFor(model => model.PUI)
</th>
<th style="text-align:center;">
#Html.DisplayNameFor(model => model.PUM)
</th>
<th></th>
</tr>
</thead>
#foreach (var item in Model)
{
<tr>
<td>
#Html.DisplayFor(modelItem => item.Barangay)
</td>
<td style="text-align:center;">
#Html.DisplayFor(modelItem => item.Confirmed)
</td>
<td style="text-align:center;">
#Html.DisplayFor(modelItem => item.PUI)
</td>
<td style="text-align:center;">
#Html.DisplayFor(modelItem => item.PUM)
</td>
</tr>
}
</table>
</div>
</div>
</div>
</div>
I can't remove it although I tried using different styles of table.
Sorry for this dumb question for I am new to web development and ASP.Net MVC.
Please see image below for reference.
Thanks in advance for any help.
https://i.stack.imgur.com/LosFA.png
This is because you have an extra th tag in your code:
<th style="text-align:center;">
Html.DisplayNameFor(model => model.PUM)
</th>
<th></th> <!------------------delete this->
if your table have 5 head table columns and your table body have 4, the body expect 1 column and keeps the space

The DataTables are not responsive and taking too long to load the data?

I have 1000 records and I am able to fetch them from database like in one second. But they are taking like 9s for rendering. It is maybe because of data tables or I am looping through each record to display. If I disable the data tables performance is better but still not good. Following is my code, could you give your suggestions. I am pretty sure it is slow because of rendering and scripting.
<div class="table-responsive">
<table class="display" id="list" cellspacing="0">
<thead>
<tr>
<th>
#Content.Code
</th>
<th> #Content.Name </th>
<th>
#Content.Location
</th>
<th>
#Content.Date
</th>
<th> #Content.Remaining </th>
<th>
#Content.Status
</th>
<th>
</th>
</tr>
</thead>
<tbody>
#foreach (var item in Model)
{
<tr>
<td>
#item.Code
</td>
<td>
#item.Name
</td>
<td>
#item.Location
</td>
<td>
#item.Date
</td>
<td>
#item.ReDays
</td>
<td>
#item.Status
</td>
<td width="15%">
<i class="fa fa-pencil" aria-hidden="true"></i>
#if (User.IsInRole("Admin") || ViewBag.HavePermission == true)
{
<i class="fa fa-trash" aria-hidden="true"></i>
}
</td>
</tr>
}
</tbody>
</table>
</div>
I don't want to use server-side processing because I don't know how to control this HavePermisson and UserRole part. Please, give a suggestion?

keep the checkbox checked browsing through the paging (Using PagedList asp.net mvc)

I have a list of orders in a gridview with customer html which has paging using PagedList asp.net mvc. I have a checkbox for each order in the list. When I use "Check all" to check all orders it should keep the checkbox checked when I go to page 2-3-4. But I lose the checked status when I move to next page. Can anyone help please?
JavaScript code :
$(document).ready(
function () {
$('#selectAll').click(
function () {
$('#TabOrdre td input:checkbox').prop('checked', $(this).is(':checked'));
if ($(this).is(':checked')) {
$('#TabOrdre td input:checkbox').each(function () {
if ($.inArray($(this).val(), list) === -1)
list.push($(this).val());
});
getAll = true;
}
else {
list = [];
getAll = false;
}
}
);
View code :
<section class="panel panel-default">
<header class="panel-heading m-b-none">Liste des ordres</header>
<div class="row wrapper">
<div class="col-md-12 space20">
<div class="doc-buttons">
<a class="btn btn-s-md btn-warning ajout-container"> <i class="fa fa-plus"></i> Ajouter un ordre </a>
</div>
</div>
</div>
<div class="table-responsive">
<table class="table table-striped b-t b-light">
<thead>
<tr>
<th width="20">
<input type="checkbox" id="selectAll" value="-1">
</th>
<th style="white-space:nowrap">
EDA
</th>
<th style="white-space:nowrap">
<span class="th-sort">
Immediat
</span>
</th>
<th style="white-space:nowrap">
JNA
</th>
<th style="white-space:nowrap">
Date
</th>
<th style="white-space:nowrap">
Heure début
</th>
<th style="white-space:nowrap">
Heure fin
</th>
<th style="white-space:nowrap">
Puissance
</th>
<th style="white-space:nowrap">
RP
</th>
<th style="white-space:nowrap">
RS
</th>
<th style="white-space:nowrap">
Caractérisation
</th>
<th style="white-space:nowrap">
Commentaire
</th>
<th style="white-space:nowrap">
Source
</th>
<th style="white-space:nowrap">
Date de création
</th>
<th style="white-space:nowrap">
Refus
</th>
<th style="white-space:nowrap" class="th-sortable" data-toggle="class">
</th>
</tr>
</thead>
<tbody>
#if (Model.Count > 0)
{
foreach (var item in Model)
{
#Html.HiddenFor(model => item.ORD_ID)
<tr>
<td>
<input type="checkbox" value="#item.ORD_ID" id="chk_#item.ORD_ID" />
</td>
<td>
#Html.DisplayFor(model => item.EDA_NOM)
</td>
<td>
#(Convert.ToBoolean(item.EDA_IMMEDIAT) ? "Oui" : "Non")
</td>
<td>
#(Convert.ToBoolean(item.EDA_JNA) ? "Oui" : "Non")
</td>
<td>
#if (item.EDA_ORDRE_DATE_DEBUT != null)
{#Html.DisplayFor(model => item.EDA_ORDRE_DATE_DEBUT, "ShortDateTime")}
</td>
<td style="white-space:nowrap">
#if (item.EDA_ORDRE_DATE_DEBUT != null)
{#Html.DisplayFor(model => item.EDA_ORDRE_DATE_DEBUT, "ShortTimeString")}
</td>
<td>
#if (item.EDA_ORDRE_DATE_FIN != null)
{ #Html.DisplayFor(model => item.EDA_ORDRE_DATE_FIN, "ShortTimeString")}
</td>
<td>
#Html.DisplayFor(model => item.EDA_PUISSANCE)
</td>
<td>
#Html.DisplayFor(model => item.EDA_PUISSANCE_RP)
</td>
<td>
#Html.DisplayFor(model => item.EDA_PUISSANCE_RS)
</td>
<td>
#Html.DisplayFor(model => item.Eda_Caracterisation)
</td>
<td>
#Html.DisplayFor(model => item.COMMENTAIRE)
</td>
<td>
#Html.DisplayFor(model => item.SOURCE_NOM)
</td>
<td>
#if (item.EDA_DATE_RECUPEREE != null)
{ #Html.DisplayFor(model => item.EDA_DATE_RECUPEREE, "ShortDateTime")}
</td>
<td>
#Html.DisplayFor(model => item.VAL_REFUS)
</td>
<td >
#if (item.MODIFIABLE == 0)
{
<a class="btn btn-warning editor-container" data-id="#item.ORD_ID" data-toggle="modal"
><i class="fa fa-edit"></i></a>
}
</td>
</tr>
}
}
else
{
<tr>
<td class="text-center " colspan="16">
#VideResult
</td>
</tr>
}
</tbody>
</table>
</div>
<footer class="panel-footer">
<div class="row">
<div class="col-sm-4 ">
<button type="submit" class="btn btn-s-md btn-warning" id="Accepter">Accepter</button>
<button class="btn btn-s-md btn-default" id="Refuser">Refuser</button>
</div>
<div class="col-sm-4 text-center">
</div>
<div class="col-sm-4 text-right text-center-xs">
#Html.PagedListPager(Model, Page_No => Url.Action("Liste",
new
{
eda = ViewBag.eda,
Source = ViewBag.Source
,
datedeb = ViewBag.datedeb
,
datefin = ViewBag.datefin
,
refus = ViewBag.refus
,
page = Page_No
}),
PagedListRenderOptions.EnableUnobtrusiveAjaxReplacing(PagedListRenderOptions.ClassicPlusFirstAndLast
, new AjaxOptions()
{
HttpMethod = "GET",
UpdateTargetId = "TabOrdre",
LoadingElementId = "loader"
}))
</div>
</div>
</footer>
</section>

Not showing partial view result inside table body in asp.net MVC

I have written code to implement search using ajax in asp.net MVC. I have written an action inside my controller (Admincontroller) using partial view which is supposed to fetch data. I want to display the partial view result inside table body in my Index page.
The search function is working fine, but it is not displaying the result inside table body with id "searchresult" (Inside Index page). instead of that it is giving result. I wanted the result from search in table format. now result is displayed like below in http://localhost:1274/Admin/Search.
2786 Mens L/S 4000
here is my Index.cshtml
#model IEnumerable<TestEntityFramework.Models.trProducts>
#{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_AdminLayout.cshtml";
AjaxOptions ajax = new AjaxOptions
{
UpdateTargetId = "searchresult",
Confirm = "Are you sure to start search?",
InsertionMode = InsertionMode.Replace,
LoadingElementId="Loadhere"
};
}
<h2>Index</h2>
<script src="~/scripts/jquery.unobtrusive-ajax.js"></script>
<script src="~/scripts/jquery.unobtrusive-ajax.min.js"></script>
<div class="panel-heading">
<div>
#Html.ActionLink("Create New", "Create",null, new{ #class="btn btn- primary" })
</div>
</div>
<div class="panel-body">
<table class="table table-striped table-bordered table-condensed table- hover table-responsive">
<tr>
<th>
#Html.DisplayNameFor(model => model.prod_type)
</th>
<th>
#Html.DisplayNameFor(model => model.prod_name)
</th>
<th>
#Html.DisplayNameFor(model => model.prod_desc)
</th>
<th>
#Html.DisplayNameFor(model => model.prod_price)
</th>
<th>
#Html.DisplayNameFor(model => model.prod_qty)
</th>
<th>
#Html.DisplayNameFor(model => model.prod_category)
</th>
<th></th>
</tr>
#foreach (var item in Model) {
<tr>
<td>
#Html.DisplayFor(modelItem => item.prod_type)
</td>
<td>
#Html.DisplayFor(modelItem => item.prod_name)
</td>
<td>
#Html.DisplayFor(modelItem => item.prod_desc)
</td>
<td>
#Html.DisplayFor(modelItem => item.prod_price)
</td>
<td>
#Html.DisplayFor(modelItem => item.prod_qty)
</td>
<td>
#Html.DisplayFor(modelItem => item.prod_category)
</td>
<td>
#Html.ActionLink("Edit", "Edit", new {id=item.product_id}) |
#Html.ActionLink("Details", "Details", new { id=item.product_id }) |
#Html.ActionLink("Delete", "Delete", new { id=item.product_id })
</td>
</tr>
}
</table>
</div>
<div class="col-lg-8">
<table class="table table-bordered table-striped table-hover">
<thead>
<tr>
<th>
Product Id
</th>
<th>
Product Name
</th>
<th>
Price
</th>
<th>
</th>
</tr>
</thead>
<tbody id="searchresult">
#Html.Action("Search", new { pr_name = "" })
</tbody>
</table>
#using (Ajax.BeginForm("Search", ajax))
{
<div id="Loadhere">
#Html.TextBox("pr_name")
<button class="btn btn-primary">Search</button>
</div>
}
</div>
and my partialview Search.cshtml looks as below
#model IEnumerable<TestEntityFramework.Models.trProducts>
#foreach(var m in Model)
{
<tr>
<td>
#m.product_id
</td>
<td>
#m.prod_name
</td>
<td>
#m.prod_price
</td>
</tr>
}

MVC multiple forms on single view not working

I have 2 forms on a single razor view that open in seperate dialog boxes. The forms are submitted using jquery post..
First form works perfectly but the second form isnt recognised at all and when I try to serializr the data it returns an empty string.
Code below:
#using (Html.BeginForm("SaveElectricReading", "Store", FormMethod.Post, new { id = "frmSaveElectricReading" }))
{
<div id="electricDialog" style="display: none;" title="Electric Readings">
<p>
Please ensure the electric readings have been entered!
</p>
<table width="100%">
<tr>
<th>
Serial:
</th>
</tr>
<tr>
<td>
<input type="text" name="Serial" />
</td>
</tr>
<tr>
<th>
Reading:
</th>
</tr>
<tr>
<td>
<input type="text" name="Reading" />
</td>
</tr>
<tr>
<th>
Comment:
</th>
</tr>
<tr>
<td>
<div class="textwrapper">
<textarea rows="5" cols="10" name="Comment"></textarea>
</div>
</td>
</tr>
</table>
</div>
}
#using (Html.BeginForm("SaveWaterReading", "Store", FormMethod.Post, new { id = "myform" }))
{
<div id="waterDialog" style="display: none;" title="Water Readings">
<p>
Please ensure the water readings have been entered!
</p>
<table width="100%">
<tr>
<th>
Serial:
</th>
</tr>
<tr>
<td>
<input type="text" name="WaterSerial" />
</td>
</tr>
<tr>
<th>
Reading:
</th>
</tr>
<tr>
<td>
<input type="text" name="WaterReadingsdfsdf" />
</td>
</tr>
<tr>
<th>
Comment:
</th>
</tr>
<tr>
<td>
<div class="textwrapper">
<textarea rows="5" cols="10" name="WaterComment"></textarea>
</div>
</td>
</tr>
</table>
</div>
}
function showWaterDialog() {
var $dialog = $('#waterDialog').dialog({
autoOpen: false,
modal: true,
width: 400,
height: 400,
buttons: {
Submit: function () {
// $('#frmCreateStore').submit();
var data = $('#frmSaveWaterReading');
$.post("/Store/SaveWaterReading",
$("#frmSaveWaterReading").serialize(),
function () {
$("#waterDialog").dialog("close");
});
//$(this).dialog("close");
},
Cancel: function () {
$(this).dialog("close");
}
}
});
$dialog.dialog('open');
}
In the jquery function for showing the dialog with the form in it, I needed to add that dialog content to the second form on the page as follows:
$("#waterDialog").parent().appendTo($("form").eq(1)[0]);

Resources