Dostęp do modelu z poziomu JSa w ASP.NET Core 1.0. DSP16 – część 13

Ten kto napisał choćby najprostszą aplikację w ASP.NET MVC wie jak można przesłać dane z kontrolera do widoku.

public IActionResult PlayerChart()
{
	var results = GetResultsForPlayer(1);
	return View(results);
}

Po stronie klienta możemy bardzo prosto wyłuskać dane, które przysłaliśmy do widoku.

@model List<PokerWebsite.Core.Domain.Result>
<html>
<head>
    <title></title>

</head>
<body>
    @Model[0].Points
</body>
</html>

Jednak moim kolejnym celem było korzystanie z modelu w JavaScripcie. Innymi słowy chciałem przekonwertować to co wysyłam z kontrolera do obiektu w JS. W MVC 5 można było to dokonać przy użyciu Json.Encode:

var data = @Html.Raw(Json.Encode(Model));

VS nie potrafił przejść obok tego kodu obojętnie. Od razu raczył mnie poinformować, że coś nie tak stosownym komunikatem:

‚IJsonHelper’ does not contain a definition for ‚Encode’ and no extension method ‚Encode’ accepting a first argument of type ‚IJsonHelper’ could be found (are you missing a using directive or an assembly reference?)

Po chwili poszukiwań na internecie StackOverFlow przyszedł z pomocą:

@model List<PokerWebsite.Core.Domain.Result>
<html>
<head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var data = @Html.Raw(@Json.Serialize(Model));
        });
    </script>
</head>
<body>

</body>
</html>

Odpalam stronę, F12 i mogę zobaczyć w debuggerze jak wygląda kod po stronie klienta:

<script type="text/javascript">
	$(document).ready(function () {
		var data = [{"ID":0,"Place":5,"Points":5,"PlayerID":0,"Player":null,"TournamentID":0,"Tournament":null},{"ID":0,"Place":3,"Points":15,"PlayerID":0,"Player":null,"TournamentID":0,"Tournament":null},{"ID":0,"Place":2,"Points":25,"PlayerID":0,"Player":null,"TournamentID":0,"Tournament":null}];
	});
</script>

Teraz w łatwy sposób w JS można wyłuskać dane:

<script type="text/javascript">
	$(document).ready(function () {
		var data = @Html.Raw(@Json.Serialize(Model));
		var points = data[0].Points;
	});
</script>

Zmienna points przyjmie wartość 5.

Leave a Comment Cancel Reply