Rock N Code: 6月 2012

reload DropdownList values in asp.net mvc3 without refreshing page

以MVC撰寫的網頁上有個DropdownList，頁面初次載入是透過ViewBag來賦予值，在觸發某事件後需重新載入新值。
但DropdownList會因頁面沒有refresh，無法抓取ViewBag的新值。
解決方式可透過getJSON，寫法如下

UI
@Html.DropDownList("NameList", @ViewBag.NameList as IEnumerable)

JavaScript

function loadNames(conditionMd) {
    $.getJSON("_NameList", { json: conditionMd }, function (data) {
        var selectList = $("#NameList");
        selectList.empty();
        $.each(data, function (index, optionData) {
            var option = $( '').text(optionData.Text).val(optionData.Value);
            selectList.append(option);
        });
    });
}

public ActionResult _NameList(string json)
{         

    Dictionary< string, string> conditions = new Dictionary< string, string>();
    JavaScriptSerializer jss = new JavaScriptSerializer();
    conditions = jss.Deserialize< Dictionary< string, string> >(json);                
    Array result = getNameValues(conditions);

    List< SelectListItem> items = new List< SelectListItem>();
    items.Add(new SelectListItem { Text = "Plesse select", Value = "Plesse select" });
    for (int j = 0; j < result.Length; j++)
    {
        string[] temp1 = (string[])result.GetValue(j);
        items.Add(new SelectListItem { Text = temp1[0], Value = temp1[1] });
    }
     return Json(items, JsonRequestBehavior.AllowGet);
}

參考資訊How to reload dropdown list values in asp.net mvc3 without refreshing page

Telerik Grid ─ Pass additional values from clientside events

Telerik Grid的Delete只要有unique value作為識別，就可以取得特定資料，進行刪除的動作。

unique可藉設定DataKeys達到，例如

    .DataKeys(datakeys =>
    {
        datakeys.Add(o => o.Id).RouteKey("KeyId");
        datakeys.Add(o => o.Name).RouteKey("KeyName");
    })

但有時會希望刪除後要做些額外處理，總不能設N個RouteKey吧（也不是不對，蠻爛的就是….）

依據Telerik論壇的資訊，可以傳遞額外的資訊，參考網址如下

Pass additional values from clientsideevents

若額外資訊不只一組，使用論壇建議的方法～直接用JSON包，傳值還是有問題，經過本人測試，只要一個一個指定就OK！程式碼如下

JavaScript

function Grid_OnDelete(e) {
    e.values.A= $('#myA').val();
    e.values.B= $('#myB').val();
}

[GridAction]
public ActionResult _AjaxDelete(string KeyId,string A, string B)
{   //略
}

最後附上完整的UI

@(Html.Telerik().Grid()
    .Name("Grid")
    .DataKeys(datakeys =>
    {
        datakeys.Add(o => o.Id).RouteKey("KeyId");
        datakeys.Add(o => o.GroupName).RouteKey("KeyGroupName");
    })
    .ToolBar(commands => commands.Insert().ButtonType(GridButtonType.Text).ImageHtmlAttributes(new { style = "margin-left:0" }))
    .Columns(columns =>
    {
        columns.Bound(o => o.GroupName);
        columns.Bound(o => o.Description);
        columns.Bound(o => o.CloudGroup);
        columns.Bound(o => o.SocialGroup);
        columns.Command(commands =>
        {
            commands.Edit().ButtonType(GridButtonType.Text);
            commands.Delete().ButtonType(GridButtonType.Text);
        });
    })
    .DataBinding(d => d.Ajax().Select("_AjaxBinding", "Partner")
        .Insert("_AjaxInsert", "Partner")
        .Update("_AjaxUpdate", "Partner")
        .Delete("_AjaxDelete", "Partner"))
    .ClientEvents(c => c.OnDelete("Grid_OnDelete"))
)

補充：不只Delete能傳遞額外資訊，Update亦可，只是要寫在OnSave event，範例如下

JavaScript

    function Grid_OnSave(e) {
        if (e.mode == 'edit') {
            e.values.A= $('#myA').val();
            e.values.B= $('#myB').val();
        }
    }

鮮納肚

畢業後各奔東西，要把大夥湊齊出遊真不易，當天搞笑只有四人成團，又是去最熱的觀光景點—九份，但還是留下很讚的回憶↖(^ω^)↗

九份一隅

九份掰掰～來去天龍國吃大餐嚕

