Javascript, Razor, Asp.Net Core: View.Element is not defined

Question

In the Javascript of my View of my Asp.Net Core MVC is "View.BestritteneRunden" undefined. It worked everything well before I migrated it from Asp.Net MVC to Asp.Net Core MVC. The things that I found by research have killed my UI Elements. The application should count up the value on the view after the timer has expired. Could someone help me?

Here is my a Snippet from my View:

@using PlaudertischSoftware.Models;
@using DevExtreme.AspNet.Mvc;
@using DevExpress.Web;
@using DevExtreme.AspNet.Data;

    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    @model PlauderViewModel
    @section Styles {
        @*<link href="@Url.Content("~/Content/design.css")" rel="stylesheet" type="text/css" />*@
        <link href="~/css/design.css" rel="stylesheet" />
    }
    @{
        ViewBag.Title = "SpielView";
    }
    @using (Html.BeginForm("SpielView", "Plauder", FormMethod.Post))
    {
    <body style="z-index:-5">

        <div class="progress-info">
            <br />
            <span>Runde: <input id="txtRunde" name="BestritteneRunden" type="text" value="@Model.BestritteneRunden" style="width: 15px; border-width: 0px; background:none" />von 10</span>
            <br />
            Übrige Zeit 00:00:<span id="timer">10</span>
        </div>

        <div id="progress-info">
            @(Html.DevExtreme().ProgressBar()
                .ID("progressBarStatus")
                .Min(0)
                .Max(100)
                .Width("100%")
                .Height(50)
                .StatusFormat(new JS("progressBar_statusFormat"))
                .OnComplete("progressBar_onComplete")
                .OnValueChanged("progressBar_valueChanged")
            )
            <div class="form" style="margin-top:-25px">
                @(Html.DevExtreme().Button()
                    .ID("progress-button")
                    .Text("Starten")
                    .Width(120)
                    .OnClick("button_onClick")
                )
            </div>
        </div>
    </body>

        <script>
            var drehen = @Model.Drehrichtung;

            var seconds = 10,
                inProgress = false;

            window.intervalId = window.intervalId || null;

            function timer(){
                seconds--;
                setCurrentStatus();
                if (seconds === 0) {
                    clearInterval(intervalId);
                    seconds = 10;
                    return;
                }
            }

            function setCurrentStatus() {
                $("#progressBarStatus").dxProgressBar("option", "value", (10 - seconds) * 10);
                $("#timer").text(("0" + seconds).slice(-2));
            }

            function progressBar_statusFormat(value) {
                return;
            };

            function progressBar_onComplete(e) {
                inProgress = false;
                $("#progress-button").dxButton("option", "text", "Stoppen");

                e.element.removeClass("complete");


                //Daten zum Controller senden und auswerten
                $.ajax({
                    type: "POST",
                    url: "TimerStopped",
                    dataType: "json",
                    data: $('form').serialize(),
                    success: function (view) {

                $("#txtRunde").attr("value", view.BestritteneRunden);


                        if (view.BestritteneRunden < 11) {
                            button_onClick(e);
                        }
                        else {
                            location.replace("AuswertungsView");
                        }
                        $("#slider-value").dxNumberBox("instance").option("value", 0);},
                    error: function (result) {
                        alert(result.text);
                    }
                });
            };

            function button_onClick(e) {
                    clearInterval(intervalId);

                    $("#progressBarStatus").removeClass("complete");

                    if (inProgress) {
                        e.component.option("text", "Fortsetzen");
                        clearInterval(intervalId);
                    } else {
                        e.component.option("text", "Stoppen");
                        setCurrentStatus();
                        intervalId = setInterval(timer, 1000);
                    }

                inProgress = !inProgress;
            };

        </script>
    }

Answer 1

In the Javascript of my View of my Asp.Net Core MVC is "View.BestritteneRunden" undefined.

The issue might be caused by using camel case for all JSON property names.

If you check the returned data view , it may look like bestritteneRunden: 10 , not BestritteneRunden: 10 .

To fix it, you can modify js code with view.bestritteneRunden .

$("#txtRunde").attr("value", view.bestritteneRunden);

Or set PropertyNamingPolicy to null .

services.AddControllersWithViews()
    .AddJsonOptions(options =>
    {
        options.JsonSerializerOptions.PropertyNamingPolicy = null;
    });

Javascript, Razor, Asp.Net Core: View.Element is not defined

Question

1 answers

solution1
2 ACCPTED 2020-03-12 03:50:42

Javascript, Razor, Asp.Net Core: View.Element is not defined

Question

1 answers

solution1 2 ACCPTED 2020-03-12 03:50:42

solution1
2 ACCPTED 2020-03-12 03:50:42