我应该怎么做才能通过 Web API 多实体结果集到 MVC5 controller，其中 mvc 控制器抛出“JsonSerial”异常？

Question

我正在写一个简单的 ASP.NET MVC5 + Web API 网站输入教程视频（在“TutorialSeries”表中）和作者（在“Authors”表中） Authors 是主键表。 我想要一个用于输入和显示两个表的数据的视图页面。 因为我不希望任何多余的条目意外输入到我的数据库中，所以我使用 Web API 显示我在文本框中输入的任何 Tut 系列是否已经输入。 我创建了一个 ViewModel 来包含“TutorialSeries”和“Authors”实体。

So, what I did is, create a web api controller that sends the muti-result set of tutorials and authors tables in the database to the mvc5 controller, which in turn passes that data to the view in question.

但是每当代码到达 Web api controller 时，它就会抛出“JsonSerializationException”

代码如下截图所示： -

#1）实体 - 教程视频和作者：

public partial class TutorialVideo
{
    [Key]
    public int TutId { get; set; }

    [Required]
    public int AuthId { get; set; }

    [Required]
    public string TutorialName { get; set; }

    public virtual Author Author { get; set; }
}


public partial class Author
{
    [System.Diagnostics.CodeAnalysis.SuppressMessage("Microsoft.Usage", "CA2214:DoNotCallOverridableMethodsInConstructors")]
    public Author()
    {
        TutorialVideos = new HashSet<TutorialVideo>();
    }

    [Key]
    public int AuthID { get; set; }

    [Required]
    [StringLength(50)]
    public string AuthorName { get; set; }

    [System.Diagnostics.CodeAnalysis.SuppressMessage("Microsoft.Usage", "CA2227:CollectionPropertiesShouldBeReadOnly")]
    public virtual ICollection<TutorialVideo> TutorialVideos { get; set; }
}

#2)DbContext：在此处查看 DbContext 代码

public partial class TutsDbContext : DbContext
{
    public TutsDbContext()
        : base("name=TutsDbContext")
    {
    }

    public virtual DbSet<Author> Authors { get; set; }
    public virtual DbSet<TutorialVideo> TutorialVideos { get; set; }

    protected override void OnModelCreating(DbModelBuilder modelBuilder)
    {
        modelBuilder.Entity<Author>()
            .HasMany(e => e.TutorialVideos)
            .WithRequired(e => e.Author)
            .WillCascadeOnDelete(false);
    }
}

#3)WebApi controller：参见 Web API 代码参见 ZC6E190B284633C48E3CE'E API

这个 Web API 似乎返回结果集绝对没问题，我检查过

public class WebApiTutorialsController : ApiController
{
    public IHttpActionResult Get()
    {
        TutsDbContext db = new TutsDbContext();

        /* HERE I'M RETURNING MULTIPLE RESULTS, & THE WEB API RETURNS THESE RESULTS WITHOUT A PROBLEM */
        var result = new { TutorialVideo = db.TutorialVideos.ToList(), Author = db.Authors.ToList() };

        return Ok(result);  /* AGAIN NO PROBLEM HERE */
    }
}

#4)TutorialVideos & Authors 的 ViewModel：在此处查看 ViewModel 代码

public class ViewModelTutorialsAndAuthors
{
    public TutorialVideo tutorialVideo { get; set; }
    public Author author { get; set; }
}

#5)MVC5 controller：在此处查看 MVC controller 代码

在下面的这段代码中抛出了异常

public class TutorialVideosController : Controller
{
    private TutsDbContext db = new TutsDbContext();

    public ActionResult GetTutorialsAndAuthors()
    {
        IEnumerable<ViewModelTutorialsAndAuthors> obj = null;
        HttpClient hc = new HttpClient();
        hc.BaseAddress = new Uri("http://localhost:12491/api/");
        //var tutorialSerieses = db.TutorialSerieses.Include(t => t.Torrent);

        var consumeApi = hc.GetAsync("WebApiTutorials");
        consumeApi.Wait();

        var readData = consumeApi.Result;

        if (readData.IsSuccessStatusCode)
        {
            var dataDisplay = readData.Content.ReadAsAsync<IList<ViewModelTutorialsAndAuthors>>();

            dataDisplay.Wait();   //Here is where "JsonSerializationException: Cannot deserialize the current JSON object (e.g. {"name":"value"}) into type 'System.Collections.Generic.IList`1"

            obj = dataDisplay.Result;
        }

        return View(obj);
    }
}

上面代码中抛出了异常

#6)MV5视图：查看.cshtml

在此处输入图像描述

 @model IEnumerable<TutsAndAuthors.Models.ViewModelTutorialsAndAuthors> @{ ViewBag.Title = "GetTutorialsAndAuthors"; } <br /> <br /> <center> <form action="TutorialVideos/InsertTutorialsAndAuthors" method="post"> <table class="table" border="1"> <tr> <td>Enter Tutorial Name:</td> <td><input id="tutorialNameText" name="tutorialVideo.TutorialName" placeholder="Enter Tutorial Name..." /></td> </tr> <tr> <td>Enter Author Name:</td> <td><input id="authorNameText" name="author.AuthorName" placeholder="Enter Author Name..." /></td> </tr> <tr> <td></td> <td><input id="submitBtn" type="submit" value="Submit Tutorial and Author" /></td> </tr> </table> </form> </center> <table class="table" id="tutsAuthors"> <tr> <th> @Html.DisplayNameFor(model => model.tutorialVideo.TutorialName) </th> <th> @Html.DisplayNameFor(model => model.author.AuthorName) </th> <th></th> </tr> @foreach (var item in Model) { <tr> <td> @Html.DisplayFor(modelItem => item.tutorialVideo.TutorialName) </td> <td> @Html.DisplayFor(modelItem => item.author.AuthorName) </td> @*<td> @Html.ActionLink("Edit", "Edit", new { id=item.TutId }) | @Html.ActionLink("Details", "Details", new { id=item.TutId }) | @Html.ActionLink("Delete", "Delete", new { id=item.TutId }) </td>*@ </tr> } </table> <script src="~/Scripts/jquery-3.6.0.min.js"></script> <script> $("#tutorialNameText").on("keyup", function () { var searchTutSer = $(this).val(); $("#tutsAuthors tr").each(function (result) { if (result.== 0) { var id = $(this):find("td.nth-child(1)");text(). if (id.indexOf(searchTutSer).== 0 && id.toLowerCase().indexOf(searchTutSer;toLowerCase()) < 0) { $(this).hide(); } else { $(this);show(); } } }); }); </script>