jQuery Master-Detail範例

相信Master Detail是很常用的架構
呈現方式百百種
我大多會用fanybox或window.open
因為做起來相當簡單還有
昨天看到一個相當簡單又實用的範例分享給需要的人
點我前往

jQuery go to Top Bottom PageUp PageDown

又來念一下做post機上用網頁系統真麻煩
但還是要克服，用法很簡單
top

$('#top').click(function () {
     $('body,html').animate({ scrollTop: 0 }, 300);
});

bottom

$('#bottom').click(function () {
     $('body,html').animate({ scrollTop: $(document).height() }, 300);
});

PageDown

$('#PageDown').click(function () {
     $('body,html').animate({ scrollTop:  $(window).scrollTop() + 300 }, 300);
});

PageUp

$('#PageUp').click(function () {
     $('body,html').animate({ scrollTop:  $(window).scrollTop() - 300 }, 300);
});

FancyBox 解決gallery模式時next prev檔到scroll bar

點我進入
這個解法官方就有摟
註記一下讓自己不會忘記修改css

.fancybox-nav {
 position: absolute;
 top: 0; 
 /*width: 40%;Marco*/
 width: 60px;
 height: 100%;
 cursor: pointer;
 text-decoration: none;
 background: transparent url('blank.gif'); /* helps IE */
 -webkit-tap-highlight-color: rgba(0,0,0,0);
 z-index: 8040;
}

.fancybox-prev {
 /* left: 0;Marco */
 left: -60px;
}

.fancybox-next {
   /* right: 0; Marco */
  right: -60px;
}

Google Chrome Scroll Bar 變成windows 7 Scroll Bar

最近也在post機上的網頁
但是post機相當舊了裝IE8是可以跑但超慢
於是就找了Chrome來裝但Post機上用網頁操作是有點不方便
尤其是chrome scroll bar相當窄
我以有時會點不到還好找到將Chrome scroll bar變成win 7的外掛程式
使用相當簡單
1.Win7 Scrollbars
2.點 + ADD or + 免費
3.關掉Chrome再開就好
How to restore the vertical scroll bar arrows in Google Chrome

jQueryUI Virtual Keyboard

最近有遇到在post機上使用網頁的案子
因為post上只有簡單的鍵盤所以只能像ktv一樣輸入簡單的字
但網頁的話就不像ap那麼簡單
還好找到了一個不錯的jQuery UI Virtual Keyboard
這樣可以防者User輸入些不必要的字元
但中文的化可能就...
使用相當簡單
加入
1.jquery參考
2.加入jquery ui參考
3.加入Virtual Keyboard官方參考

Bootstrap Templates&plugins

bootstrapzero
50 Must-have plugins for extending Twitter Bootstrap
bootswatch 70+ Free Bootstrap HTML5 Website Templates To Be continued...

jQuery 抓取table tr td 的值

很簡單的語法相當實用

         $(function () {
             $('table > tbody > tr').each(function () {
                 var mWord = $.trim($(this).find("td:eq(1)").text()); //1是抓取第二欄的文字
                
             });
         });     

Asp.net ListView Button RowIndex

先在ListView中放一個Button

寫code

        protected void Button1_Click(object sender, EventArgs e)
        {            
            ListViewItem listviewitem = (ListViewDataItem)((Button)sender).NamingContainer;
            int RowIndex = listviewitem.DataItemIndex;//第幾的RowIndex 從0開始喔
           
        }

以上就知道是第幾筆的Button
很實用的招式

Bootstrap v3.1.0範例

最近很夯的東西
可以幫助程式設計師在沒有美編時也能做出美美的網站
官網
懶的每次都寫
所以先包好直接copy用
內含
modernizr-2.6.2.js
jquery-1.10.2.js
bootstrap.js
bootstrap-select.js
respond.js

點我下載

Asp.net MVC NuGet安裝指定套件的版本(17)

VS有個很強的功能就是NuGet相信很多人都知了就不再多說
至於沒用過的可試試，只要在專案上按下右鍵如下圖及可搜尋及安裝

但像jQuery有很多版本確不想要安裝到最新的版本那怎麼辦?
到jquery點選下面的版本
會有一行 PM > Install-Package jQuery -Version 1.10.2
到VS > 工具 > 程式庫套件管理員 >套件管理主控台 > 點一下就會出現主控台視窗 將剛的那一樣貼上執行即可

未分類 Css 好看的Loading效果

目前共有八種均有Source可參考相當好用
點我前網

Asp.net jQuery+DropDownList連動後出現System.Web.HttpUnhandledException

