I'm trying to implement the sorting functionality of Datatables by clicking on the headers to sort.
I'm currently loading my data using a ForEach like so. Is there an easy way to implement the sorting functionality in my scripts? Thank you
<tbody>
#foreach (var fieldValidator in field.FieldValidators)
{
<tr>
<td>
#fieldValidator.Id
</td>
<td>
#fieldValidator.ValidatorType
</td>
<td>
#fieldValidator.ErrorMessage
</td>
<td>
#fieldValidator.Param1
</td>
<td>
#fieldValidator.Param2
</td>
<td>
#fieldValidator.Param3
</td>
<td>
#Html.ActionLink("Edit", "EditFieldValidator", new { fieldValidatorId = fieldValidator.Id, dynamicFieldId = field.Id, dynamicFormId = Model.DynamicForm.Id, vaccineTypeStatusId = Model.Id }, new { #class = "btn btn-primary mb-h" })
Delete
<div class="modal fade" id="confirm-delete-field-validator-#fieldValidator.Id" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Confirm Delete</h4>
</div>
<div class="modal-body">
<p>You are about to permanently delete this field validator.</p>
<p><b>This action can NOT be undone.</b></p>
<p>Do you want to proceed?</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
#Html.ActionLink("Delete", "DeleteFieldValidator", new { fieldValidatorId = fieldValidator.Id, vaccineTypeStatusId = Model.Id }, new { #class = "btn btn-danger" })
</div>
</div>
</div>
</div>
</td>
</tr>
}
</tbody>
You just need to follow the guide in https://datatables.net/.
It has no problem if you used forEach. Here is a sample. Hope to help, my friend :))
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css" />
<div class="container">
<div class=" row">
<table id="myTable">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Serial Number</th>
<th>Age</th>
</tr>
</thead>
<tbody>
#foreach (var item in Model.Employees)
{
<tr>
<td>
#item.Id
</td>
<td>
#item.Name
</td>
<td>
#item.SerialNumber
</td>
<td>
#item.Age
</td>
</tr>
}
</tbody>
</table>
</div>
</div>
#section Scripts
{
<script type="text/javascript" src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>
<script>
$(document).ready(function () {
$('#myTable').DataTable();
});
</script>
}
Related
I want to display #s.CARDNAME that is used in the for each loop inside the else statement outside the loop as a heading:
<div><h4 style="text-align:center; margin-bottom:20px;">WELCOME <span id="UserName">#ViewData["0"]</span> </h4> </div>
Razor Page Code
<div class="container">
<div><h4 style="text-align:center; margin-bottom:20px;">WELCOME <span id="UserName">#ViewData["0"]</span> </h4> </div>
#if ((Convert.ToInt32(ViewData["hascard"])) == 2)
{
<h1>#ViewData["message"]</h1>
}
else
{
<div class="Debit-Card-Boxes">
#foreach (var s in ViewData["card"] as IEnumerable<DebitCardListingResponeDTOCardInfo>)
{
<div class="Debit-Card">
<div class="credit-card">
<img class="Abl-Logo" src="~/images/ABL-Logo.webp" />
<div class="chip"><img src="~/images/chip-logo-black-and-white.png" alt="chip"></div>
<div class="numbers">#s.ACCOUNTNUMBER</div>
<div class="name-and-expiry">
<span>#s.CARDNAME</span>
<span>#s.CARDEXPIRYDATE</span>
</div>
</div>
<a class="activatebtn" href="#modal">Activate</a>
<div class="modal" id="modal" tabindex="1">
<div class="modal__content">
×
<h1 id="genotpheading">OTP Generation</h1>
<table border="0" cellpadding="3" cellspacing="0">
<tr>
<td>
Pin:
</td>
<td>
<input type="password" id="txtPin" />
</td>
</tr>
<tr>
<td>
Confirm Pin:
</td>
<td>
<input type="password" id="txtConfirmPin" />
</td>
</tr>
<tr>
<td>
</td>
<td>
<input type="button" id="btnSubmit" value="Submit" />
</td>
</tr>
</table>
</div>
</div>
</div>
}
</div>
}
I suppose #s.CARDNAME is the same for all records, right? if that is not the case you will have to decide which cardname to use since there are many. Anyway if they are the same and you can't change your DTO to separate this property from an IEnumerable.
You can simply cast your viewdata item to IEnumrable and show the first(or last) item's cardname like
<h1>Your Card: #(((IEnumerable<DebitCardListingResponeDTOCardInfo>)ViewData["card"]).First().CARDNAME)</h1>
also, review this dotnetfiddle for a working example
P.S: You can also .Last() simply use any function of LINQ including ElementAt as you wish
Try to use the following code:
<div><h4 style="text-align:center; margin-bottom:20px;">WELCOME <span id="UserName">#(((List<Index3Model>) ViewData["card"])[0].CARDNAME)</span> </h4> </div>
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 1 year ago.
Improve this question
I have a requirement where I need to display a Modal popup. When the user clicks on the link inside a grid, then that has to open a modal popup with the respective values.This is the partial view code.I am using in this i have placed the edit button after clicking on it it should show PopUp to edit the details and should save it to the database. can some one help me with this?
#model IEnumerable<LMS.ViewModels.TemporaryStaff.VMTemporaryStaffResponse>
<div class="card mt-4 mb-5 ml-3 mr-3">
<div class="card-body">
<p class="card-title">View TemporaryStaff</p>
<div class="row">
<div class="col-12">
<div class="table-responsive">
<table id="order-listing" class="table">
<thead>
<tr>
<th class="label">Stafftemp ID</th>
<th class="label">StaffName</th>
<th class="label">Created On</th>
<th class="label">Status</th>
<th class="label">Edit</th>
<th class="label">View QR Code</th>
</tr>
</thead>
<tbody class="table-body">
#foreach (var item in Model)
{
<tr class="table-row">
<td>
#Html.DisplayFor(modelItem => item.StafftempID)
</td>
<td>
#Html.DisplayFor(modelItem => item.StaffName)
</td>
<td>
#Html.DisplayFor(modelItem => item.Createdon)
</td>
<td>
#if (item.Status)
{
<label class='badge badge-success'>Active</label>
}
else
{
<label class='badge badge-danger'>In-Active</label>
}
</td>
<td>
<a href="#Url.Action("GetTemporaryStaffById", "TemporaryStaff", item)">
<i class="fa fa-edit"></i>
</a>
#*<a onclick="showInPopup('#Url.Action("GetTemporaryStaffById", "TemporaryStaff", item)'"
class="btn btn-info text-white"><i class="fa fa-edit"></i></a>*#
</td>
<td>
<button type="submit" class="btn btn-success mr-2">QR Code</button>
</td>
</tr>
}
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
function OpenModal(recordId) {
$.ajax({
type: "GET",
url: "/TemporaryStaff/GetTemporaryStaffById",
datatype: "Json",
data: { id: recordId },
success: function (data) {
$('body').append($('<div id="divPopup"></div>'));
$("#divPopup").html(data);
$('#popupScreen').modal('show');
event.preventDefault();
return false;
},
error: function (error) {
event.preventDefault();
return false;
}
});
};
With this AJAX call, you can make a popup page with the values of object, you can send id as parameter, after that in controller, you can return a partial view, but you will design the partial view with name and id popupScreen. In controller you will have to use a parameter which name is id. Modal page looks like something below
#model Project.Models.TemporaryStaffModel
#{
//Layout = "~/Views/Shared/_Layout.cshtml";
}
#using (Ajax.BeginForm("StaffSave", "TemporaryStaff", null, new AjaxOptions { HttpMethod = "Post", OnSuccess = "OperationSuccess", OnFailure = "OperationFail" }, new { id = "StaffForm", name = "StaffForm" }))
{
<div class="modal draggable fade" id="popupScreen" tabindex="-1" data-backdrop="static" data-keyboard="false" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-dialog-popin modal-l">
<div class="modal-content">
<div class="block block-bordered">
<div class="block-header bg-gray-lighter">
<ul class="block-options">
<li>
<button data-dismiss="modal" data-toggle="tooltip" data-placement="right" title="Close" class="closePopupButton" type="button"><i class="si si-close"></i></button>
</li>
</ul>
<h3 class="block-title">#ViewBag.Header</h3>
</div>
<div class="block-content">
<div class="form-horizontal">
<div class="form-group">
<label class="col-md-3 control-label">#Html.LabelFor(m => m.SaveDate)</label>
<div class="col-md-9">
#Html.DatePickerFor(m => m.SaveDate).HtmlAttributes(new { #Id = "dtpSaveDateIslem", style = "width:100%", required = "required", validationMessage = "Field Required" })
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-sm btn-primary" type="button" id="btnSave" name="btnSave" value="Save" onclick="ValidationControl()">
<i class="fa fa-save"></i> Save
</button>
<button class="btn btn-sm btn-primary" type="submit" id="btnSave2" name="btnSave2" value="Save" style="display: none">
<i class="fa fa-save"></i> Save
</button>
</div>
</div>
</div>
</div>
</div>
}
I don't know why my "submit" button not responding. When I click on the edit button in each id, it can show a modal like this picture, so data is sent to the modal. But when I try to edit this data and click the button, it is not responding.
Here is my Index.cshtml
<div class="card-body">
<table id="datatablesSimple">
<thead>
<tr style="background-color:gray">
<th>No</th>
<th>Name</th>
<th>Action</th>
</tr>
</thead>
<tfoot>
<tr>
<th>No</th>
<th>Name</th>
<th>Action</th>
</tr>
</tfoot>
<tbody>
#{ var stt = 1;}
#foreach (var item in ViewBag.List)
{
var itemName = "#exampleModalss" + item.id_category;
var itemName1 = "exampleModalss" + item.id_category;
<tr>
<td>#stt</td>
<td>#item.name</td>
<td>
<button type="button" class="btn btn-danger" data-bs-toggle="modal"
data-bs-target="#itemName">Edit</button>
</td>
</tr>
stt++;
<form action="/Category/edit" method="post">
<div class="modal fade" id="#itemName1" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-xl">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Edit Category Book</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div id="resultss" class="modal-body">
<div class="row">
<div class="col">
<div class="">
<label for="category-film" class="col-form-label" style="font-weight:bold;width : 140px">Name Category: </label>
<input class="form-control" type="text" id="name" name="name" value=#item.name>
<input class="form-control" type="hidden" id="id_category" name="id_category" value=#item.id_category>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button style="width:100px" type="submit" class="btn btn-primary">Edit</button>
</div>
</div>
</div>
</div>
</form>
}
</tbody>
</table>
</div>
My Controller
[HttpPost]
public ActionResult edit(FormCollection form)
{
Category cat = new Category();
cat.id_category = Convert.ToInt32(form["id_category"]);
category.edit(cat);
return PartialView("Index", new { msg = "1" });
}
My DAO
public void edit(Category category)
{
var result = myDb.categories.SingleOrDefault(c => c.id_category == category.id_category);
result.name = category.name;
myDb.SaveChanges();
}
Here is my result when clicking on the Edit button with each id of the category book.
I get stuck in it few days, anyone can help me. I think
Edited for details
FormCollection is for list your form is just about a name and category id
then your model is not appropriate please change your model i mean create model class which contain name and category.
I create a view and create two cards to show new skill and current skill.
The problem is TittleNewSkillEHS back to the controller cero data after I select a new skill.
Short description of my request
I will need to display two lists with information about New Skill (required checkbox to select and add current skill), Current skill (required update target).
One approached to solution the request I create a view model take EmployeeTitle id, Title name, and two list
• List Current skills
• List New skills
.
.
.
TitleSkillVM TitleSkillVMNew = new TitleSkillVM();
TitleSkillVMNew.TitleId = SelectTitle.TitleId;
TitleSkillVMNew.TitleDescription = SelectTitle.TitleName;
TitleSkillVMNew.TittleNewSkillEHS = _tempNewEHS; “New skill”
TitleSkillVMNew.TittleSkillEHS = _tempEHS; “List Current skill”
return View(TitleSkillVMNew);
}
#model WCMApps.Models.ViewModel.TitleSkillVM
<div class="row">
<div class="col-sm-6">
<form asp-controller="AdmTitles" asp-action="InsertNewSkillTarget" method="post">
<input type="hidden" asp-for="TitleId" />
<%: Html.HiddenIndexerInputForModel() %>
<input type="hidden" asp-for="TittleNewSkillEHS" />
<div class=" card">
<div class="card-header">
<div class="container">
<div class="row">
<div class="col-9">
<h4>New Skill Index</h4>
</div>
</div>
</div>
</div>
<div class="card-body">
<table class="table table-striped table-hover">
<thead>
<tr>
<th></th>
<th scope="col">
Skill Name
</th>
<th scope="col">
Current Target
</th>
</tr>
</thead>
<tbody>
#foreach (var item in Model.TittleNewSkillEHS)
{
if (item.TitleSkillTargetStatus == true)
{
<tr class="table-info">
<td>
#Html.CheckBoxFor(modelItem => item.IsSelectedNewSkillTitle, item.TitleSkillTargetId)
#Html.HiddenFor(modelItem => item.TitleSkillTargetId)
</td>
<td>
#Html.DisplayFor(modelItem => item.SkillLevelDDescription)
#Html.HiddenFor(modelItem => item.SkillLevelDDescription)
</td>
<td>
#Html.DisplayFor(modelItem => item.Target)
#Html.HiddenFor(modelItem => item.Target)
</td>
</tr>
}
}
</tbody>
</table>
</div>
<div class="card-footer">
<small class="text-muted">
<button type="submit" class="btn btn-outline-info" onclick="location.href='#Url.Action("InsertNewSkillTarget", "AdmTitles", Model.TittleNewSkillEHS)'">Save</button>
</small>
</div>
</div>
</form>
</div>
<div class="col-sm-6">
<form asp-controller="AdmTitles" asp-action="UpdateCurrentSkillTarget" method="post">
<div class="card">
<div class="card-header">
<div class="container">
<div class="row">
<div class="col-9">
<h4>Current Skill Index</h4>
</div>
</div>
</div>
</div>
<div class="card-body">
<table class="table table-striped table-hover">
<thead>
<tr>
<th scope="col">
Skill Name
</th>
<th scope="col">
Current Target
</th>
<th scope="col">
Target
</th>
</tr>
</thead>
<tbody>
#foreach (var item in Model.TittleSkillEHS)
{
if (item.TitleSkillTargetStatus == true)
{
<tr class="table-success">
<td>
#Html.DisplayFor(modelItem => item.SkillLevelDDescription)
</td>
<td>
#Html.DisplayFor(modelItem => item.Target)
</td>
<td>
<div class="form-group">
<input asp-for="Target" class="form-control" />
<span asp-validation-for="Target" class="text-danger"></span>
</div>
</td>
</tr>
}
}
</tbody>
</table>
</div>
<div class="card-footer">
<small class="text-muted">
<button type="button" class="btn btn-outline-info" onclick="location.href='#Url.Action("UpdateCurrentSkillTarget", "AdmTitles", Model.TittleSkillEHS)'">Update</button>
</small>
</div>
</div>
</form>
</div>
</div>'
Here is a demo to pass TittleNewSkillEHS to Controller:
View:
<div class="card-header">
<div class="container">
<div class="row">
<div class="col-9">
<h4>New Skill Index</h4>
</div>
</div>
</div>
</div>
<div class="card-body">
<table class="table table-striped table-hover">
<thead>
<tr>
<th></th>
<th scope="col">
Skill Name
</th>
<th scope="col">
Current Target
</th>
</tr>
</thead>
<tbody>
#{ var count = 0;}
#foreach (var item in Model.TittleNewSkillEHS)
{
if (item.TitleSkillTargetStatus == true)
{
<tr class="table-info">
<td>
#*#Html.CheckBoxFor(modelItem => item.IsSelectedNewSkillTitle, new { #name = "TittleNewSkillEHS[#count].IsSelectedNewSkillTitle" })
#Html.CheckBox("IsChecked", new { #name = "TittleNewSkillEHS[#count].IsSelectedNewSkillTitle" })*#
<input asp-for=#item.IsSelectedNewSkillTitle name="TittleNewSkillEHS[#count].IsSelectedNewSkillTitle"/>
<input name="TittleNewSkillEHS[#count].TitleSkillTargetId" value=#item.TitleSkillTargetId hidden />
</td>
<td>
#Html.DisplayFor(modelItem => item.SkillLevelDDescription)
<input name="TittleNewSkillEHS[#count].SkillLevelDDescription" value=#item.SkillLevelDDescription hidden />
#*#Html.HiddenFor(modelItem => item.SkillLevelDDescription)*#
</td>
<td>
#Html.DisplayFor(modelItem => item.Target)
<input name="TittleNewSkillEHS[#count].Target" value=#item.Target hidden />
#*#Html.HiddenFor(modelItem => item.Target)*#
</td>
</tr>
count++;
}
}
</tbody>
</table>
</div>
<div class="card-footer">
<small class="text-muted">
<button type="submit" class="btn btn-outline-info">Save</button>
</small>
</div>
</div>
Controller:
public IActionResult InsertNewSkillTarget(TitleSkillVM t) {
return Ok();
}
result:
I am creating a table of items in a basket, using the following in razor to create an update quantity form in each row, however the first row has all the contents of the using but not the form tag, all subsequent rows work ok (ie. have correct form tags):
#foreach (var item in #Model.SummaryList)
{
<tr id="basket_row_#(item.ProductCode)">
<td>
<img height="25" class="" src="#Html.DisplayFor(modelItem => item.ProdImage)" alt="#Html.DisplayFor(modelItem => item.ProductDesc)">
</td>
<td>
#Html.DisplayFor(modelItem => item.ProductCode)
</td>
<td>
#if (item.ProductCode != "DL")
{
using (Ajax.BeginForm("asyncUpdateCheckoutBasket", "Online", null, new AjaxOptions { UpdateTargetId = "SubTotal_" + item.ProductCode }, new { id = "updFrm_" + item.ProductCode }))
{
<div class="form-group">
<div class="input-group input-group-xs">
#Html.TextBox("newQty", item.Qty, new { id = "newQty_" + item.ProductCode, #class = "form-control", value = item.Qty })
<span class="input-group-btn ">
<button type="submit" value="Update" class="btn btn-success" id="add_btn_#(item.ProductCode)"><span class="glyphicon glyphicon-refresh"></span></button>
</span>
</div>
</div>
<input type="hidden" name="pCode" value="#item.ProductCode" />
}
}
</td>
<td id="SubTotal_#(item.ProductCode)">
#Html.DisplayFor(modelItem => item.SubTotal)
</td>
<td>
<a class="text-primary" title="DELETE: Delete item: #item.ProductCode" href="#(Url.Action("RemoveFromBasket", new { controller = "Online", area = "", pCode = item.ProductCode }))">
<span class="glyphicon glyphicon-trash"></span>
</a>
</td>
</tr>
}
Example of output:
<tr id="basket_row_KF00880">
<td>
<img height="25" title="Q-CONNECT WHITEBOARD MARKER ASTD PK10" alt="Q-CONNECT WHITEBOARD MARKER ASTD PK10" src="https://online.calidore.com/BtoC/Images/KF00880.jpg">
</td>
<td>
KF00880
</td>
<td>
<div class="form-group">
<div class="input-group input-group-xs">
<input name="newQty" class="form-control" id="newQty_KF00880" type="text" value="1">
<span class="input-group-btn ">
<button class="btn btn-success" id="add_btn_KF00880" type="submit" value="Update"><span class="glyphicon glyphicon-refresh"></span></button>
</span>
</div>
</div>
<input name="pCode" type="hidden" value="KF00880">
</td>
<td id="SubTotal_KF00880">
£8.21
</td>
<td>
<a title="DELETE: Delete item: KF00880" class="text-primary" href="/RemoveFromBasket?pCode=KF00880">
<span class="glyphicon glyphicon-trash"></span>
</a>
</td>
</tr>
<tr id="basket_row_KF00255">
<td>
<img height="25" title="Q-CONNECT DVD-R CAKEBOX PK25" alt="Q-CONNECT DVD-R CAKEBOX PK25" src="https://online.calidore.com/BtoC/Images/KF00255.jpg">
</td>
<td>
KF00255
</td>
<td>
<form id="updFrm_KF00255" action="/asyncUpdateCheckoutBasket" method="post" data-ajax-update="#SubTotal_KF00255" data-ajax-mode="replace" data-ajax="true">
<div class="form-group">
<div class="input-group input-group-xs">
<input name="newQty" class="form-control" id="newQty_KF00255" type="text" value="1">
<span class="input-group-btn ">
<button class="btn btn-success" id="add_btn_KF00255" type="submit" value="Update"><span class="glyphicon glyphicon-refresh"></span></button>
</span>
</div>
</div>
<input name="pCode" type="hidden" value="KF00255">
</form>
</td>
<td id="SubTotal_KF00255">17.98</td>
<td>
<a title="DELETE: Delete item: KF00255" class="text-primary" href="/RemoveFromBasket?pCode=KF00255">
<span class="glyphicon glyphicon-trash"></span>
</a>
</td>
</tr>