Register Register Member Login Member Login Member Login Forgot Password ??
PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone
 

Registered : 109,037

HOME > Windows Store Apps > Windows Store and Storage / Data (C#) > Windows Store Apps Databinding - Retrieve Data Master and Detail (C#)



Clound SSD Virtual Server

Windows Store Apps Databinding - Retrieve Data Master and Detail (C#)

Windows Store Apps Databinding - Retrieve Data Master and Detail (C#) บทความนี้จะเป็นการทบทวนและประยุกต์ใช้ ListView DataBinding กับ Naviation หรือการส่งค่า ในรูปแบบของ Master -> Detail ซึ่งจะประกอบด้วย Page จำนวน 2 Page คือ Page แรกจะแสดง Master โดยใช้ ListView ทำการ Binding ข้อมูลจาก Database และเมื่อแสดงรายการ ListView แล้ว สามารถคลิกที่ Item เพื่อส่งค่าไปยัง Page ที่สอง พร้อม ๆ กับแสดงรายละเอียดที่ได้ส่งมาจากก่อนหน้านี้

Windows Store Apps Master Detail

Windows Store Apps Databinding - Retrieve Data Master and Detail


MySQL ตอนที่ 1 : Windows Store Apps ติดต่อกับ MySQL Database (C#)

Windows Store Apps การส่ง ตัวแปร หรือ Parameters ข้าม Page (C#)


    public class MyMember
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public string Email { get; set; }
    }

สร้าง Model Class สำหรับ Mapping Database

List<MyMember> items = new List<MyMember>();

MySqlCommand cmd = new MySqlCommand("SELECT * FROM member", connection);
using (MySqlDataReader reader = cmd.ExecuteReader())
{
    while (reader.Read())
    {
	items.Add(new MyMember
	{
	    Id = Convert.ToInt32(reader.GetString("ID"))
	    ,
	    Name = reader.GetString("Name")
	    ,
	    Email = reader.GetString("Email")
	});
    }
}

การ Mapping ระหว่าง Model Class กับ Result ที่มาจาก Database

        private void myListView_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            MyMember member = (sender as ListView).SelectedItem as MyMember;
            this.Frame.Navigate(typeof(DetailPage), member.Id.ToString());
        }

การส่งค่าที่เกิดจาการคลิกที่ Item ของ Control

        protected override void OnNavigatedTo(NavigationEventArgs e)
        {
            id = e.Parameter as string;
        }

การรับค่าที่ถูกส่งมาจากหน้าก่อนหน้านี้








ตัวอย่างการเขียน Apps เพื่อสร้าง Binding ข้อมูลแบบ Master -> Detail บน Windows Store Apps

Windows Store Apps Master Detail

สร้าง Page ขึ้นมา 2 เพจ คือ MainPage.xaml (สำหรับแสดงรายการ Master) และ DetailPage.xaml ([i]สำหรับแสดงรายละเอียด)

Windows Store Apps Master Detail

เพจของ MainPage.xaml

<Page
    x:Class="WindowsStoreApps.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:WindowsStoreApps"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">


    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

        <ListView x:Name="myListView" HorizontalAlignment="Left" Height="414" Margin="82,153,0,0" VerticalAlignment="Top" Width="607" SelectionChanged="myListView_SelectionChanged">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal" Margin="0,0,0,17">
                        <StackPanel Width="50">
                            <TextBlock Text="{Binding Id}" TextWrapping="Wrap" FontSize="35" Foreground="#FFBFB9B9" Margin="5,0,0,0"/>
                        </StackPanel>
                        <StackPanel Width="150">
                            <TextBlock Text="{Binding Name}" TextWrapping="Wrap" FontSize="35" Foreground="#FFBFB9B9" Margin="5,0,0,0"/>
                        </StackPanel>
                        <StackPanel Width="400">
                            <TextBlock Text="{Binding Email}" TextWrapping="Wrap" FontSize="35" Foreground="#FFBFB9B9" Margin="5,0,0,0"/>
                        </StackPanel>
                    </StackPanel>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
        <TextBlock HorizontalAlignment="Left" Margin="78,62,0,0" TextWrapping="Wrap" Text="List Data" VerticalAlignment="Top" FontSize="50"/>

    </Grid>


</Page>



Windows Store Apps Master Detail

เพจของ DetailPage.xaml

<Page
    x:Class="WindowsStoreApps.DetailPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:WindowsStoreApps"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

        <Grid x:Name="ContentPanel" Margin="12,2,12,-2">
            <TextBlock HorizontalAlignment="Left" Margin="515,95,0,0" TextWrapping="Wrap" Text="Detail Data" VerticalAlignment="Top" FontSize="50"/>

            <TextBlock HorizontalAlignment="Left" Margin="406,207,0,0" TextWrapping="Wrap" Text="ID :" VerticalAlignment="Top" FontSize="30"/>
            <TextBlock x:Name="lblID" HorizontalAlignment="Left" Height="36" Margin="711,210,0,0" Text="ID" TextWrapping="Wrap" VerticalAlignment="Top" Width="222" FontSize="30"/>

            <TextBlock HorizontalAlignment="Left" Margin="400,292,0,0" TextWrapping="Wrap" Text="Name :" VerticalAlignment="Top" FontSize="30"/>
            <TextBlock x:Name="lblName" HorizontalAlignment="Left" Height="36" Margin="714,286,0,0" Text="Name" TextWrapping="Wrap" VerticalAlignment="Top" Width="319" FontSize="30"/>

            <TextBlock HorizontalAlignment="Left" Margin="402,366,0,0" TextWrapping="Wrap" Text="Email :" VerticalAlignment="Top" FontSize="30"/>
            <TextBlock x:Name="lblEmail" HorizontalAlignment="Left" Height="36" Margin="717,369,0,0" Text="Email" TextWrapping="Wrap" VerticalAlignment="Top" Width="326" FontSize="30"/>
        </Grid>
    </Grid>
</Page>


ส่วนของ C# ที่ใช้สำหรับการแสดง Master และ Detail

MainPage.xaml.cs
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using Windows.Devices.Geolocation;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.Core;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;

using MySql.Data.MySqlClient;

// The Blank Page item template is documented at http://go.microsoft.com/fwlink/?LinkId=234238

namespace WindowsStoreApps
{
    /// <summary>
    /// An empty page that can be used on its own or navigated to within a Frame.
    /// </summary>
    /// 

    public class MyMember
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public string Email { get; set; }
    }

    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();
        }

        protected override void OnNavigatedTo(NavigationEventArgs e)
        {
            List<MyMember> items = new List<MyMember>();

            string strConnection = "server=localhost;database=mydatabase;uid=root;password=root;";

            using (MySqlConnection connection = new MySqlConnection(strConnection))
            {
                connection.Open();

                MySqlCommand cmd = new MySqlCommand("SELECT * FROM member", connection);
                using (MySqlDataReader reader = cmd.ExecuteReader())
                {
                    while (reader.Read())
                    {
                        items.Add(new MyMember
                        {
                            Id = Convert.ToInt32(reader.GetString("ID"))
                            ,
                            Name = reader.GetString("Name")
                            ,
                            Email = reader.GetString("Email")
                        });
                    }
                }

            }

            this.myListView.ItemsSource = items;
        }

        private void myListView_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            MyMember member = (sender as ListView).SelectedItem as MyMember;
            this.Frame.Navigate(typeof(DetailPage), member.Id.ToString());
        }
       
    }
}

