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>
    }

Can you show your API code ("TimerStopped")?

Alex - Tin Le
– Alex - Tin Le

2020-03-11 16:02:34 +00:00
Commented Mar 11, 2020 at 16:02 — Alex - Tin Le
– Alex - Tin Le, Commented Mar 11, 2020 at 16:02

Fei Han · Accepted Answer · 2020-03-12 03:50:42Z

2

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;
    });

answered Mar 12, 2020 at 3:50

Fei Han

28.1k1 gold badge35 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

OEZ BRO Over a year ago

To set the PropertyNamingPolicy to Null fixed it. Thank you very much! <3

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related