在 ASP.NET 视图中显示 json 对象列表

Question

我正在编写一个电影租赁程序。 我想在浏览器中查看当前客户租借的电影列表。 我为每个实体添加了一个“显示租借的电影”按钮，“显示”函数成功返回数组中的所有电影（见屏幕截图） 现在我想在行表中显示数组中的所有 FilmNames，就像文本一样。 我该怎么做？ 谢谢 ！

这里是客户控制器

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using MoviePro.Models;
using System.Data.Entity;

namespace MoviePro.Controllers
{
    public class CustomersController : Controller
    {
        // GET: Customers
        public ActionResult Index()
        {
            return View();
        }

        public ActionResult loaddata()
        {
            MyDatabaseEntities3 dc = new MyDatabaseEntities3();

            var customers = dc.Customers.Select(c => new
            {
                c.CustomerName,
                c.Phone,
                c.CustomerId,
            });
            return Json(new { data = customers }, JsonRequestBehavior.AllowGet);

        }

        public ActionResult ShowFilemsByCust(int id)
        {
            MyDatabaseEntities3 dc = new MyDatabaseEntities3();
            var query = (from f in dc.Films
                         join cf in dc.CustomersFilms on f.FilmId equals cf.FilmId
                         where cf.CustomerId == id
                         select new
                         {
                             filmName = f.FilmName
                         }).ToList();
            return Json(new { data = query }, JsonRequestBehavior.AllowGet);
        }

这里是Customers.cshtml

    @{
    ViewBag.Title = "Index";
}
<a class="btn btn-primary" style="margin-bottom:10px" onclick="PopupForm('@Url.Action("AddOrEdit","Customers")')"><i class="fa fa-plus"></i> New Customer</a>

<h2>Customers</h2>

<div style="width:90%; margin:0 auto;">
    <table id="myTable">
        <thead>
            <tr>
                <th>Customer Name</th>
                <th>Phone</th>
                <th></th>
            </tr>
        </thead>
    </table>
</div>
<style>
    tr.even {
        background-color: #F5F5F5;
    }
</style>


@* Load datatable css *@
<link href="//cdn.datatables.net/1.10.9/css/jquery.dataTables.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
@* Load datatable js *@
@section Scripts{
    <script src="//cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.15/js/dataTables.bootstrap.min.js"></script>

    <script>
        var Popup, dataTable;
        $(document).ready(function () {
            dataTable= $('#myTable').DataTable({
                "ajax": {
                    "url": "/Customers/loaddata",
                    "type": "GET",
                    "datatype": "json"
                },
                "columns" : [
                       { "data": "CustomerName", "autoWidth": true },
                        { "data": "Phone", "autoWidth": true },

                        {"data":"CustomerId" , "render" : function (data) {
                            return "<a class='btn btn-default btn-sm' onclick=PopupForm('@Url.Action("AddOrEdit","Customers")/" + data + "')><i class='fa fa-pencil'></i> Edit</a><a class='btn btn-danger btn-sm' style='margin-left:2px' onclick=Delete(" + data + ")><i class='fa fa-trash'></i> Delete</a><a class='btn btn-default btn-sm' style='margin-left:2px'  onclick=Show(" + data + ")>Show Rented Movies</a>";
                        },
                            "orderable": false,
                            "searchable": false,
                            "width": "150px"
                        }
                ],
                "language": {

                    "emptyTable": "No data found, Please click on <b>Add New</b> Button"
                }
            });
        });


        function Show(id) {
                $.ajax({
                    type: "POST",
                    url: '@Url.Action("ShowFilemsByCust", "Customers")/' + id,
                    success: function (data) {
                        /*
                        if (data.success) {
                            dataTable.ajax.reload();
                            $.notify(data.message, {
                                globalPosition: "top center",
                                className: "success"
                            })
                        }*/
                    }
                });
        }

    </script>
}

Answer 1

我认为您应该转到 customerMovie 页面，而不是多用途同一个网格。