DetailPage.xaml.cs
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Runtime.InteropServices.WindowsRuntime;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;

using MySql.Data.MySqlClient;

// The Blank Page item template is documented at http://go.microsoft.com/fwlink/?LinkId=234238

namespace WindowsStoreApps
{
    /// <summary>
    /// An empty page that can be used on its own or navigated to within a Frame.
    /// </summary>
    public sealed partial class DetailPage : Page
    {
        public DetailPage()
        {
            this.InitializeComponent();
        }

        string id = string.Empty;

        protected override void OnNavigatedTo(NavigationEventArgs e)
        {
            id = e.Parameter as string;

            string strConnection = "server=localhost;database=mydatabase;uid=root;password=root;";

            using (MySqlConnection connection = new MySqlConnection(strConnection))
            {
                connection.Open();

                MySqlCommand cmd = new MySqlCommand("SELECT * FROM member where ID = '" + id + "' ", connection);
                using (MySqlDataReader reader = cmd.ExecuteReader())
                {

                    reader.Read();

                    this.lblID.Text = reader.GetString("ID");
                    this.lblName.Text = reader.GetString("Name");
                    this.lblEmail.Text = reader.GetString("Email");

                }

            }

        }

    }
}

Screenshot

Windows Store Apps Master Detail

แสดงการ Binding ข้อมูลลงบน ListView และเมื่อคลิกใน Item ของ ListView จะส่งค่าไปยัง Detail Page ซึ่งจะแสดงรายละเอียดต่าง ๆ ที่ได้ส่งมาก่อนหน้านี้

Windows Store Apps Master Detail

แสดงรายละเอียดในหน้า Detail Page ที่ถูกส่งมาจากในหน้า Master







