0

I have a view to display data from database into datatable. In table, I have edit, delete and detail options to do those respective functions.

My edit and details views are different pages(views). Now when I click row number 2's edit or delete, it takes me to that edit/details page, but there is no data loaded in those page text boxes.

My codes and designs below:

codes for loading datatable:

function SearchCategory(){
    $('#tblCategory').DataTable({
        "processing": false,
        "serverSide": false,
        "searchable": false,
        "ajax": {
            url: '@Url.Action("GetValues")',
            type: 'POST',
            dataSrc: 'data',
        },
        "columns": [{ data: "CategoryId" },
                { data: "Description" },
                {
                    "render": function (data, type, row) { return '<a class="text-center" href="/Master/CategoryDetails?id="' + row.CategoryId + '"><i class="fa fa-bars"></i></a>'; }
                },
                {
                    "render": function (data, type, row) { return '<a class="text-center" href="/Master/CategoryEdit?id="' + row.CategoryId + '"><i class="fa fa-edit"></i></a>'; }
                },
                {
                    data: null, render: function (data, type, row) {
                        return '<a href="#" class="text-center" onclick=DeleteData("' + row.CategoryId + '"); ><i class="fa fa-trash-o"></i></a>';
                }
            }]
        });
    }
}

table design:

<table cellspacing="1" cellpadding="2" style="width: 100%;" id="tblCategory" class="table table-striped table-hover table-bordered table-hd">
    <thead>
        <tr class="gridheader">                                              
            <td style="width: 30%;" class="search_field" search_field_value="CategoryId">Category Id</td>
            <td style="width: 30%;" class="search_field" search_field_value="Description">Description</td>
            <td style="width: 20%;" class="search_field" search_field_value="Details">Details</td>
            <td style="width: 10%;" class="text-center">Edit</td>
            <td style="width: 10%;" class="text-center">Delete</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </tbody>
</table>

Design of my table:

enter image description here

When I click Edit or details Icon in each row it must take me to their respected edit/details page, it does, but respected datas not loaded in the edit/detail page text boxes.

Sample edit page design:

enter image description here

Each detail and edit page are in different views: I tried something like the following in their script .

<script>
    $(document).ready(function () {
        $("#txtCategoryId").text = row.CategoryId;
        $("#txtDescription").text = row.Description;

    });
</script>

But its not working how to do this. also How to delete selected row? Kindly help.TIA.

Bosco
  • 1,388
  • 2
  • 10
  • 18
Riya
  • 109
  • 2
  • 11

1 Answers1

0

For your href in the a tag of the SearchCategory function, try this :

href="@url.Action("CategoryDetails","Master", new { id = row.CategoryId })"

-> Do the same thing for the CategoryEdit href.

Then, make sure your functions (CategoryEdit and CategoryDetails) take an id as a parameter and send the model of the specified id to the proper view!

The views should have something like @model Category at the beginning of the files.

Check this as reference

EDIT :

In the views, you have to change

row.CategoryId => @this.Model.CategoryId

AND

row. Description => @this.Model.Description

and I repeat, It's crucial for your view's files to start with @model Category

SEE THIS LINK : https://docs.microsoft.com/en-us/aspnet/core/tutorials/first-mvc-app/controller-methods-views?view=aspnetcore-2.2

alwaysbeshels
  • 78
  • 8