1 year ago

#73060

test-img

fahime abouhamze

How to open an other DataTable when click on Details button on a row of DataTable in asp.net core

I want to open an other table when click on detail button to fetch details info. my two table separately work fine but When I pass a parameter in code behind the second table bring no data. Detail button code behind is:

  "columns": [
        { "data": "code", "name": "code", "autoWidth": true },
        { "data": "title", "name": "title", "autoWidth": true },
        { "data": "pId", "name": "pId", "autoWidth": true },
  {
 "data" :"pId" , 
 "render": function (data, row) {
  return `<a  href="/api/Report/GetStatusDetail?id=${data}" class 'btn btn-success text-white' 
  style='cursor:pointer'; asp-controller="Report" asp-action="GetStatusDetail"  
 asp-route-pid="${data}"   >Details</a>`;   
 
 }

second table info: Get Controller : "GetStatusDetail" (just return a page) Post Controller that send Datatable properties: "PostStatusDetail" : it has an id of record as input

thank you helping me in advanced.

my detail controller is like bellow:

  [HttpGet]
    public IActionResult GetStatusDetail( )
    {
       return View();
    }


    [HttpPost]
    public IActionResult PostStatusDetail(int pid)
    {
        try
        {
            var draw = Request.Form["draw"].FirstOrDefault();
            var start = Request.Form["start"].FirstOrDefault();
            var length = Request.Form["length"].FirstOrDefault();
            var sortColumn = Request.Form["columns[" + Request.Form["order[0][column]"].FirstOrDefault() +
                                          "][name]"].FirstOrDefault();
            var sortColumnDirection = Request.Form["order[0][dir]"].FirstOrDefault();
            var searchValue = Request.Form["search[value]"].FirstOrDefault();
            int pageSize = length != null ? Convert.ToInt32(length) : 0;
            int skip = start != null ? Convert.ToInt32(start) : 0;
            int recordsTotal = 0;
            var PolicyData = (from a in _CommonService.GetEachStatusDetail(pid)
                              select new StatusDetailViewModel
                              {
                                  Id = a.Id,
                                  Name = a.Name,
                                  StatusId = a.StatusId
                              });

            if (!(string.IsNullOrEmpty(sortColumn) && string.IsNullOrEmpty(sortColumnDirection)))
            {
                PolicyData = PolicyData.OrderBy(sortColumn + " " + sortColumnDirection);
            }

            if (!string.IsNullOrEmpty(searchValue))
            {
                PolicyData = PolicyData.Where(m => m.Name.Contains(searchValue));
            }
            recordsTotal = PolicyData.Count();
            var data = PolicyData.Skip(skip).Take(pageSize).ToList();
            var jsonData = new
            {
                draw = draw,
                recordsFiltered = recordsTotal,
                recordsTotal = recordsTotal,
                data = data
            };

            var testd = Json(jsonData);
            return Json(jsonData);
        }
        catch (Exception ex)
        {
            throw;
        }
    }

my detail html:

@{
     ViewData["Title"] = "detail list";
 }
  <link rel="stylesheet" type="text/css" 
    href="https://cdn.datatables.net/1.11.3/css/jquery.dataTables.css">

  <main id="home-page">
   <form asp-controller="Report" asp-action="GetStatusDetail" 
 method="GET">

    <div>
        <br />
        <div class="container">
            <br />
            <div style="width:90%; margin:0 auto;">
                <table id="DimStatusDetail" class="table table-striped 
  table-bordered dt-responsive nowrap"
                       width="100%" cellspacing="0">
                    <thead>
                        <tr>
                            <th>code</th>
                            <th>title</th>
                            <th>parentCode</th>
                            <th>detail</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>

    </div>
</form>
@section Scripts
{
    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.js"></script>
    <script src="~/lib/DataTables/StatusDetailList.js"></script>


}

asp.net-mvc

asp.net-core

datatables

asp.net-ajax

0 Answers

Your Answer

Accepted video resources