.

   
Share


ช่วยกันสนับสนุนรักษาเว็บไซต์ความรู้แห่งนี้ไว้ด้วยการสนับสนุน Source Code 2.0 ของทีมงานไทยครีเอท


ลองใช้ค้นหาข้อมูล


   


Bookmark.   
       
  By : ThaiCreate.Com Team (บทความเป็นลิขสิทธิ์ของเว็บไทยครีเอทห้ามนำเผยแพร่ ณ เว็บไซต์อื่น ๆ)
  Score Rating :  
  Create/Update Date : 2014-03-17 12:21:53 / 2017-03-19 14:50:23
  Download : No files
 Sponsored Links / Related

 
Local app data จัดเก็บไฟล์ลง Storage บน Windows Store Apps (C#)
Rating :

 
Roaming app data จัดเก็บไฟล์ลง Storage บน Windows Store Apps (C#)
Rating :

 
Temporary app data จัดเก็บไฟล์ลง Storage บน Windows Store Apps (C#)
Rating :

 
File Dialog และ Save จัดเก็บไฟล์ลง Storage ของ Windows Store Apps (C#)
Rating :

 
Copy ไฟล์ลง Storage แสดงชื่อไฟล์ใน Storage บน Windows Store Apps (C#)
Rating :

 
ดาวน์โหลดจัดเก็บไฟล์ลงบน Storage ของ Windows Store Apps (C#)
Rating :

 
การสร้าง Text file และการจัดเก็บบน Storage ของ Windows Store Apps (C#)
Rating :

 
MySQL ตอนที่ 1 : Windows Store Apps ติดต่อกับ MySQL Database (C#)
Rating :

 
MySQL ตอนที่ 2 : Windows Store Apps ทำการ Insert , Update , Delete (C#)
Rating :

 
MySQL ตอนที่ 3 : Windows Store Apps กับ MySQL ข้าม Host หรือ Server (C#)
Rating :

 
Windows Store Apps DataBinding - ListView / Database Binding (C#)
Rating :

 
Windows Store Apps DataBinding - ListBox / Database Binding (C#)
Rating :

 
Windows Store Apps DataBinding - GridView / Database Binding (C#)
Rating :

 
SQLite : Windows Store Apps ติดต่อกลับ SQLite Database (C#)
Rating :

 
Windows Store Apps การอ่าน Text file และ CSV และการ Data Binding(C#)
Rating :


ThaiCreate.Com Forum


Comunity Forum Free Web Script
Jobs Freelance Free Uploads
Free Web Hosting Free Tools

สอน PHP ผ่าน Youtube ฟรี
สอน Android การเขียนโปรแกรม Android
สอน Windows Phone การเขียนโปรแกรม Windows Phone 7 และ 8
สอน iOS การเขียนโปรแกรม iPhone, iPad
สอน Java การเขียนโปรแกรม ภาษา Java
สอน Java GUI การเขียนโปรแกรม ภาษา Java GUI
สอน JSP การเขียนโปรแกรม ภาษา Java
สอน jQuery การเขียนโปรแกรม ภาษา jQuery
สอน .Net การเขียนโปรแกรม ภาษา .Net
Free Tutorial
สอน Google Maps Api
สอน Windows Service
สอน Entity Framework
สอน Android
สอน Java เขียน Java
Java GUI Swing
สอน JSP (Web App)
iOS (iPhone,iPad)
Windows Phone
Windows Azure
Windows Store
Laravel Framework
Yii PHP Framework
สอน jQuery
สอน jQuery กับ Ajax
สอน PHP OOP (Vdo)
Ajax Tutorials
SQL Tutorials
สอน SQL (Part 2)
JavaScript Tutorial
Javascript Tips
VBScript Tutorial
VBScript Validation
Microsoft Access
MySQL Tutorials
-- Stored Procedure
MariaDB Database
SQL Server Tutorial
SQL Server 2005
SQL Server 2008
SQL Server 2012
-- Stored Procedure
Oracle Database
-- Stored Procedure
SVN (Subversion)
แนวทางการทำ SEO
ปรับแต่งเว็บให้โหลดเร็ว


Hit Link
   







Load balance : Server 05
ThaiCreate.Com Logo
© www.ThaiCreate.Com. 2003-2024 All Rights Reserved.
ไทยครีเอทบริการ จัดทำดูแลแก้ไข Web Application ทุกรูปแบบ (PHP, .Net Application, VB.Net, C#)
[Conditions Privacy Statement] ติดต่อโฆษณา 081-987-6107 อัตราราคา คลิกที่นี่