AJAX call in a view page in .NET Core not formatted properly for data display

Question

I have the following GetTvShow controller that is call a JSON GetALLMovie method. My issue is in my view page when I'm trying to display my data. I'm getting the following error:

Message port closed before a response was received.

Not sure what I'm missing. Any tips will be greatly appreciated.

ACTION RESULTS:

public ActionResult GetTvShow()
    {
        GetAllMovie();
        return View();
    }

     public JsonResult GetAllMovie()
    {
        List<TvShow> TvShowList = new List<TvShow>();
        var constr = "Data Source = ";
        using (SqlConnection con = new SqlConnection(constr))
        {
            SqlCommand cmd = new SqlCommand("spGetAllTvShow", con);
            cmd.CommandType = CommandType.StoredProcedure;
            con.Open();

            SqlDataReader rdr = cmd.ExecuteReader();
            while (rdr.Read())
            {
                TvShow show = new TvShow();
                show.Id = Convert.ToInt32(rdr["Id"]);
                show.Title = rdr["Title"].ToString();
                show.Rating = Convert.ToDecimal(rdr["Rating"]);
                TvShowList.Add(show);
            }
        }

        string jsonValue = JsonConvert.SerializeObject(TvShowList);
        return Json(jsonValue, new Newtonsoft.Json.JsonSerializerSettings());

    }

View page: This is where I'm having issue getting my data back.

 @{
ViewData["Title"] = "GetTvShow";
}
<!DOCTYPE html>
<h1>AddShow</h1>
<html>
<head>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>


<script type="text/javascript">
    $(document).ready(function () {
        $.ajax({
            url: 'GetTvShow',
            dataType: "json",
            method: 'post',
            success: function (data) {
                var employeeTable = $('#tblEmployee tbody');
                employeeTable.empty();
                $(data).each(function (index, emp) {
                    employeeTable.append('<tr><td>' + emp.Id + '</td><td>'
                        + emp.Title + '</td><td>'
                       
                        + emp.Rating + '</td><td>'
                       
                    );
                });
            },
            error: function (err) {
                console.log(err);
                console.log(err.responseText);
                alert(err.responseText);
            }
        });
    });
</script>

</head>
<body>
<form id="form1" runat="server">
    <div class="container">
       
        <table id="tblEmployee" class="table table-bordered">
            <thead class="bg-primary text-white">
                <tr>
                    <th>Id</th>
                    <th>Title</th>
                    <th>Rating</th>
                    <th>Genre</th>
                    <th>ImdbUrl</th>
                    <th>ImageUrl</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>
 </form>
 </body>

Error The message port was closed before a response received. I don't seem to be able to see what I'm missing in my ajax call..

Uncaught Error: Syntax error, unrecognized expression: 
[{"Id":1,"Title":"ttr"},{"Id":2,"Title":"ssssss"},{"Id":3,"Title":"Test"}, 
{ "Id":4,"Title":"TestTest"},{"Id":5,"Title":"tets"}, 
{"Id":6,"Title":"YvesTest"}]
at Function.oe.error (jquery.min.js:2)
at oe.tokenize (jquery.min.js:2)
at oe.select (jquery.min.js:2)
at Function.oe [as find] (jquery.min.js:2)
at w.fn.init.find (jquery.min.js:2)
at new w.fn.init (jquery.min.js:2)
at w (jquery.min.js:2)
at Object.success (GetTvShow:62)
at u (jquery.min.js:2)
at Object.fireWith [as resolveWith] (jquery.min.js:2)

Does this answer your question? [How to fix 'Unchecked runtime.lastError: The message port closed before a response was received' chrome issue?](https://stackoverflow.com/questions/54126343/how-to-fix-unchecked-runtime-lasterror-the-message-port-closed-before-a-respon) — godot, Feb 07 '21 at 19:44

score 0 · Answer 1 · answered Feb 07 '21 at 19:49

You have to use ajax not for GetTvShow but for GetAllMovie.So fix your ajax url and remove post metod since you only get your data:

$.ajax({
            url: '/GetAllMovie',
            success: function (data) 
            ......your code

but I think you have to fix your action header too:

  [Route("~/GetAllMovie")]
  public JsonResult GetAllMovie()
    {
your code
}

score 0 · Answer 2 · answered Feb 07 '21 at 20:02

In GetTvShow there is no reason to call GetAllMovie as you will do it later on the view as AJAX call, this one is redundant:

public ActionResult GetTvShow()
{
    //GetAllMovie();
    return View();
}

In GetAllMovie there is no need to serialize your list. When you return Json, system does it for you already. It should be simple:

return Json(TvShowList);

In AJAX call you call wrong action, instead of GetTvShow you should call GetAllMovie:

$.ajax({
    url: 'GetAllMovie',
    dataType: "json",
    ......

AJAX call in a view page in .NET Core not formatted properly for data display

2 Answers2