的Javascript不是在MVC Razor視圖運行

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#

編輯：

的頁面看起來像這樣

<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

我不知道你在哪裏實際調用您定義的功能。它的聲明之後

嘗試調用如下：

<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

你呈現標記得到一看之後，但是也有一些可能導致此問題的幾件事情：

• 重複id屬性 - 該id屬性根據定義是唯一的，因此當您嘗試使用document.getElementById()函數來定位它時，它可能會導致一些奇怪的行爲。
• 複製函數定義 - 既然你也創建在局部視圖功能，您將有相同的定義，這將繼續超越彼此的倍數。

因爲所有你正在做的一個元素是否應該被隱藏或設置沒有，你可以考慮任何明示不渲染根據您的布爾屬性的元素，你可以使用一個三元語句來渲染基於適當的風格你的模型：

<!-- 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函數。