[ASP.NET] 控制項套用bootstrap後，Postback造成控制項不見

話說這個也是搞了我一天的事…

在套用完bootstrap後…控制項就”杯具”啦~

postback就給我搞失縱~

沒關係，我吃程式也不少，程式崩潰~也不是這二、三天的事，

還好不是user測試到的問題，不然基於禮貌是一定要送他這張臉的~

當然我相信很多人就此放棄追縱問題，包含過去小弟我…

但是自從玩過前端angular後，

前端觀念像是灌了大補丸~!!!
(社會在走，觀念要有)

言歸正傳，先來看看我的問題吧！

原本下拉選單還在，

但是在選完上面4個選項後，我最後一個教室編號dropdownlist是有用updatepanel包起來，

所以當它進行db讀取完回來後，把值填給dropdownlist，造成bootstrap特效遺失！(如下圖

看看html原始碼，他的＜select＞裡的＜option＞是有值回來的，

只是沒了特效，導致原本的套版崩潰~

所以我們先來看看其他dropdownlist的樣式後，
再把應該有的套版樣式，在postback回來後把它恢復，

上面二張圖中可以比對一下，基本上就是1、2不見了！
現在我們就把它補回來，先添加個方法

ScriptManager.RegisterClientScriptBlock();

這是配合把客戶端的script加進在更新UpdatePanel時執行，(如下圖

再把前端的JavaScript加進去~

//========================================================

function udp_ddl_show() {
var up = $(“#UpdatePanel1”);

var ddl_ROOMID = document.getElementById(“ddl_ROOMID”);

var create_input = document.createElement(“div”);
create_input.className = “btn-group bootstrap-select fit-width”;

var create_bt = document.createElement(“button”);
create_bt.setAttribute(‘type’, ‘button’);
create_bt.className = “btn dropdown-toggle bs-placeholder btn-default”;
create_bt.setAttribute(‘data-toggle’, ‘dropdown’);
create_bt.setAttribute(‘data-id’, ‘ddl_ROOMID’);
create_bt.setAttribute(‘id’, ‘bt_ROOMID’);
create_bt.setAttribute(‘title’, ‘Nothing selected’);

var create_sp1 = document.createElement(“span”);
create_sp1.className = “filter-option pull-left”;
create_sp1.innerText = “Nothing selected”;
var create_sp2 = document.createElement(“span”);
create_sp2.className = “bs-caret”;
create_sp2.innerHTML = ‘’;
create_bt.appendChild(create_sp1);
create_bt.appendChild(create_sp2);

var create_div = document.createElement(“div”);
create_div.className = “dropdown-menu open”;
create_div.setAttribute(‘role’, ‘combobox’);
var create_ul = document.createElement(“ul”);
create_ul.className = “dropdown-menu inner”;
create_ul.setAttribute(‘role’, ‘listbox’);
//create_ul.setAttribute(‘aria-expanded’, ‘false’);
create_ul.setAttribute(‘aria-expanded’, ‘true’);
//create_ul.setAttribute(‘style’, ‘max-height: 283px; overflow-y: auto; min-height: 80px;’);

var rooms = document.getElementById(“ddl_ROOMID”);
for(var i = 0 ; i < rooms.options.length;i++)
{
var create_li = document.createElement(“li”);
create_li.setAttribute(‘data-original-index’, ‘“‘ + i + ‘“‘);
if (i == 0)
create_li.className = “selected”;
else
create_li.className = “”;

var create_li_a = document.createElement(“a”);
create_li_a.setAttribute(‘tabindex’, ‘0’);
create_li_a.setAttribute(‘class’, ‘’);
create_li_a.setAttribute(‘data-tokens’, ‘null’);
create_li_a.setAttribute(‘role’, ‘option’);
create_li_a.setAttribute(‘aria-disabled’, ‘false’);
create_li_a.setAttribute(‘aria-selected’, ‘false’);
create_li_a.setAttribute(‘onclick’, ‘li_click(event);’);

var create_li_a_text1 = document.createElement(“span”);
create_li_a_text1.className = “text”;
create_li_a_text1.innerHTML = rooms.options[i].value;

var create_li_a_text2 = document.createElement(“span”);
create_li_a_text2.className = “glyphicon glyphicon-ok check-mark”;

create_li_a.appendChild(create_li_a_text1);
create_li_a.appendChild(create_li_a_text2);

create_li.appendChild(create_li_a);
create_ul.appendChild(create_li);
}

create_div.appendChild(create_ul);

create_input.appendChild(create_bt);
create_input.appendChild(create_div);
create_input.appendChild(ddl_ROOMID);

up.append(create_input);
}

function li_click(event) {
var bt = document.getElementById(“bt_ROOMID”);
bt.innerText = event.target.innerText;
var create_sp1 = document.createElement(“span”);
create_sp1.className = “filter-option pull-left”;
create_sp1.innerText = event.target.innerText;
var create_sp2 = document.createElement(“span”);
create_sp2.className = “bs-caret”;
create_sp2.innerHTML = ‘’;
bt.appendChild(create_sp2)
var ddl_room = document.getElementById(“ddl_ROOMID”);
ddl_room.value = event.target.innerText;
}

//========================================================

沒錯，才二個區塊(1、2)就搞得勒勒長的~

再怎麼說也是搞了我一天才結束，至少不要讓老闆覺得沒幹捨事…

謝謝各位！