這其實只是不了解jquery及asp.net postback的問題
有兩個DropDownList，Master及Detail
下拉Master連動Detail一般來寫程式碼都會如下

 $(function () {
    $("#<%= Master.ClientID%>").change(function () {
            var q = $("#<%= Master.ClientID%>").val();
                $.ajax({
                    url: '/get.ashx',
                    type: 'post',
                    async: true,
                    data: { q: q },
                    success: function (data) {
                        $('#<%= Detail.ClientID%>').empty();
                        var myarray = $.parseJSON(data);
                        $.each(myarray, function (i, item) {
                            var option = "<option value='" + myarray[i].value + "'>" + myarray[i].txt + "</option>";
                            $('#<%= Detail.ClientID%>').append(option);
                        });
                    }
                });
            });
  });

上面程式碼看似無誤，但在PostBack後就會出現System.Web.HttpUnhandledException
因為PostBack後會產生畫面
放在$(function (){});裡面又會跑一次但程式而此時就會造成錯誤
所以必需將select change放於jquery function外

 $(function () {
    
  });

$("#<%= Master.ClientID%>").change(function () {
            var q = $("#<%= Master.ClientID%>").val();
                $.ajax({
                    url: '/get.ashx',
                    type: 'post',
                    async: true,
                    data: { q: q },
                    success: function (data) {
                        $('#<%= Detail.ClientID%>').empty();
                        var myarray = $.parseJSON(data);
                        $.each(myarray, function (i, item) {
                            var option = "<option value='" + myarray[i].value + "'>" + myarray[i].txt + "</option>";
                            $('#<%= Detail.ClientID%>').append(option);
                        });
                    }
                });
            });

Asp.net 系統收到多個不同的 Content-Disposition 標頭。我們不允許這種情形，這是為了避免遭到 HTTP 回應分割攻擊。

今天使用者遇到了這個問題
系統收到多個不同的 Content-Disposition 標頭。我們不允許這種情形，這是為了避免遭到 HTTP 回應分割攻擊。
看了一下程式

 Response.AddHeader("Content-Disposition", string.Format("attachment; filename={0}", mFileName));

 Response.AddHeader("Content-Disposition", string.Format("attachment; filename=\"{0}\"", mFileName));

多加了分雙引號這樣輸出的標頭才會指定檔名是什麼減少攻擊

IIS 回收時間(IIS Session Time Out)

很難得的遇到一次User全部被系統踢出去的經驗
所以判斷是IIS自己踢的
找了一下設定在
IIS > 應用程式集區 > 集區名稱上右鍵 > 進階設定
如圖

固定時間間隔(分鐘):預設是1740改成0就不會回收了

Javascript 秒數轉時分秒

最近常在網頁上用到
尤其是撥html5 video

   function formatSecond(secs) {          
            var hr = Math.floor(secs / 3600);
            var min = Math.floor((secs - (hr * 3600)) / 60);
            var sec = parseInt( secs - (hr * 3600) - (min * 60));

            while (min.length < 2) { min = '0' + min; }
            while (sec.length < 2) { sec = '0' + sec; }
            if (hr) hr += ':';
            return hr + min + ':' + sec;

        }

參考網址 點我

Asp.net MVC 必裝NuGet套件Elmah(16)

先廢話一下
今天不是實作了，完成前面幾項功能其實就差不多可以做出一個基本網站了
但這樣還不夠尤其實是錯誤訊息相當重要
因為程式總是會有例外
所以必需靠這些訊息來判斷那裡有問

---

安裝NuGet套件方式 點我前往
相關教學 點我前往
點我前往
其實就幾個重點
1.elmah.mvc.route最好設定不要使用預設
2.如果開啟遠端如下，一定要設定elmah.mvc.requiresAuthentication

  <elmah>
    <security allowRemoteAccess="1" />
  </elmah>

3.以下是幾個設定在相關教學裡有保哥說的很詳細

  <appSettings>   
     <add key="elmah.mvc.disableHandler" value="false" />
    <add key="elmah.mvc.disableHandleErrorFilter" value="false" />
    <add key="elmah.mvc.requiresAuthentication" value="true" />
    <add key="elmah.mvc.allowedRoles" value="*" />
    <add key="elmah.mvc.route" value="errorelmah" />
</appSettings>

參考網址
點我前往
點我前往

Asp.net MVC 實作抓最大排序及繫結的方法(15)

先廢話一下
其實很簡單但是有時會無法繫結

---

Controller部份先

//抓最大值
int Sort =  (from u in db.TabContent 
  where u.TabID==tabid
  select u.Sort).DefaultIfEmpty().Max(x => x == null ? 0 : x);
ViewBag.Sort = Sort + 1;

