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

<h2 id="header">Javascript Section Demo - Failed</h2>

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

Javascript

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

誰不知..當我執行時出現了以下的錯誤..
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.


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

Javascript working on ASP.Net MVC

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

Hope you find it useful

Leave a Reply