微軟Lightswitch使用C＃創建動態用戶界面，jQuery的移動和JavaScript

Question

因此，我正在開發一個微軟的Lightswitch應用程序在C＃中使用Visual Studio 2013，我需要一個動態的用戶界面。

基本上在數據庫中我有一個Person表，一個技能表和一個PersonSkills表，它們將兩者聯繫在一起（一個人可以有多種技能，每種技能都有技能級別。自動取出並完成）。

現在AddSkill頁面上，我需要能夠添加，因爲我想盡可能多的技能，而不必一遍遍打開相同AddSkill彈出。我目前的做法是（使用谷歌瀏覽器）右鍵單擊+按鈕搜索技能並選擇檢查元素，以查看該按鈕的CSS代碼（因爲它是一個css/jquery移動元素）。

這給了我該技能框和級別框的CSS代碼，並且每當技能發生變化時使用lightswitch的postRender方法和.change jquery方法，我將其他技能和級別框的代碼添加到組件。

myapp.AddEditPersonSkill.left_postRender = function (element, contentItem) { 
// Write code here. 
var context = $(element); 

//Sorry that its all in one line and terrible... 

context.change(function() { 
    context.append('<div class="msls-first-column msls-presenter msls-ctl-rows-layout msls-vauto msls-hstretch msls-presenter-content msls-font-style-normal msls-hscroll msls-label-host msls-rows-layout" style="min-width: 200px; max-width: 400px; width: 229px;"><div class="msls-clear msls-first-row msls-presenter msls-ctl-details-modal-picker msls-vauto msls-hstretch msls-leaf"><div class="msls-label msls-label-align-top msls-clear msls-vauto"><label>Skill</label></div><div class="msls-clear msls-presenter-content msls-font-style-normal msls-vauto msls-hscroll"><div class="id-container"><form class="ui-listview-filter ui-bar-a ui-listview-filter-inset" role="search"><div class="ui-input-search ui-shadow-inset ui-btn-corner-all ui-btn-shadow ui-icon-searchfield ui-body-a ui-mini"><input placeholder="Search" data-type="search" class="ui-input-text ui-body-a"><a href="#" class="ui-input-clear ui-btn ui-btn-up-a ui-shadow ui-btn-corner-all ui-fullsize ui-btn-icon-notext ui-input-clear-hidden" title="clear text" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-icon="delete" data-iconpos="notext" data-theme="a" data-mini="false"><span class="ui-btn-inner"><span class="ui-btn-text">clear text</span><span class="ui-icon ui-icon-delete ui-icon-shadow">&nbsp;</span></span></a></div></form><ul class="id-auto-complete-element ui-listview ui-listview-inset ui-corner-all ui-shadow" data-role="listview" data-inset="true" data-filter="true" data-filter-theme="a" data-filter-placeholder="Search"></ul><a class="id-modal-button msls-has-search msls-large-icon ui-btn ui-btn-up-a ui-shadow ui-btn-corner-all ui-mini ui-btn-icon-notext" tabindex="0" data-role="button" data-icon="msls-add" data-mini="true" data-iconpos="notext" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="a" title=""><span class="ui-btn-inner"><span class="ui-btn-text"></span><span class="ui-icon ui-icon-msls-add ui-icon-shadow">&nbsp;</span></span></a></div><div class="id-auto-complete-dropdown"></div></div></div><div class="msls-clear msls-last-row msls-presenter msls-ctl-text-box msls-vauto msls-hstretch msls-leaf msls-redraw"><div class="msls-label msls-label-align-top msls-clear msls-vauto"><label for="b8bfe3adf-Level" class="ui-input-text">Level</label></div><div class="msls-clear msls-presenter-content msls-font-style-normal msls-vauto msls-hscroll"><div class="ui-input-text ui-shadow-inset ui-corner-all ui-btn-shadow ui-body-a ui-mini"><input type="text" class="id-element ui-input-text ui-body-a" data-mini="true" maxlength="255" id="b8bfe3adf-Level"></div></div></div><div class="msls-clear"></div></div>'); 

}); 

};

這就是所有罰款和良好的 - 但是，現在的問題是：新的技能框（剛加入到屏幕）沒有工作按鈕 - CSS/jQuery Mobile的按鈕不執行任何操作。第一個仍然正常工作，但新的一個壞了。

有沒有比我所做的更好的方式做到這一點？有沒有內置的lightswitch方式來做到這一點？

編輯：所以它看起來像jQuery的按鍵事件是JavaScript文件中的其他地方，而不是按鈕聲明本身內：

http://demos.jquerymobile.com/1.2.1/docs/buttons/buttons-events.html

這意味着即使我創造了「看起來和感覺'按鈕，他們實際上沒有做任何事情。我必須找出按鈕調用的方法，然後使用.bind jquery方法將新按鈕綁定到相同的方法。

Answer 1

這種更簡單的方法可以是使用人的屏幕上定義的彈出窗口（不AddPersonSkills對話框）。

在ViewPerson屏幕：

1. 在屏幕設計的「彈出窗口」一節中，添加一個新的彈出
2. 添加PersonSkills查詢（如果它已不存在）
3. 將在PersonSkills查詢到你想讓它顯示在屏幕上的位置
4. 正上方你添加，添加一個新的按鈕，指定操作打開創建
5. 添加數據項彈出的「PersonSkills」列表中，選擇「查詢」，選擇「技能」
6. 拖動「技能」查詢到的新的彈出
7. 選擇加入
8. 在「操作」屬性頁的部分的「技能」列表控件，點擊鏈接旁邊的「項塔」，選擇創建一個新的方法和插入以下

myapp.ViewPerson.Skills_ItemTap_execute = function(screen) { 
 
    var personSkill = new myapp.PersonSkill(); 
 
    personSkill.Person = screen.Person; 
 
    personSkill.Skill = screen.Skills.selectedItem; 
 
    msls.application.applyChanges(); 
 
    screen.closePopup(); 
 
};

這裏的代碼是什麼經驗，最終是荷蘭國際集團一樣（在我的例子，我有客戶，供應商和PreferredVendors作爲關係表（讓客戶可以有很多PreferredVendors））

如果需要，你可以在彈出的添加更多的字段：

1. 添加數據項... - >本地地產（變型爲整數），將其命名爲SkillLevelProp
2. 拖動SkillLevelProp財產上彈出
3. 添加一個按鈕，彈出（選擇寫我自己的方法）
4. 從技能水龍頭將上面的代碼按鈕的新方法（我們不能關閉彈出窗口上自來水了，因爲用戶需要還可以設置SkillLevel）

myapp.ViewPerson.submit_execute = function(screen) { 
 
    var prefSkill = new myapp.PersonSkill(); 
 
    prefSkill.Person = screen.Person; 
 
    prefSkill.Skill = screen.Skills.selectedItem; 
 
    prefSkill.SkillLevel = screen.SkillLevelProp; 
 
    msls.application.applyChanges(); 
 

 
    // clear out the SkillLevel value so it's empty the next time the popup is opened 
 
    screen.SkillLevelProp = null; 
 
    screen.closePopup(); 
 
};

這將使彈出如下圖所示：

這裏是彈出式的設計看起來：

Answer 2

至於讓你的按鈕的工作，你用：

// Tell JQuery Moble to render 
objFieldset.trigger("create"); 

參見： JQuery Mobile Tree Using Collapsible Sections and Dynamic Views in LightSwitch