I am new in MVC. So this might be a stupid question from me.
I am trying to send parameter to my controller, but i did not get the value. Can someone help me what did i do wrong?
The username that is passed in the controller is always null. From the example that i follow it is using integer as the parameter. When i use id i will get the parameter. But when i pass string then i will get null value. Please help me. Thank you.
Here is the view
$(document).ready(function () {
dataTable = $("#batchTable").DataTable({
"ajax": {
"url": "/Home/GetDPUserList",
"type": "POST",
"datatype": "json"
},
"columns": [
{ "data": "Username", "name":"Username" },
{ "data": "Name", "name": "Name" },
{ "data": "Email", "name": "Email" },
{ "data": "IsAdmin", "name": "IsAdmin" },
{
"data": "Username", "render": function (data) {
return "<a class='btn btn-default btn-sm' onclick=EditUserForm('#Url.Action("UpdateUser","Home")/" + data +"')><i class='fa fa-pencil'></i> Edit</a><a class='btn btn-danger btn-sm' style='margin-left: 5px' onclick=Delete(" + data +")><i class='fa fa-trash'></i> Delete</a>";
},
"orderable": false,
"searchable": false,
"width": "150px"
},
],
"processing": "true",
"serverSide": "true",
"order": [0, "asc"]
});
});
function EditUserForm(url) {
alert(url)
var formDiv = $('<div/>');
$.get(url)
.done(function (response) {
formDiv.html(response);
popup = formDiv.dialog({
autoOpen: true,
resizable: false,
title: "Add New User",
height: 410,
width: 300,
close: function () {
popup.dialog('destroy').remove();
}
});
});
}
Here is the controller
[HttpGet]
public ActionResult UpdateUser(string username = "")
{
if (string.IsNullOrEmpty(username))
{
return View(new DP_User());
}
else
{
using (DBModel db = new DBModel())
{
return View(db.DP_User.Where(x => x.Username == username).FirstOrDefault<DP_User>());
}
}
}
Add route in Route.Config
routes.MapRoute(
name: "namesomething",/// as per your naming convention
url: "Home/UpdateUser/{username}",
defaults: new { controller = "Home", action = "UpdateUser", username = UrlParameter.Optional }
);
Related
I am getting the following error when I click on Export button of Datatables.net.
Following is my code
$.ajax({
type: "POST",
url: uri,
data: JSON.stringify(args),
contentType: "application/json;charset=utf-8",
success: function (data, status, xhr) {
//alert("The result is : " + data);
if (!data.d) {
$("#gvCurr").DataTable();
}
else {
$("#gvCurr").DataTable({
"aaData": JSON.parse(data.d),
"bDestroy": true,
dom: 'Bfrtip',
deferRender: true,
"bLengthChange": false,
"bPaginate": false,
buttons: [
{
extend: 'excel',
text: '<i class="fas fa-file-excel"></i> Export',
className: "btn btn-primary",
filename: 'DomesticInvoiceReport - ' + moment().format("DD-MMM-YYYY"),
}
],
"columns": [
{ "data": "ProjectNo" },
{ "data": "CountryName" },
{ "data": "StateName" },
{ "data": "SectorName" },
{ "data": "CoOrdName" },
{ "data": "Curr1" },
{ "data": "InvoiceNo_1" },
{ "data": "InvoiceDate_1" },
{ "data": "Month_1" },
{ "data": "Year_1" },
{ "data": "TotalFee_1" },
{ "data": "EscalationAmt_1" },
{ "data": "CurrentOPEAmt_1" },
{ "data": "CGSTPerc" },
{ "data": "SGSTPerc" },
{ "data": "TotalTaxPerc_1" },
{ "data": "TotalTaxAmt_1" },
{ "data": "CurrentInvoiceAmt_1" },
{
mRender: function (data, type, row) {
if (row.IsWithheld_1 == "" || row.IsWithheld_1 == 0)
return 'No';
}
},
{ "data": "WithheldAmt_1" },
{ "data": "BalanceInHandUptoThisInv_1" }
],
"order": [[0, "asc"]]
});
}
$("#entry").hide();
$("#list").show();
},
error: function (xhr) {
alert(xhr.responseText);
}
});
if you see int the code, If i comment out the columns after { "data": "Year_1" }, it is generating excel file and if I include the columns after that, it gives me error shown in the image attached. So it is not an issue of incorrect code or incorrect sequence of js files
I have included these settings in web.config
<httpRuntime targetFramework="4.7.2" maxRequestLength="2147483647" requestLengthDiskThreshold="2097152" executionTimeout="240" />
<jsonSerialization maxJsonLength="2147483644" />
It shows the records properly when retrieved. At the time of export it is giving error. I am not sure what am I missing here.
I believe you have this issue :
{
mRender: function (data, type, row) {
if (row.IsWithheld_1 == "" || row.IsWithheld_1 == 0)
return 'No';
}
},
render callbacks apply to the column definition, they cannot stay alone
You must return a value, if you return undefined you'll get "trim is not a function"
The correct way is
{
data: "IsWithheld_1",
render: function(data, type, row) {
return (data === '' || data == 0) ? 'No' : ''
}
}
I'm using datatable.js, I have table in view and API returns JSON results. I have lots of rows and i want to bind them by each page.Is there any way that datatable do it for me? I read lots of documentation but I didn't find anything useful for API
API Controller
public IHttpActionResult Get(int id)
{
return Ok(_context.Students.OrderBy(c => c.id).Skip((id - 1) * 10).Take(10).ToList());
}
Here is my table config
<script>$(document).ready(function () {
var pageindex = 1;
var table = $("#staff").DataTable({
"processing": true,
"serverSide": true,
ajax: {
url: "/Api/staffs",
dataSrc: "",
data: {
id: pageindex,
},
},
columns: [
{
data: "stf_FirstName",
},
{
data: "stf_LastName",
},
{
data: "stf_Code",
}
]
});
table.on('page', function () {
Currentpagenum();
});
function Currentpagenum() {
var info = table.page.info();
pageindex = (info.page + 1);
}
});</script>
If there are lots of rows than server side processing should be used
Try this :
HTML :
<table id="tblGrid" class="table display nowrap" style="width:100%">
</table>
JS :
function SetGrid() {
$('#tblGrid').DataTable({
"proccessing": true,
"serverSide": true,
// server side
"ajax": {
url: "/api/YourController/Method",
type: 'POST',
"data": {
Param1: Value1
}
},
// if client side
//data: YourList, // Js Array
columns: [
{ data: 'Id' },
{ data: 'Name', title: "Name" },
...
...
{ title: "Actions"},
],
"columnDefs": [
{ targets: 0, visible: false,},
],
"ordering": false,
"lengthChange": false,
"pageLength": 10,
"bDestroy": true,
"oLanguage": {
"sEmptyTable": "No Record Found"
},
});
}
Sample C# :
public object YourMethod(Param1 Value1)
{
var start = int.Parse(HttpContext.Current.Request.Form["start"]);
var result = new {
draw = HttpContext.Current.Request.Form["draw"],
recordsTotal = YourList.Count,
recordsFiltered = YourList.Count,
data = YourList.Skip(start).Take(10).ToList()
};
return result;
}
Hi i am still learning MVC. I have a requirement where i have a page with dropdownlist with table name. When the user chooses the table name, a partial view will be called to display the data in DataTable.
Currently, i am having an issue when trying to display the DataTable. The post action, GetDPUserList() is not triggered thus the data is not showing.
Here is how i call my partial view:
$('#ddPatchingAction').change(function () {
ddPatchingActionValue = $('#ddPatchingAction option:selected').val();
if (ddPatchingActionValue) {
$.get("/PatchingBatch/DataTableBatch", function (data) {
$('#divPatching').html(data);
$('#batchTable').DataTable();
});
}
});
Here is the partial view:
<table id="batchTable" class="table-striped table-responsive">
<thead>
<tr>
<th>Username</th>
<th>Name</th>
<th>Email Address</th>
<th>Is Admin</th>
<th></th>
</tr>
</thead>
</table>
<link href="//cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
#section scripts{
<script src="//cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script>
var popup, dataTable;
$(document).ready(function () {
dataTable = $("#batchTable").DataTable({
"ajax": {
"url": "/PatchingBatch/GetDPUserList",
"type": "POST",
"datatype": "json"
},
"columns": [
{ "data": "Username", "name":"Username" },
{ "data": "Name", "name": "Name" },
{ "data": "Email", "name": "Email" },
{ "data": "IsAdmin", "name": "IsAdmin" },
{
"data": "DPUserID", "render": function (data) {
return "<a class='btn btn-primary btn-sm' onclick=EditUserForm('#Url.Action("UpdateUser", "Account")/" + data +"')><i class='fa fa-pencil'></i> Edit</a><a class='btn btn-danger btn-sm' style='margin-left: 5px' onclick=Delete(" + data +")><i class='fa fa-trash'></i> Delete</a>";
},
"orderable": false,
"searchable": false,
"width": "150px"
},
],
"processing": "true",
"serverSide": "true",
"order": [0, "asc"]
});
});
function AddUserForm(url) {
var formDiv = $('<div/>');
$.get(url)
.done(function (response) {
formDiv.html(response);
popup = formDiv.dialog({
autoOpen: true,
resizable: false,
title: "Add User Account",
height: 250,
width: 300,
close: function () {
popup.dialog('destroy').remove();
}
});
});
}
function EditUserForm(url) {
var formDiv = $('<div/>');
$.get(url)
.done(function (response) {
formDiv.html(response);
popup = formDiv.dialog({
autoOpen: true,
resizable: false,
title: "Update User Account",
height: 410,
width: 300,
close: function () {
popup.dialog('destroy').remove();
}
});
});
}
function SubmitForm(form) {
$.validator.unobtrusive.parse(form);
if ($(form).valid()) {
$.ajax({
type: "POST",
url: form.action,
data: $(form).serialize(),
success: function (data) {
if (data.success) {
popup.dialog('close');
dataTable.ajax.reload();
$.notify(data.message, {
globalPosition: "top center",
className: "success"
})
}
}
});
}
return false;
}
function Delete(id) {
if (confirm("Are you sure you want to delete this data?")) {
$.ajax({
type: "POST",
url: '#Url.Action("DeleteUser", "Account")/' + id,
success: function (data) {
if (data.success) {
dataTable.ajax.reload();
$.notify(data.message, {
globalPosition: "top center",
className: "success"
})
}
}
}
)
}
}
</script>
}
Here is the controller:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web.Mvc;
using MVCWeb.Models;
using System.Linq.Dynamic;
namespace MVCWeb.Controllers
{
public class PatchingBatchController : Controller
{
// GET: PatchingBatch
public ActionResult DataTableBatch()
{
return PartialView();
}
[HttpPost]
public ActionResult GetDPUserList()
{
//server side parameter
int start = Convert.ToInt32(Request["start"]);
int length = Convert.ToInt32(Request["length"]);
string searchValue = Request["search[value]"];
string sortColumnName = Request["columns[" + Request["order[0][column]"] + "][name]"];
string sortDirection = Request["order[0][dir]"];
List<DP_User> userList = new List<DP_User>();
using (DBModel db = new DBModel())
{
userList = db.DP_User.ToList<DP_User>();
userList = userList.ToList<DP_User>();
int totalrows = userList.Count();
//search
if (!string.IsNullOrEmpty(searchValue))
{
userList = userList.Where(x => (x.Username != null && x.Username.ToString().ToLower().Contains(searchValue)) ||
(x.Name != null && x.Name.ToString().ToLower().Contains(searchValue)) ||
(x.Email != null && x.Email.ToString().ToLower().Contains(searchValue))).ToList<DP_User>();
}
int totalrowsafterfilter = userList.Count();
//sorting
if (!string.IsNullOrEmpty(sortColumnName) && !string.IsNullOrEmpty(sortDirection))
{
userList = userList.OrderBy(sortColumnName + " " + sortDirection).ToList<DP_User>();
}
//paging
userList = userList.Skip(start).Take(length).ToList<DP_User>();
return Json(new { data = userList, draw = Request["draw"], recordsTotal = totalrows, recordsFiltered = totalrowsafterfilter },
JsonRequestBehavior.AllowGet);
}
}
}
}
I have checked in chrome console, but there is no error. So i am not sure what is the problem. Is there something wrong with my code? Please help. Thank you.
I have i report that displays fine on Google chrome, but while trying to view on Firefox or Edge browser, the json response displays on the browser instead of the datatable. Sample response below:
"
[{\"RegisteredBy\":\"Admin\",\"PatientRegNo\":\"De723\",\"PaymentType\":\"Cash\"}]"
I have tried including the below code:
contentType: 'application/json, charset=utf-8',
return Json(data,JsonRequestBehavior.AllowGet);
This is my Ajax function:
$("#searchBtn").click(function () {
var url = $("#frmReport").attr('action');
var str = $("#frmReport").serialize();
$("#searchBtn").prop("disabled", true);
$.ajax({
url: url,
type: "POST",
data: str,
cache: false,
dataType: "json",
success: function (_data) {
var arr = $.map(JSON.parse(_data), function (el) { return el });
table.clear();
table.destroy();
$('#tblReport').dataTable({
data: arr,
columns: [
{ "data": "RegisteredBy"},
{ "data": "PatientRegNo"},
{ "data": "PaymentType"},
],
dom: 'Bfrtip',
buttons: [
'copy', 'csv', 'excel',
{
extend: 'pdfHtml5',
orientation: 'portrait',
pageSize: 'A4'
}
]
});
}
});
table = $("#tblReport").DataTable();
});
});
My JsonResult Code:
getEntries = superAdminForBillingRepository.GetByRegNoOnly(regNo);
var data = Newtonsoft.Json.JsonConvert.SerializeObject(getEntries);
return Json(data);
I want to be able to view the ajax response on the datatable on any browser
try to invoke your table like this:
var tableTypeOfClientInfo = $('#tableTypeOfClientInfo ').DataTable({
"destroy": true,
"responsive":{
"details": {
renderer: function ( api, rowIdx, columns ) {
var data = $.map( columns, function ( col, i ) {
return col.hidden ?
'<tr data-dt-row="'+col.rowIndex+'" data-dt-column="'+col.columnIndex+'">'+
'<td>'+col.title+':'+'</td> '+
'<td>'+col.data+'</td>'+
'</tr>' :
'';
} ).join('');
return data ?$('<table/>').append( data ) :false;
}
}
},
"autoWidth": false,
"ajax": {
"url": 'some.php',
"method": 'POST',
data:{action:"SLC", categoryId:id}
},
"columns": [
{"data": "identification_number"},
{"data": "address"},
{"data": "birthday"},
{"data": "phone"},
{"data": "mail"}
],
"language":{"url": "//cdn.datatables.net/plug-ins/1.10.15/i18n/Spanish.json"},
"columnDefs": [
{
"className": "dt-center", "targets": "_all"
}
]
});
Running MVC application in visual studio. this application based on Timesheet management. i have different project drop down list . i have attached screen shot for your reference
Before Submit :
after if user enter wrong if trying change time looks
Concrete Class :
public void UpdateEmployee(TimeSheetDetails timesheetupdate)
{
using (SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["TimesheetDBEntities"].ToString()))
{
SqlCommand cmd = new SqlCommand("Usp_UpdateTimesheet", con);
cmd.CommandType = CommandType.StoredProcedure;
cmd.Parameters.AddWithValue("#TimeSheetID ",timesheetupdate.TimeSheetID);
cmd.Parameters.AddWithValue("#DaysofWeek", timesheetupdate.DaysofWeek);
cmd.Parameters.AddWithValue("#Hours", timesheetupdate.Hours);
cmd.Parameters.AddWithValue("#Period", timesheetupdate.Period);
cmd.Parameters.AddWithValue("#ProjectID", timesheetupdate.ProjectID);
cmd.Parameters.AddWithValue("#UserID", timesheetupdate.UserID);
cmd.Parameters.AddWithValue("#CreatedOn", timesheetupdate.CreatedOn);
cmd.Parameters.AddWithValue("#TimeSheetMasterID", timesheetupdate.TimeSheetMasterID);
cmd.Parameters.AddWithValue("#TotalHours",timesheetupdate.Hours);
con.Open();
cmd.ExecuteNonQuery();
con.Close();
}
}
Edit Controller Action :
// GET: Employee/EditEmpDetails/5
public ActionResult EditTimesheet(int id)
{
TimeSheetConcrete EmpRepo = new TimeSheetConcrete();
return View(EmpRepo.TimesheetDetailsbyTimeSheetMasterID().Find(Emp => Emp.TimeSheetID == id));
}
// POST: Employee/EditEmpDetails/5
[HttpPost]
public ActionResult EditTimesheet(int id, EmpModel obj)
{
try
{
TimeSheetConcrete EmpRepo = new TimeSheetConcrete();
EmpRepo.UpdateEmployee(obj);
return RedirectToAction("GetAllEmpDetails");
}
catch
{
return View();
}
}
My View :
#{
ViewBag.Title = "TimeSheet";
Layout = "~/Views/Shared/_LayoutUser.cshtml";
}
<link href="~/Scripts/dataTablesScripts/dataTables.bootstrap.min.css" rel="stylesheet" />
<link href="~/Scripts/dataTablesScripts/responsive.bootstrap.min.css" rel="stylesheet" />
<script src="~/Scripts/dataTablesScripts/jquery.dataTables.min.js"></script>
<script src="~/Scripts/dataTablesScripts/dataTables.bootstrap4.min.js"></script>
<div class="row">
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-heading">All TimeSheet</div>
<div class="panel-body">
<table id="myTable" class="table table-striped table-bordered dt-responsive nowrap" width="100%" cellspacing="0">
<thead>
<tr>
<th>TimeSheetMasterID</th>
<th>FromDate</th>
<th>ToDate</th>
<th>TotalHours</th>
<th>CreatedOn</th>
<th>TimeSheetStatus</th>
<th>Comment</th>
<th>Details</th>
<th>Delete</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function () {
$("#myTable").DataTable({
"processing": true, // for show progress bar
"serverSide": true, // for process server side
"filter": true, // this is for disable filter (search box)
"orderMulti": false, // for disable multiple column at once
"ajax": {
"url": "/AllTimeSheet/LoadTimeSheetData",
"type": "POST",
"datatype": "json"
},
"columnDefs":
[{
"targets": [0],
"visible": false,
"searchable": false
},
{
"targets": [6],
"searchable": false,
"orderable": false
},
{
"targets": [7],
"searchable": false,
"orderable": false
},
{
"targets": [8],
"searchable": false,
"orderable": false
}
],
"columns": [
{ "data": "TimeSheetMasterID", "name": "TimeSheetMasterID", "autoWidth": true },
{ "data": "FromDate", "name": "FromDate", "autoWidth": true },
{ "data": "ToDate", "name": "ToDate", "autoWidth": true },
{ "data": "TotalHours", "name": "TotalHours", "autoWidth": true },
{ "data": "CreatedOn", "name": "CreatedOn", "autoWidth": true },
{ "data": "TimeSheetStatus", "name": "TimeSheetStatus", "title": "Status", "autoWidth": true },
{ "data": "Comment", "name": "Comment", "title": "Comment", "autoWidth": true },
{
"render": function (data, type, full, meta)
{ return '<a class="btn btn-info" href="/AllTimeSheet/Details/' + full.TimeSheetMasterID + '">View</a>'; }
},
{
data: null, render: function (data, type, row) {
if (row.TimeSheetStatus == "Submitted" || row.TimeSheetStatus == "Rejected") {
return "<a href='#' class='btn btn-danger' onclick=DeleteData('" + row.TimeSheetMasterID + "'); >Delete</a>";
}
else {
return row.TimeSheetStatus;
}
}
},
{
"render": function (data, type, full, meta) { return '<a class="btn btn-info" href="/TimeSheet/Edit/' + full.TimeSheetMasterID + '">View</a>'; }
},
]
});
});
</script>
<script type="text/javascript">
function DeleteData(ID) {
if (confirm("Are you sure you want to delete ...?")) {
DeleteSheet(ID);
}
else {
return false;
}
}
function DeleteSheet(ID) {
// var url = '#Url.Content("~/TimeSheetID")' + "TimeSheet/Delete";
$.post(url, { TimeSheetMasterID: ID }, function (data) {
if (data) {
oTable = $('#myTable').DataTable();
oTable.draw();
}
else {
alert("Something Went Wrong!");
}
});
}
</script>
if user want selected edit mode dropdown selected value ? i am trying many ways i am getting error . please any one give idea to solve this issues