Using bool from model in jQuery

Question

I have jQuery function in my view.

And variable in my view model:

public bool pageChanged { get; set; }

Function:

$(document).ready(function () {
    if (@Model.pageChanged == true) {
        $('html, body').animate({
                scrollTop: $("#picture_section").offset().top
        }, 2000);
    }
});

Without if statement it works fine. But if I want to compare bool value of my model it doesn't work. I tried alert("@Model.pageChanged") and it showed right value.

So I tried

if(@Model.pageChanged) {
}

if(@Model.pageChanged == true) {
}

But it didn't work. How could I change the if statement to work? Is there problems with types?

Thank you for solving issue.

If you want to get an mvc object in jquery, use `'@Model.pageChanged'` — Carsten Løvbo Andersen, Aug 25 '17 at 12:50
`if (@Html.Raw(Json.Encode(@Model.pageChanged )) == true) { ... }` (or just `if (@Html.Raw(Json.Encode(@Model.pageChanged))) { ... }` — , Aug 25 '17 at 12:53

score 3 · Accepted Answer · answered Aug 25 '17 at 12:57

So there are boundaries between the client and server that are potentially in play. The model code within a view, in the context you have it, essentially determines what gets rendered to the view. So if you have this:

if (@Model.pageChanged == true) {

The server-side code renders the value of pageChanged to the client, except I found there are issues with rendering false. A common workaround was:

if (@Model.pageChanged.ToString().ToLower() == true) {

Which will render:

if (true == true) {

OR

if (false == true) {

So you don't necessarily need the "== true" part.

If you want to control what JS actually gets rendered, you can do:

$(document).ready(function () {
    @if (Model.pageChanged == true) {
        <text>
         $('html, body').animate({
            scrollTop: $("#picture_section").offset().top
         }, 2000);
        </text>
    }
});

This text:

@if (Model.pageChanged == true) {

Becomes a server-side evaluation and determines whether the jQuery animate statement event renders at all, based on the value of pageChanged.

Thank you. It solved it, but why there must be the marks? Without them it didn´t work. — Michal Fiala, Aug 25 '17 at 13:05

score 0 · Answer 2 · answered Aug 25 '17 at 13:15

0

Or you could do something like this:

if ("@Model.pageChanged" == "True") {...}

Here is the link to explain why "True" not "true": Why does Boolean.ToString output "True" and not "true"

answered Aug 25 '17 at 13:15

oopsdazie

716
1
7
22

Using bool from model in jQuery

2 Answers2