以上這部份很簡單沒問題吧

        <div class="form-group">
            @Html.LabelFor(model => model.Sort, new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.TextBoxFor(model => model.Sort)
                @Html.ValidationMessageFor(model => model.Sort)
            </div>
        </div>

程式碼自動產生會這樣
但如何修改成能抓ViewBag

        <div class="form-group">
            @Html.LabelFor(model => model.Sort, new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.TextBox("Sort",null, new { @class = "form-control" })
                @Html.ValidationMessageFor(model => model.Sort)
            </div>
        </div>

改成用弱型別是一個方法記得"Sort"這樣就能抓到ViewBag了
而且最好以欄位名稱命名
這樣在Model Binding時就能抓到值喔
不然會抓不到資料有興趣可以試試 參考網址

Asp.net MVC 實作jQuery+Html.DropDownList更換頁面資料(14)

先廢話一下
這功能蠻實用的原本還想說用AjaxBeginForm但不知該如何寫
雖然寫出來了但應該還有許多可以地方可以加強

---

Controller部份先抓產生下拉選單的資料

        public ActionResult Index( )
        {
            ViewBag.TabData = new SelectList(db.Tab, "TabID", "TabName"); //產生下拉選單
            return View();
        }

View的部份也放一個@Html.DropDownList接收下拉選單
也放一個DIV來準備給jQuery用

@Html.DropDownList("TabData", null, null, new { id = "ddTabData" })

然後產原本產生的Index裡的Table另外開一個_List.schtml裡
所以這時畫面應該只剩一個下拉選單
我們要讓下拉後變更整個Table裡的資料
怎麼做當然就是去呼叫剛的頁面
要動態更新DOM我只會jQuery哈

  
        $(function () {     
            $("#ddTabData").change(function () {
                var selectedItem = $("#ddTabData").val();
                $.ajax({
                    cache: false,
                    type: "GET",
                    url: "@(Url.Action("GetList", "TabContent", null))",
                    data: { "tid": selectedItem },
                    success: function (data) {
                        $("#Content").html(data);
                    },
                    error: function (xhr, ajaxOptions, thrownError) {
                        alert('讀取資料失敗.');
                    }
                });
            });          
        });
    

去呼叫@(Url.Action("GetList", "TabContent", null))

  public ActionResult GetList(int tid = 1)
        {
            var tabcontent = db.TabContent.Where(u => u.TabID == tid).Include(t => t.Account).Include(t => t.Account1).Include(t => t.Tab);
            return View("_List",tabcontent.ToList() );
        }

這樣就會回傳一整個Table回來
但_List.cshtml裡除了原本宣告model要放

@{    
    if (IsAjax)
    {
        Layout = null;
    }    
}

上面這句也要加，不加差在那邊各位可以自己測試!!

Asp.net MVC 實作AutoMapper後加上PagedList(13)

先廢話一下
今天終於將MVC課程上完了
接下來就要多練習

---

上篇文章提到AutoMapper可自動轉型
但試了很久就是沒法轉成PagedList
還好運氣不錯找到一篇文章>

public ActionResult Index()
{
	Mapper.CreateMap<Account, AccountMV>(); 
        var OrderList = db.Account.OrderBy(o => o.AccountID);//設定OrderBy List
        var PagedList = OrderList.ToPagedList(p, 2);//分頁的 List
        var viewmodel = Mapper.Map<IEnumerable<Account>, IEnumerable<AccountMV>>(PagedList.ToArray()); // 分頁列表轉換成ViewModel
        var query = new StaticPagedList<AccountMV>(viewmodel, PagedList.GetMetaData()); // reconsitute a new IPagedList containing the viewmodels
        return View(query);       
}

說真的我還真看不太懂最後一行那句
但這樣在View中是完全不需要更改的
寫到現在這樣CRUD最底層都差不多寫好了
簡單的專案也差不多快完成了
參考網址
PagedList

Asp.net MVC 實作AutoMapper Mapping Model and ViewModel(12)

先廢話一下
第一次寫MVC檢視一下程式碼
發覺定義了太多ViewModel
只要新增一個欄位後View Controller Model居然都需要改
天阿這一定不會是我想要的
相信寫MVC的人覺對不會想發生這種問題

---

Google搜尋後發覺有一個好的套件
AutoMapper在NuGet裡搜尋就能找到安裝
來看一下原本的程式碼

public ActionResult Index()
{
 var query = from u in db.Account
                    select new AccountVM
                    {
                        AccountID = u.AccountID,
                        AccountName = u.AccountName,
                        IsUsed = u.IsUsed,
                        LoginIP = u.LoginIP,
                        LoginDate = u.LoginDate,
                        Name = u.Name,
                        Email = u.Email
                    };

         return View(query);
}

看以上程式碼只要加一個欄位每次都要跑來修改
唉~對於最內部系統的人最痛苦的事就是新增欄位了
來看一下使用AutoMapper

public ActionResult Index()
{
        Mapper.CreateMap<Account, AccountVM>();
        List<Account> account = db.Account.ToList();
        List< AccountVM> query = Mapper.Map<  List< Account>,List< AccountVM>>(account);   
        return View(query);
}

這樣不管怎麼增加欄位都不需要在Controller修改了
只是目前不知會不會有什麼Bug 參考網址
點我