Click here to Skip to main content
14,830,769 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
I defined this view for the master section



<table class="table">
    <colgroup>
        <col style="width:20px;" />
        <col style="width:15%;" />
        <col />
        <col style="width:15%;" />
        <col style="width:15%;" />
        <col style="width:11%;" />
    </colgroup>
    <thead>
        <tr class="text-right">
            <th>
                 
            </th>
            <th>
                @Html.DisplayNameFor(model => model.SerialNumber)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.DocumentName)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.UnitName)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.FormatedDate)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.StatusName)
            </th>
            @*<th></th>*@
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model)
        {
            <tr>
                <td>
                    <a href="#" data-id="@item.DocumentInfoId" name="document-details">
                        
                    </a>
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.SerialNumber)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.DocumentName)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.UnitName)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.FormatedDate)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.StatusName)
                </td>
            </tr>
            <tr>
                <td colspan="6">
                    <div id="div-@item.DocumentInfoId">
                    </div>
                </td>
            </tr>
         }
    </tbody>
</table>


Then in JavaScript I wrote this code for details


   $('a[name="document-details"]').click(function (event) {
        event.preventDefault();
        var documentInfoId = $(event.currentTarget).data('id');
        if ($('#icon-' + documentInfoId).hasClass('fa-plus-square')) {
            showRows(documentInfoId);
        } else {
            hideRows(documentInfoId);
        }
    });

    function showRows(documentInfoId) {
        $.ajax({
            type: 'POST',
            url: '/Documents/DocumentGroup',
            data: { documentInfoId: documentInfoId },
            dataType: 'json',
            success: function (result) {
                //var template =
                //    '<a href="Documents/Create?documentInfoId=' + documentInfoId + '" class="btn btn-primary ml-2 mb-1">جدید</a>' 
                if (result.length > 0) {
                  var template =
                        '<table class="documents w-50">' +
                        '<colgroup>' +
                        '<col style="width:auto;" />' +
                        '<col style="width:auto;" />' +
                        '<col style="width:auto;" />' +
                        '<col style="width:auto;" />' +
                        '<col style="width:auto;" />' +
                        '<col style="width:auto;" />' +                      
                        '</colgroup>' +
                        '<thead>' +
                        '<tr>' +
                        '<th>شماره سند</th>' +
                        '<th>نام سند</th>' +  
                        '<th>نام واحد</th>' + 
                        '<th>تاریخ آخرین نسخه </th>' +
                        '<th>وضعیت</th>' +
                        '<th></th>' +
                        '</tr>' +
                        '</thead>' +
                        '<tbody>';
                    for (var i = 0; i < result.length; i++) {
                        var item = result[i];                            
                        template += '<tr>' +
                            '<td>' + item.serialNumber + '</td>' +
                            '<td>' + item.documentName + '</td>' +
                            '<td>' + item.unitName + '</td>' +
                            '<td>' + item.formatedDate + '</td>' +
                            '<td>' + item.statusName + '</td>' +
                            '<td>' +
                            '<a href="/Documents/Edit?documentInfoId=' + item.documentInfoId + '" class="fa fa-edit mx-1"></a>' +
                            '<a href="/Documents/Delete?documentInfoId=' + item.documentInfoId + ' " class="fa fa-trash mx-1"></a>' +
                            '</td>' +
                            '</tr>';
                    }
                    template += '</tbody>' +
                        '</table>';
                }

                $('#div-' + documentInfoId).append(template);
                $('#icon-' + documentInfoId).removeClass('fa-plus-square').addClass('fa-minus-square');
            },
            error(ex) {
                debugger;
            }
        });
    }

function hideRows(documentInfoId) {
        $('#div-' + documentInfoId).children().remove();
        $('#icon-' + documentInfoId).removeClass('fa-minus-square').addClass('fa-plus-square');
    }
});


What I have tried:

Details are not displayed when I click on fa-plus-square


code in controller:
public async Task<IActionResult> DocumentGroup(int? id)
{
    try
    {
        if (id == null)
        {
            throw new ArgumentNullException(nameof(id), "مقدار شناسه نمی تواند  تهی باشد.");
        }
        var documentInfo = await _context.DocumentsInfo
            .FirstOrDefaultAsync(di => di.DocumentInfoId == id);
        if (documentInfo == null)
        {
            return NotFound(new { Message = "سند مورد نظر یافت نشد." });
        }

        var documentGroup = await _context.DocumentsInfo
            .Include(s => s.DocumentStatus)
            .Where(dg => dg.UnitCode == documentInfo.UnitCode && dg.SerialNo == documentInfo.SerialNo && dg.DocumentTypeId == documentInfo.DocumentTypeId)
            .OrderByDescending(x => x.Revision)
            .Select(e => new DocumentRevisionModel
            {
                Id = e.DocumentInfoId,
                DocumentName = e.DocumentName,
                DocumentTypeId = e.DocumentTypeId,
                UnitCode = e.UnitCode,
                SerialNo = e.SerialNo,
                Revision = e.Revision,
                FormatedDate = e.ExecutionDate.ToString("yyyy-MM-dd", CultureInfo.InvariantCulture),
                StatusName = e.DocumentStatus.StatusName
            })
            .ToListAsync();

        var unitList = _context.Units.ToList();
        foreach (var item in documentGroup)
        {
            item.UnitName = unitList.Find(un => un.Code == item.UnitCode).Name;
        }

        return Json(documentGroup);
    }

    catch (Exception ex)
    {
        _logger.LogError(ex, "خطای فراخوانی متد DocumentGroup");
        return BadRequest(new { Message = "خطای غیر منتظره" });
    }
}
Posted
Updated 15-Sep-20 23:52pm
v3
Comments
F-ES Sitecore 16-Sep-20 6:05am
   
I can't see where your "icon" elements are being created, but learn to use the debugger tools in your browser to step through the javascript to get an idea what is going on and at what point the code stops doing what you expect.
Member 14615938 27-Sep-20 1:37am
   
The icon is defined in the view I do not notice anything when I put the debugger

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900