How do you handle Javascript on ASP.Net MVC Website – ASP.Net MVC 5

最近開始再次學習ASP.Net MVC 5
科技推出得太快..很多東西都想學..
所以常常都被不同的東西分了心

開始寫ASP.Net MVC 5的時候..嘗試做cshtml上使用JQuery做一些東西
我的程式碼如下:
HTML

[html]
<h2 id="header">Javascript Section Demo – Failed</h2>

<div id="result">
Original Div Content
<p>
Wait for Javascript to Load
<p>
</div>
[/html]

Javascript

[javascript]
<script>
$(document).ready(function () {
$("#result").html("Javascript Excuted");
$("#header").html("Javascript Section Demo – Success");
});
</script>
[/javascript]

誰不知..當我執行時出現了以下的錯誤..
Uncaught ReferenceError: $ is not defined
ASP.Net MVC - Uncaught ReferenceError: $ is not defined

Failed Demo:
http://sharechiwaimvccloud.apphb.com/JsDemo/MvcJsScriptInitSample

在想為什麼他認不了JQuery的呢?
原來ASP.Net MVC 新增了一個 SectionScripts的Tag
這個可以增加網頁的效能..
通常寫網頁的都建議把所有和Rendering沒有關係的程式碼都放在網頁的底部..
這可以令到網頁顯然得更快

解決方法
我們只要加所有和Javascript 相關係程式碼放進這個
Section scripts tag 內便可以了
E.G.

[csharp]

@section Scripts
{
<script>
$(document).ready(function () {
$("#result").html("Javascript Excuted");
$("#header").html("Javascript Section Demo – Success");
});
</script>
}

[/csharp]

Javascript working on ASP.Net MVC

Working Demo:
http://sharechiwaimvccloud.apphb.com/JsDemo/MvcJsScriptInitSample?isSuccess=true

Hope you find it useful

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.