＝＝＝＝＝＝＝＝＝＝＝＝＝＝鮮納肚分隔線＝＝＝＝＝＝＝＝＝＝＝＝＝＝

早上九份遊冷清清，晚上聚餐鮮納肚可不同，足足湊齊七朵花(?)

好啦~店內外全忘記拍，這張充數：Ｐ

有別於東區２１６巷平價快炒，同樣位於東區的鮮納肚還有生猛海鮮任君挑選，那種大蝦大魚在水缸裡游泳，還有多位酒促妹穿梭的氣氛，與溫馨親切風的２１６巷平價快炒可是不同唷！

看菜單就知道鮮納肚海味多的多嚕～

可能是二位金主爽爽付，其實忘記吃了多少菜式，只能看圖說故事：P
．．．是你拖稿吧　Ψ(￣▽￣)-c<”￣⊿￣)／

先來說說吃過都說讚的生魚片，本人還是對生魚片維持嘴鈍＠＿＠　但根據在座幾位不敢吃的友人說法，連他們都覺得鮭魚生魚片好甜好好吃！GOOD！愛好此物的朋友們，推薦您多來幾份啦～

鮭魚生魚片(NTD 160)

大夥吃完鮭魚生魚片讚不絕口，馬上加點綜合生魚片，最終結論是～比較推單點鮭魚

綜合生魚片(NTD 160)

芥末子曼波魚我承認是被芥末醬吸引，然後依稀記得曼波魚的肉質蠻Q彈就點了，就是道嗑牙等菜的冷盤啦，擁有豐富膠質(?)很適合姊姊妹妹們嚕

芥末子曼波魚(NTD 120)

鳳梨蝦球是有張氏姊姊在就會出現的菜色，多虧他對鳳梨蝦球始終如一的熱愛，讓我有機會一嘗大隻到無法捲成球的鳳梨蝦蝦(⊙o⊙)a

不趁熱吃拍整盤就是不敬業的~鳳梨蝦球(NTD 180)

整隻蝦不小耶耶耶~

鹹菜蚵仔湯不管鹹菜豆腐有多少，但蚵仔夠肥就令人心滿意足啦>////////<

鹹菜蚵仔湯(NTD 150)

麻油豬肝是道清爽又很台灣味的招牌菜，總覺得台菜料理加上米酒、麻油這幾款都好讚啊╮(╯3╰)╭　可惜有些人不碰內臟，份量不少的肝吃得我好撐XD

麻油豬肝(NTD 150)

招牌炸嫩豆腐嫩歸嫩但外皮有點老、厚耶，我覺得鹹酥雞的炸百頁豆腐比較吸引我

招牌炸嫩豆腐(NTD 100)

三杯爆中卷口味重適合下飯，加上鐵板的氣勢讓人很想多來碗白飯

三杯爆中卷(NTD 150)

那個魚在生魚片之後再度讓大家驚嘆，每個人本來對名稱都抱持著困惑XD
吃下去後管它哪個魚，好吃就好～又是道佳餚

那個魚(NTD 120)

至於用來填飽肚子的炒飯炒麵也是好吃的重口味款，如果想健康點不妨來點青菜～

清炒絲瓜(NTD 120)

★鮮納肚
addr：台北市忠孝東路4段101巷10號
phone：02-27118411

穗科手打麵

某Friday night興沖沖偕好友去吃網路大推到不行的穗科手打麵，再晚都要吃到這夢幻麵麵的心情，讓它一次失誤就被俺打入冷宮，只能說SORRY～要再訪可能要等別人掏錢請客．．．

八點半抵達穗科已接近last order，手作師傅都在清掃檯面

開始期待傳說中重重捶打感的Q彈麵條

冷麵雖誘人，但大夥都想試試湯頭，便點了原味（上湯烏龍麵）除外的三款湯麵。
還加點了黑嘛嘛卻好誘人的黑玉胡麻豆腐，黑豆腐讓嘴巴漾著淡淡香香的芝麻味，搭著磨細的些許薑絲與特調味磳醬，吃來清爽不膩口，是道滋味豐富，讓人在等待麵食上桌前的開胃小點。

黑玉胡麻豆腐(NTD 80)

我們點的白湯、辣湯、泡菜烏龍麵皆以上湯為底做變化，加入牛奶的白湯味道比較濃，最得我心。泡菜則是有搔不到癢處的感覺～但menu的確是說微辣也就沒什麼好挑剔嘞：P　至於比泡菜又稍辣的辣湯則是比較有滋味一點，結果友人說好像牛肉湯XD

