如何将MongoDB文档数据绑定到网格视图并在UWP中相应显示？ [英] How to bind MongoDB documents data to Grid View and display accordingly in UWP?
问题描述
嗨社区，我试图将MongoDB中存储的文件显示给GridView，我试过下面的代码，它不会显示任何内容。我可以知道我在哪里弄错了吗？
这是我的样本数据：
_ id：ObjectId（" 59d33acc050bad03bcbd7094"）
时间戳：2017-10-03 15：22：51.828
ID：" 915114910253764608"
内容："какпел赛普拉斯山有些人告诉我，我需要帮助"
DateCreated：2015-09-01 00：00：00.000
UserID：" 3513470296"
用户名：" Sapsan"
这是我在UI上的XAML代码：
< Page
x：Class =" ; MyApp.viewrecord"
xmlns =" http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns：x =" http://schemas.microsoft.com/winfx/2006/xaml"
xmlns：local =" using：MyApp"
xmlns：d =" http://schemas.microsoft.com/expression/blend/2008"
xmlns：mc =" http://schemas.openxmlformats.org/markup-compatibility/2006"
mc：Ignorable =" d">
< RelativePanel x：Name =" Root"背景= QUOT;黑色">
< Image x：Name =" BackgroundImage"源= QUOT; MS-APPX：///Assets/recordback.jpg"
RelativePanel.AlignBottomWithPanel =" True"
RelativePanel.AlignLeftWithPanel =" True"
RelativePanel.AlignRightWithPanel =" True"
RelativePanel.AlignTopWithPanel =" True"
Stretch =" UniformToFill" />
< GridView ItemsSource =" x：绑定数据" X：名称= QUOT;数据网格"的HorizontalAlignment = QUOT;左"高度= QUOT; 578" VerticalAlignment = QUOT;陀螺"宽度= QUOT; 1194"余量= QUOT; 139219，-1333，-787"不透明度= QUOT; 0.2"的FontFamily = QUOT;洛氏"字号= QUOT; 20"背景= QUOT;白色" />
< Border BorderBrush ="＃FF000000"了borderThickness = QUOT; 1,1,1,1" CornerRadius = QUOT; 0,0,0,0"余量= QUOT; -2,1，-1437，-135"不透明度= QUOT; 0.3"背景= QUOT;白色" />
< TextBlock HorizontalAlignment =" Left"高度= QUOT; 52" Text ="查看存储在数据库内的数据" TextWrapping = QUOT;包覆与QUOT; VerticalAlignment = QUOT;陀螺"宽度= QUOT; 971"余量= QUOT; 380,65，-1289.182，-97"的FontFamily = QUOT;洛氏"字号= QUOT; 36英寸;前景= QUOT;白色" />
< / RelativePanel>
这里是数据绑定的类：
public class data
{
public DateTime Timestamp {get;组; }
公共字符串ID {get;组; }
public string Content {get;组; }
public DateTime DateCreated {get;组; }
公共字符串UserID {get;组; }
public string用户名{get;组; }
}
以下是用户界面背后的C＃代码：
private async void Display（）
{
try
{
MongoClient client = new MongoClient（" mongodb：// localhost"）;
var database = client.GetDatabase（" TrainData"）;
var collection = database.GetCollection< BsonDocument>（" Sample3"）;
DataTable data = new DataTable（）;
var filter = new BsonDocument（）;
var count;
using（var cursor = await collection.FindAsync（filter））
{
while（await cursor.MoveNextAsync（））
{
var document = cursor.Current ;
data.Columns.Add（" Timestamp"，typeof（DateTime））;
data.Columns.Add（" ID"，typeof（string））;
data.Columns.Add（" Content"，typeof（string））;
data.Columns.Add（" DateCreated"，typeof（DateTime））;
data.Columns.Add（" UserID"，typeof（string））;
data.Columns.Add（" Username"，typeof（string））;
foreach（文档中的var项）
{
data.Rows.Add（item [" Timestamp"]，item [" ID"]，item ["内容"]，项目[&DateCreated"]，项目[" UserID"]，item [" Username"]）;
}
count ++;
}
DataGrid.ItemsSource = data;
}
}
catch（exception ex）
{
MessageDialog messagebox = new MessageDialog（" Display Data Error：" + ex）;
await messagebox.ShowAsync（）;
}
}
显示没有错误，但GridView中也没有数据显示。
我可以知道我的代码有什么问题吗？
谢谢！
Hi Corene Lim
>>
如何将MongoDB文档数据绑定到网格视图并在UWP中相应显示？
好像你正在使用wron g数据绑定源。在我的测试中，有一个例外"
当使用< DataTable>时，值不在预期范围内"作为ItemsSource。我建议您需要从文档中获取数据< data>类，然后使用< 和
数据绑定深度。
最好的问候，
罗伊
Hi community, I was trying to display the stored documents in MongoDB to GridView, I have tried below codes and it will not displayed anything. May I know is there anywhere I'm making mistake?
This is my sample data:
_id:ObjectId("59d33acc050bad03bcbd7094")
Timestamp:2017-10-03 15:22:51.828
ID:"915114910253764608"
Content:"как пел Cypress Hill Some people tell me that I need help"
DateCreated:2015-09-01 00:00:00.000
UserID:"3513470296"
Username:"Sapsan" This is my XAML Code on the UI:
<Page
x:Class="MyApp.viewrecord"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:MyApp"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<RelativePanel x:Name="Root" Background="Black">
<Image x:Name="BackgroundImage" Source="ms-appx:///Assets/recordback.jpg"
RelativePanel.AlignBottomWithPanel="True"
RelativePanel.AlignLeftWithPanel="True"
RelativePanel.AlignRightWithPanel="True"
RelativePanel.AlignTopWithPanel="True"
Stretch="UniformToFill"/>
<GridView ItemsSource="x:Bind data" x:Name="DataGrid" HorizontalAlignment="Left" Height="578" VerticalAlignment="Top" Width="1194" Margin="139,219,-1333,-787" Opacity="0.2" FontFamily="Rockwell" FontSize="20" Background="White"/>
<Border BorderBrush="#FF000000" BorderThickness="1,1,1,1" CornerRadius="0,0,0,0" Margin="-2,1,-1437,-135" Opacity="0.3" Background="White"/>
<TextBlock HorizontalAlignment="Left" Height="52" Text="View Data That Stored Inside The Database" TextWrapping="Wrap" VerticalAlignment="Top" Width="971" Margin="380,65,-1289.182,-97" FontFamily="Rockwell" FontSize="36" Foreground="White"/>
</RelativePanel>And here is the class for data binding:
public class data
{
public DateTime Timestamp { get; set; }
public string ID { get; set; }
public string Content { get; set; }
public DateTime DateCreated { get; set; }
public string UserID { get; set; }
public string Username { get; set; }
}
Here is the C# code behind the UI:
private async void Display()
{
try
{
MongoClient client = new MongoClient("mongodb://localhost");
var database = client.GetDatabase("TrainData");
var collection = database.GetCollection<BsonDocument>("Sample3");
DataTable data = new DataTable();
var filter = new BsonDocument();
var count;
using (var cursor = await collection.FindAsync(filter))
{
while (await cursor.MoveNextAsync())
{
var document = cursor.Current;
data.Columns.Add("Timestamp", typeof(DateTime));
data.Columns.Add("ID", typeof(string));
data.Columns.Add("Content", typeof(string));
data.Columns.Add("DateCreated", typeof(DateTime));
data.Columns.Add("UserID", typeof(string));
data.Columns.Add("Username", typeof(string));
foreach (var item in document)
{
data.Rows.Add(item["Timestamp"], item["ID"], item["Content"],item["DateCreated"],item["UserID"], item["Username"]);
}
count++;
}
DataGrid.ItemsSource = data;
}
}
catch (Exception ex)
{
MessageDialog messagebox = new MessageDialog("Display Data Error: "+ex);
await messagebox.ShowAsync();
}
}
There was no error displayed but also no data display in the GridView.
May I know what is wrong with my code?
Thanks!
Hi Corene Lim
>> How to bind MongoDB documents data to Grid View and display accordingly in UWP?
It seems that you are using a wrong source for databinding. In my test, there is an exception" Value does not fall within the expected range" when using <DataTable> as the ItemsSource. I suggest you need to get the data from the documents as <data> class and then use a <list> or a <ObservableCollection> which contains the <data> Class as the <ItemsSource> of the <GridView>.
Here is a simple code here to create a list:
public List<data> mylist { get; set; } DateTime Timestamp = DateTime.Parse("2017-10-03 15:22:51.828"); DateTime DateCreated = DateTime.Parse("2017-10-03 0:0:0"); //set some fake date data dataitem = new data(); dataitem.ID = "915114910253764608"; dataitem.Timestamp = Timestamp; dataitem.Content = "I need help"; dataitem.DateCreated = DateCreated; dataitem.UserID = "3513470296"; dataitem.Username = "Sapsan"; //add data to the list mylist = new List<data>(); mylist.Add(dataitem); mylist.Add(dataitem);
The <data> class I’m using is the same one you posted above. I set some fake value to the <data> Class. In your scenario, you might use the real data for the MongoDB.
Next, when you want to show these data in the <GridView>, please create the ItemTemplate for the <GridView>. It looks like this:
<GridView x:Name="DataGrid" ItemsSource="{x:Bind mylist}" FontFamily="Rockwell" FontSize="20" Background="White"> <GridView.ItemTemplate> <DataTemplate x:DataType="local:data"> <StackPanel Orientation="Vertical"> <TextBlock Text="{x:Bind Timestamp}"/> <TextBlock Text="{x:Bind ID}"/> <TextBlock Text="{x:Bind Content}"/> <TextBlock Text="{x:Bind DateCreated}"/> <TextBlock Text="{x:Bind UserID}"/> <TextBlock Text="{x:Bind Username}"/> </StackPanel> </DataTemplate> </GridView.ItemTemplate> </GridView>
This is a simple demo, you could adjust the <TextBlock> to what you like by changing styles. Please refer: XAML styles.
Then run the app, the result looks like this:
Now the data is displayed in the <GridView>.
Please get more information about data binding here: Data binding overview and Data binding in depth.
Best regards,
Roy
这篇关于如何将MongoDB文档数据绑定到网格视图并在UWP中相应显示？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
