餓了么-搜索頁面如下圖所示：
完整代碼見git ：https://github.com/comsmobiler/BlogsCode
創建表單
創建一個smobilerForm ，檔案名設定ElmSearch， 將表單的Layout設定Relative，再設定表單的Statusbar屬性
并在表單中拖入Panel和ListView，Panel.Height 設定40，Listview.Flex設定1 ，Listview的模板類設定成ListLayout
實作搜索框
將上圖的panel1.Layout設定Relative，panel1.Direction設定Row，panel1.Padding設定(6,6,6,6),panel1.Size設定為(0,40)，
在panel1中拖入imageButton1，
imageButton1.ImagtType設定FontIcon，
imageButton1.ResourceID設定” angle-left” ,
imageButton1.Size設定(27,0)，
在imageButton1的點擊事件中寫this.Close();
接著在panel1中拖入panel2，
panel2.BorderRadius設定12，
panel2.Direction設定Row，
panel2.ItemAlign設定Center，
panel2.Layout設定Relative，
panel2.Touchable設定true，
panel2.BackColor設定WhiteSmoke，
panel2.Magrin設定(6,0,0,0),
panel2.Flex設定1 ，
在panel2 中加入fonticon控制元件，
fontIcon1.Location設定(6,0),
fontIcon1.Size設定(15,15),
fontIcon1.ForeColor設定Gainsboro，
fontIcon1.Resource設定”search”
在panel2中繼續加入Label控制元件，Label控制元件的Name設定KeyLab，
KeyLab.Flex設定1
KeyLab.ForeColor設定Gainsboro
KeyLab.Location設定（6,0,0,0）
KeyLab.Margin設定（6,0,0,0）
KeyLab.Padding設定(4,0,0,0)
KeyLab.Text設定”曼玲粥店”
創建SmobilerUserControl
創建一個SmobilerUserControl，檔案名設定ElmLayout， 將ElmLayout.Layout設定Relative，BackColor s設定White，Flex設定1
上圖panel1 用來實作搜索框，步驟和前面一樣，只是ELmLayout中的KeyLab改成TextBox控制元件，最后在ElmLayout中拖入兩個panel，分別命名為hisPanel和disPanel，這兩個Panel的Size設定(0,0)，這樣設計器部分就完成了，
代碼
ElmSearch.cs
1 using System; 2 using System.Collections.Generic; 3 using System.Data; 4 using System.Linq; 5 using System.Text; 6 using SelectDemo.Layouts; 7 using Smobiler.Core; 8 using Smobiler.Core.Controls; 9 10 namespace SelectDemo 11 { 12 partial class ElmSearch : Smobiler.Core.Controls.MobileForm 13 { 14 public ElmSearch() : base() 15 { 16 //This call is required by the SmobilerForm. 17 InitializeComponent(); 18 } 19 20 private DBClass dBClass = new DBClass();//DBClass 資料庫查詢類 21 private void panel2_Press(object sender, EventArgs e) 22 { 23 ShowElmLayout(); 24 } 25 private void ShowElmLayout() 26 { 27 //篩選項資料 28 SelectData d1 = new SelectData() 29 { 30 title = "歷史搜索", 31 items = new String[] { "粥" }, 32 ishow = true 33 }; 34 SelectData d2 = new SelectData() 35 { 36 title = "歷史搜索", 37 items = new String[] { "超級發布30減20起", "小恒水餃", "早餐", "油條", "炸雞" ,"包子","皮蛋瘦肉粥"}, 38 ishow = false 39 }; 40 41 List<SelectData> sds = new List<SelectData>(); 42 sds.Add(d1); 43 sds.Add(d2); 44 45 // 實體化ElmLayout 46 ElmLayout uc = new ElmLayout(sds, keyLab.Text); 47 DialogOptions footerDialogOptions; 48 footerDialogOptions = new DialogOptions(LayoutJustifyAlign.FlexStart, System.Drawing.Color.Transparent, Smobiler.Core.Controls.Padding.Empty, true); 49 //在表單中彈出ElmLayout 50 ShowDialog(uc, footerDialogOptions, (obj, args) => 51 { 52 if (uc.ShowResult == ShowResult.Yes) 53 { 54 keyLab.Text = uc.currentkey; 55 DataTable dt = dBClass.DbConnectAndQuert(uc.querystr); 56 listView1.Rows.Clear(); 57 listView1.DataSource = dt; 58 listView1.DataBind(); 59 } 60 }); 61 62 } 63 private void imageButton1_Press(object sender, EventArgs e) 64 { 65 this.Close(); 66 } 67 } 68 }ElmSearch
ElmLayout.cs
1 using System; 2 using System.Collections.Generic; 3 using System.Linq; 4 using System.Text; 5 using Smobiler.Core; 6 using Smobiler.Core.Controls; 7 8 namespace SelectDemo.Layouts 9 { 10 ////ToolboxItem用于控制是否添加自定義控制元件到工具箱，true添加，false不添加 11 //[System.ComponentModel.ToolboxItem(true)] 12 partial class ElmLayout : Smobiler.Core.Controls.MobileUserControl 13 { 14 public ElmLayout() : base() 15 { 16 //This call is required by the SmobilerUserControl. 17 InitializeComponent(); 18 } 19 public ElmLayout(List<SelectData> selectDatas, string defalutStr) : base() 20 { 21 //This call is required by the SmobilerUserControl. 22 InitializeComponent(); 23 GethHistory(selectDatas, defalutStr); 24 } 25 public string currentkey; 26 public string querystr; 27 28 private void CloseDialog_Press(object sender, EventArgs e) 29 { 30 this.ShowResult = ShowResult.No; 31 this.Close(); 32 33 } 34 private void GethHistory(List<SelectData> selectDatas, string defaultstr) 35 { 36 this.KeyLab.Text = defaultstr; 37 foreach (SelectData data in selectDatas) 38 { 39 //該label用于顯示“歷史搜索”文字 40 Label label1 = new Label() 41 { 42 Text = data.title, 43 Flex = 1, 44 FontSize = 15, 45 Size = new System.Drawing.Size(0, 25), 46 Bold=true, 47 ForeColor=System.Drawing.Color.Gray 48 }; 49 50 Panel p1 = new Panel() 51 { 52 Layout = LayoutPosition.Relative, 53 Direction = LayoutDirection.Row, 54 Size = new System.Drawing.Size(0, 0), 55 Padding = new Padding(12, 0, 12, 0) 56 }; 57 58 p1.Controls.Add(label1); 59 60 Panel p2 = new Panel() 61 { 62 Layout = LayoutPosition.Relative, 63 Direction = LayoutDirection.Row, 64 Size = new System.Drawing.Size(0, 0), 65 Padding = new Padding(12, 0, 12, 0), 66 Wrap = LayoutWrap.Wrap 67 }; 68 if (data.ishow == true) 69 { 70 //添加“歷史搜索”后的洗掉按鈕 71 ImageButton imgbtn = new ImageButton() 72 { 73 ImageType = ImageEx.ImageStyle.FontIcon, 74 ResourceID = "trash-o", 75 IconColor = System.Drawing.Color.Silver, 76 Size = new System.Drawing.Size(25, 25) 77 }; 78 imgbtn.Press += this.DeleteButtonPress; 79 p1.Controls.Add(imgbtn); 80 81 for (int i = 0; i < data.items.Length; i++) 82 { 83 Button btn = new Button() 84 { 85 Text = data.items[i], 86 BackColor = System.Drawing.Color.WhiteSmoke, 87 ForeColor = System.Drawing.Color.Gray, 88 Size = new System.Drawing.Size(0, 0), 89 Padding = new Padding(12,8,12,8), 90 BorderRadius = 4, 91 Margin = new Margin(0, 4, 12, 4) 92 }; 93 btn.Press += this.SelectButtonPress; 94 p2.Controls.Add(btn); 95 } 96 hisPanel.Controls.Add(p1); 97 hisPanel.Controls.Add(p2); 98 } 99 else 100 { 101 //原型上“超級發布30減20起 按鈕” 102 Button spbtn = new Button() 103 { 104 Text = data.items[0], 105 BackColor = System.Drawing.Color.AliceBlue, 106 ForeColor = System.Drawing.Color.DeepSkyBlue, 107 Size = new System.Drawing.Size(0, 0), 108 Padding = new Padding(12,8,12,8), 109 BorderRadius = 4, 110 Margin = new Margin(0,4, 12, 4) 111 }; 112 spbtn.Press += this.SelectButtonPress; 113 p2.Controls.Add(spbtn); 114 115 for (int i = 1; i < data.items.Length; i++) 116 { 117 Button btn = new Button() 118 { 119 Text = data.items[i], 120 BackColor = System.Drawing.Color.WhiteSmoke, 121 ForeColor = System.Drawing.Color.Gray, 122 Size = new System.Drawing.Size(0, 0), 123 Padding = new Padding(12,8,12,8), 124 BorderRadius = 4, 125 Margin = new Margin(0, 4, 12, 4) 126 }; 127 btn.Press += this.SelectButtonPress; 128 p2.Controls.Add(btn); 129 } 130 disPanel.Controls.Add(p1); 131 disPanel.Controls.Add(p2); 132 } 133 134 } 135 } 136 137 /// <summary> 138 /// 清空歷史搜索記錄 139 /// </summary> 140 /// <param name="sender"></param> 141 /// <param name="e"></param> 142 private void DeleteButtonPress(object sender, EventArgs e) 143 { 144 hisPanel.Controls.Clear(); 145 } 146 /// <summary> 147 /// 搜索內容查詢 148 /// </summary> 149 /// <param name="sender"></param> 150 /// <param name="e"></param> 151 private void SelectButtonPress(object sender, EventArgs e) 152 { 153 Button btn = (Button)sender; 154 this.ShowResult = ShowResult.Yes; 155 currentkey = btn.Text; 156 //將查詢關鍵字替換進去 157 querystr = @"SELECT * FROM `testdata` where data like '%"+currentkey+"%'"; 158 this.Close(); 159 } 160 /// <summary> 161 /// 搜索框回車鍵事件 162 /// </summary> 163 /// <param name="sender"></param> 164 /// <param name="e"></param> 165 private void KeyLab_SubmitEditing(object sender, EventArgs e) 166 { 167 this.ShowResult = ShowResult.Yes; 168 currentkey = KeyLab.Text; 169 //將查詢關鍵字替換進去 170 querystr = @"SELECT * FROM `testdata` where data like '%" + KeyLab.Text+ "%'"; 171 this.Close(); 172 } 173 174 private void imageButton1_Press(object sender, EventArgs e) 175 { 176 this.ShowResult = ShowResult.No; 177 this.Close(); 178 } 179 } 180 }ElmLayout
SelectData.cs
1 using System; 2 using System.Collections.Generic; 3 using System.Linq; 4 using System.Text; 5 using System.Threading.Tasks; 6 7 namespace SelectDemo 8 { 9 class SelectData 10 { 11 public String title { set; get; } 12 public String[] items { set; get;} 13 public Boolean ishow { set; get; } 14 public Boolean isradio { set; get; } 15 public String type { set; get; } 16 17 } 18 }SelectData
DBClass.cs
1 using System; 2 using System.Collections.Generic; 3 using System.Data; 4 using System.Data.SqlClient; 5 using System.Linq; 6 using System.Text; 7 using System.Threading.Tasks; 8 using MySql.Data.MySqlClient; 9 namespace SelectDemo 10 { 11 class DBClass 12 { 13 /// <summary> 14 /// 連接資料庫并查詢相應資料 15 /// </summary> 16 /// <param name="query">資料庫查詢陳述句</param> 17 /// <returns></returns> 18 public DataTable DbConnectAndQuert(string query) 19 { 20 21 String connetStr = "server=127.0.0.1;port=3306;user=****;password=****; database=***;charset=utf8"; 22 MySqlConnection conn = new MySqlConnection(connetStr); 23 try 24 { 25 DataTable dt = new DataTable(); 26 conn.Open(); 27 MySqlCommand com = new MySqlCommand(query, conn); 28 MySqlDataAdapter adapter = new MySqlDataAdapter(com); 29 adapter.Fill(dt); 30 return dt; 31 32 } 33 catch (MySqlException ex) 34 { 35 Console.WriteLine(ex.Message); 36 return null; 37 } 38 finally 39 { 40 conn.Close(); 41 } 42 } 43 } 44 }DBClass
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/270398.html
標籤：ASP.NET