【问题标题】:Action method return raw json data instead of view in ASP.NET Core 2.2Action 方法返回原始 json 数据而不是 ASP.NET Core 2.2 中的视图
【发布时间】:2019-12-22 18:53:56
【问题描述】:

我想从数据库中获取数据并将其作为 JSON 发送到查看以填充数据表,但操作方法返回原始 JSON 数据。

我的行动方法

    public IActionResult GoodsList()
    {
        var goodsScale = (from g in context.Goods
                          join s in context.Scale on g.ScaleId equals s.Id
                          select new
                          {
                              id = g.Id,
                              goodsName = g.Name,
                              scale = s.ScaleName
                          });
        return Json(goodsScale);
    }

jQuery ajax:

        $.ajax({
            type: 'GET',
            dataType: 'JSON'
            url: '@Url.Action("GoodsList", "Goods")',
            success: function (data) {
                console.log("Data:", data);
                    $('#datatable').DataTable({
                    data: response,
                    columns: [
                        { 'data': 'id' },
                        { 'data': 'goodsName' },
                        { 'data': 'scale' },
                        {
                            'data': 'id',
                            'render': function (data) {
                                { return '<a  href="#" title="ویرایش" style="margin-left:10px" class="btn btn-success button"  onclick="openModal(' + data + ');"><i class="fa fa-edit"></i></a><a  href="#" title="حذف" style="margin-right:10px"  class="btn btn-danger button"  onclick="deleteUser(' + data + ')"><i class="fa fa-trash"></i></a>' }
                            },
                        }
                    ]
                })
            }
        })

返回什么:

而不是视图。

我应该提到我在我的应用程序的另一个地方使用了相同的程序,它工作正常,但我不知道这个有什么问题

【问题讨论】:

  • 你的网址是/Goods/GoodsList。所以你会得到json。
  • 我的回答解决了你的问题吗?如果是,你能accept my answer吗?
  • 丽娜!是的,你的回答解决了我的问题,但我不能接受你的回答,因为我的声誉低于 15
  • 您好@Hamid,虽然您的声誉低于15,但您可以接受答案,您可以参考此链接:meta.stackexchange.com/questions/5234/…

标签: ajax asp.net-core


【解决方案1】:

这是一个如下所示的工作演示:

1.查看(Index.cshtml):

<table id="datatable" class="display" style="width:100%">
    <thead>
        <tr>
            <th>id</th>
            <th>goodsName</th>
            <th>scale</th>
            <th>action</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <th>id</th>
            <th>goodsName</th>
            <th>scale</th>
            <th>action</th>
        </tr>
    </tfoot>
</table>
@section Scripts{
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.js"></script>
<script>
    $(document).ready(function () {
        $('#datatable').DataTable({
            ajax: {
                type: 'GET',
                dataType: 'JSON',
                url: '@Url.Action("GoodsList", "Home")'
            },
            columns: [
                { 'data': 'id' },
                { 'data': 'goodsName' },
                { 'data': 'scale' },
                {
                    'data': 'id',
                    'render': function (data) {
                        {
                            return '<a  href="#" title="ویرایش" style="margin-left:10px" class="btn btn-success button"  onclick="openModal(' + data + ');"><i class="fa fa-edit"></i></a><a  href="#" title="حذف" style="margin-right:10px"  class="btn btn-danger button"  onclick="deleteUser(' + data + ')"><i class="fa fa-trash"></i></a>'
                        }
                    },
                }
            ]
        })
    })
</script>
}

2.控制器:

public IActionResult Index()
{
    return View();
}
public IActionResult GoodsList()
{
    var goodsScale =  new List<object>
    {
        new {id = 1, goodsName= "aa",scale="a"},
        new {id = 2, goodsName= "bb",scale="b"},
        new {id = 3, goodsName= "cc",scale="c"},
        new {id = 4, goodsName= "dd",scale="d"} 
    };
    return Json(new { data=goodsScale });
}

3.Result(url应该是:/home/index):

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2019-04-15
    • 1970-01-01
    • 2012-04-15
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多