白湯烏龍麵(NTD 190)

泡菜烏龍麵(NTD 190)

辣湯烏龍麵(NTD 190)

湯頭百百種，味道不合大有可能，但這次慕麵條之名而來，麵條總要Q到能甩我巴掌唄？！
結果，不聽網路上＂冷麵＞＞湯麵＂的良心建議，我在東區踩雷了T＿T
麵條一入口就不夠硬，更吃到泡到有點軟的麵條（不是吃到最後才遇到），為了讓麵條不要再軟下去，piggy只好極速吃完貴森森的190烏龍麵Q_Q

說老實話，愛吃如我～吃貴上幾倍的美食也不是沒有，我也能理解在東區開店要花費大把成本在店面、人事，但至少要讓我甘願回鍋，單單基本的麵條就讓人失望，以後嘴巴饞還是去吃平民價的田舍手打麵吧，至少我有感受到麵條想K我的fu嚕

★穗科手打麵
addr：台北市忠孝東路四段216巷27弄3號
phone：02-2778-3737
opening hours：11:30am~2pm、5:30~9pm，假日下午茶2~5pm

★吃麵麵看這

1. 桃源街牛肉麵

2. 韓記老虎麵食館

3. 陳家涼麵

4. 李掌櫃

5. 祖傳魷魚羹

10. 珍珍小館
11. 陸光小館
12. 田舍手打麵
13. 川味麵典

checkboxes in Telerik Grid

傳遞Telerik Grid中勾選(checkbox)的資料改良官網sample綁定單一欄位的不足，本文再針對傳遞多參數提供進階範例。

承前例，照理第二、三。。。N個參數這樣給就好
AddPartners(string[] checkedRecords, string 第二個參數, string 第三個參數)
結構一旦變成這樣，原始的checkedRecords就再也傳不過來，永遠都是null >__<
後來發現有位老兄也遭遇相同窘境，結果Telerik論壇也沒人回=__=

後來，我改變傳遞string[]的作法，全部都用可愛的JSON來處理！！！作法如下

UI（與前文同，無須變更）

@(Html.Telerik().Grid()
    .Name("Grid")
    .Columns(columns => {
        columns.Bound(o => o.CompanyId).ClientTemplate("< input type  ='checkbox' name='checkedRecords' value='<#=CompanyId  #>;<#=Name #>' / > ");
        columns.Bound(o => o.Name);
        columns.Bound(o => o.EnglishName);
        columns.Bound(o => o.Phone);
    })
    .DataBinding(d => d.Ajax().Select("AjaxBinding", "Partner"))
    .Pageable()
)

//按下btnAdd後要將勾選的資料傳遞到後端
< input type="button" name="btnAdd" id="btnAdd" value="Add Partner" class = "t-button" / >

JavaScript

    $(document).ready(function () {
        $('#btnAdd').click(function () {
            var $checkedRecords = $('input[name="checkedRecords"]:checked'); 
            if ($checkedRecords.length < 1) {
                alert('你沒有選擇任何資料列!');
                return;
            }


            var id1 = $('#myHiddenInput').val();
            var id2 = $('#myDropdownList :selected').val();


            //取得勾選的checkbox
            var arrayChecked = new Array();
            $('input[name="checkedRecords"]:checked').each(function () {
                arrayChecked.push($(this).val());
            });
            //送出前轉換成JSON格式
            var jsonChecked = JSON.stringify(arrayChecked);

            $.post('AddPartners', { jsonChecked: jsonChecked, id1: id1, id2: id2 },
            function(Data) {
                alert(Data.Message);
            }, 'json');
        });
    });

public ActionResult AddPartners(string jsonChecked, string id1, string id2)
{
    JavaScriptSerializer jss = new JavaScriptSerializer();
    string[] checkedRecords;
    checkedRecords = jss.Deserialize(jsonChecked);
    try
    {
        for (int i = 0; i < checkedRecords.Length; i++)
        {
            string[] Values = checkedRecords[i].Split(';');
            string aa = Values[0];
            string bb = Values[1];
            //aa 和 bb就是前面組合的CompanyId和Name，接下來就可以繼續做其他運算
        }
        return new JsonResult { Data = new { Flag = "Y", Message = "OK!" } };
    }
    catch (Exception ex)
    {
        return new JsonResult { Data = new { Flag = "N", Message = ex.Message } };
    }
}