The silverlight toolkit provided the AutoCompleteBox and We already had one post talking about the usage about it.
This post will focus on the way we can update the content of the AutoCompleteBox by using the value from the HTML DOM value.
The initialized code was not changed and we only added a new button on the silverlight control which is the
<Button Height="24" HorizontalAlignment="Right" Margin="0,20,123,0" VerticalAlignment="Top" Width="76" Click="Button_Click" Content="Refresh"/>
Then we go to the web page ToolboxTestTestPage.aspx to add a new Textarea input box which will provide the content.
<textarea id="DataSource" name="DataSource" cols="10" rows="5"></textarea>
The real problem is about the interacting the silverlight application and the HTML DOM object.
The first code I tried is to use the common sense way which is
1: HtmlElement datasource= HtmlPage.Document.GetElementById("DataSource");
2: if (datasource != null)
3: {
4: string content = datasource.GetProperty("innerHTML") as string;
5: List<string> list=content.Split("\n".ToCharArray()).ToList();
6: txtAutoComplete.ItemsSource = list;
7: }
But I find it's almost no way for me get the user input value, so I changed my way to using the Javascript.
1: string content = (string)HtmlPage.Window.Invoke("GetDataSource", null);
2: List<string> list = content.Split("\n".ToCharArray()).ToList();
3: txtAutoComplete.ItemsSource = list;
when I did this , I realized that how cool and convenient will be when we have the C# dynamic.
And the Javascript on the page is
1: <head runat="server">
2: <title>ToolboxTest</title>
3: <script type="text/javascript" language="javascript">
4: function GetDataSource() {
5: return $get("DataSource", document).value;
6: }
7: </script>
8: </head>
Keep in mind , don't use the Html.Document.Invoke because the Javascript is an instance of the html window, not the document. In the future post, I will take another way around to getting the silverlight value from the HTML Dom.