Cannot show the list of items using JQuery Ajax Post call

Question

I have the following code in my ItemsController:

public PartialViewResult GetAllItems()
        {
            IEnumerable<ItemDetailsViewModel> listOfItemDetailsViewModels =
                    (from objItem in objVPPhamEntities.Items
                     select new ItemDetailsViewModel()
                     {
                         ImagePath=objItem.ImagePath,
                         CategoryId = objItem.CategoryId,
                         ItemId = objItem.ItemId,
                         ItemName = objItem.ItemName,
                         ItemPrice=objItem.ItemPrice,
                         Description=objItem.Description
                     }).ToList();
            return PartialView("_ItemDetailsPartial.cshtml", listOfItemDetailsViewModels);
        }

Then this in my javascript in index:

$(document).ready(function () {
        LoadItemDetails();
});
function LoadItemDetails() {
            $.ajax({
                async: true,
                data: 'GET',
                dataType: 'html',
                contentType: false,
                processData: false,
                url: '@Url.Action("GetAllItems","Items")',
                success: function (data) {
                    $("#divLoadItemDetails").html(data);
                },
                error: function () {
                    alert('Error.');
                }
            });
        }

This is my _ItemDetailsPartial

   @model IEnumerable<WebApplication3.ViewModel.ItemDetailsViewModel>

<table style="width:100%">
    <thead>
        <tr>
            <th>

            </th>
            <th>
                Ảnh
            </th>
            <th>
                Mã hàng
            </th>
            <th>
                Mã sản phẩm
            </th>
            <th>
                Tên sản phẩm
            </th>
            <th>
                Giá
            </th>
            <th>
                Chi tiết
            </th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model)
        {
            <tr>
                <td>
                    <span id="btnDelete" class="glyphicon glyphicon-trash" onclick="DeleteItem(@item.ItemId)"></span> &nbsp;&nbsp;
                    <span id="btnEdit" class="glyphicon glyphicon-pencil" onclick="EditItem(@item.ItemId)"></span>
                </td>
                <td>
                    <img src="@Url.Content("~/ItemImage/"+ item.ImagePath)" width="30" height="30" class="img-responsive"/>
                </td>
                <td>
                    @item.CategoryId
                </td>
                <td>
                    @item.ItemId
                </td>
                <td>
                    @item.ItemName
                </td>
                <td>
                    @item.ItemPrice
                </td>
                <td>
                    @item.Description
                </td>
            </tr>
        }
    </tbody>
</table>

Then finally my html in index:

 <div id="divLoadItemDetails"></div>

I want to show the list of Items from sql server The add items function works well but I cannot show the Items list. It always says error when I run it instead of showing the Items list. Can anyone help me this???

Answer 1

You have to fix ajax. Try this

function LoadItemDetails() {
            $.ajax({
                type: 'GET',
                url: '/items/GetAllItems',
                success: function (data) {
                    $("#divLoadItemDetails").html(data);
                },
                error: function (xhr) {
                    alert(xhr.responseText);
                }
            });
        }

And by the way you are using a Get call, not POST as it is written in your question header.Try this action header

[Route("~/Items/GetAllItems")]
public IActionResult GetAllItems()
{
.....your code here
}