Javascript не работает в MVC Razor view

Question

Я новичок в javascript и не могу понять, почему это не устанавливает видимость изображения в нормальное состояние, когда IsImportant истинно. Я могу увидеть, проверив страницу, что инструкция if заполняется с помощью true или false, но это не влияет на видимость.

Любая помощь приветствуется, спасибо

@using DomainLayer.DTOs 
 
@model MessageDto 
 

 
<script type="text/javascript"> 
 
    function setImportantFlag() 
 
    { 
 
     if (@Json.Encode(Model.IsImportant)) 
 
     { 
 
      document.getElementById('importantFlag').style.display = 'normal'; 
 
     } 
 
    } 
 
</script> 
 

 
<img id="importantFlag" src="~/Images/important.png" style="display:none; height:100px; width:100px" /> 
 
@Html.Encode(Model.Title)<br /> 
 
@Html.Encode(Model.Author), @Html.Encode(Model.PublishDate)<br /> 
 
@Html.Encode(Model.Body) <br /> 
 
<br />

http://stackoverflow.com/questions/ask#

Edit:

страница выглядит следующим образом

<script type="text/javascript"> 
 
    function setImportantFlag() 
 
    { 
 
     if (false) 
 
     { 
 
      document.getElementById('importantFlag').style.display = 'normal'; 
 
     } 
 
    } 
 

 
    setImportantFlag(); 
 
</script> 
 

 
<img id="importantFlag" src="/Images/important.png" style="display:none; height:100px; width:100px" /> 
 
Big ol deibufouebwf<br /> 
 
, 01/01/0001 00:00:00<br /> 
 
<br /> 
 
<br /><script type="text/javascript"> 
 
    function setImportantFlag() 
 
    { 
 
     if (true) 
 
     { 
 
      document.getElementById('importantFlag').style.display = 'normal'; 
 
     } 
 
    } 
 

 
    setImportantFlag(); 
 
</script> 
 

 
<img id="importantFlag" src="/Images/important.png" style="display:none; height:100px; width:100px" /> 
 
News article one<br /> 
 
Author One, 13/06/2016 21:49:04<br /> 
 
Well if it isn&amp;#39;t body one! <br /> 
 
<br />

Answer 1

Я не вижу, где вы на самом деле называете функцию, которую вы определили.

Try вызов после его заявлений следующим образом:

<script type="text/javascript"> 
    // Declare the function 
    function setImportantFlag(){ 
     if (@Json.Encode(Model.IsImportant)){ 
      document.getElementById('importantFlag').style.display = 'normal'; 
     } 
    } 
    // Actually call the function 
    setImportantFlag(); 
</script> 

UPDATE

После того, как смотреть на вашу оказанную разметке, есть несколько вещей, которые, вероятно, в результате чего этот вопрос:

• Duplicate id Атрибуты -Атрибутуникален по определению, поэтому, когда вы пытаетесь настроить таргетинг с помощью функции document.getElementById(), это может вызвать некоторое причудливое поведение.
• Duplicate Function Definitions - Поскольку вы также создаете функцию в частичном представлении, у вас будет несколько одинаковых определений, которые будут продолжать переопределять друг друга.

Поскольку все, что вы делаете настройки, если элемент должен быть скрыт или нет, вы могли бы рассмотреть либо явно не оказывающего элемент, основанный на вашем Логическое свойство, можно использовать трехкомпонентную заявление, чтобы сделать соответствующий стиль, основанный на Ваша модель:

<!-- Use a class to avoid duplicate id attributes --> 
<img class="importantFlag" src="~/Images/important.png" style="display:@(Model.IsImportant ? "normal" : "none"); height:100px; width:100px" /> 

Это обработало бы отображение элемента, если бы оно было важно и спрятало его в противном случае. Это также позволило бы избежать любых проблем с дублирующимися атрибутами id и полностью удалить любые функции Javascript.