Showing posts with label default. Show all posts
Showing posts with label default. Show all posts

Monday, March 26, 2012

listview drilldown into itself

There is cool example how to make drilldown from one listview to another athttp://www.wilcob.com/wilco/Default/161/showpost.aspx
It is really usefull in some cases, but what if you need results of second datasource under each item in listview? I tried simply copy second template inside first one, but this doesn't work:
<dataSourceid="productDataSource"serviceURL="Products.asmx"/>
<dataSourceid="commentsDataSource"serviceURL="Comments.asmx"/>
<listViewid="productListView" ...>
<bindings>
<bindingdataContext="productDataSource"dataPath="data"property="data"/>
</bindings>
[...]
<labelid="nameLabel">
<bindings>
<bindingdataPath="ProductName"property="text"/>
</bindings>
</label>
<buttonid="commentsButton">
<click>
<setPropertytarget="commentsDataSource"property="selectParameters"
propertyKey="ProductID">
<bindings>
<bindingdataPath="sender.dataContext.ProductID"property="value"/>
</bindings>
</setProperty>
<invokeMethodtarget="commentsDataSource"method="select"/>
</click>
</button>
<listViewid="commentsListView">
<bindings>
<bindingdataContext="commentsDataSource"dataPath="data"property="data"/>
</bindings>
</listView>
</listView>


Kick me back on path please...
Before you want to nest controls such as ListView inside a ListView,you should understand how templates work on a high level. Lets look ata basic template first (simplified):
HTML:
<div id="myListView">
</div>
<div class="template">
<div id="myListViewTemplate">
<div id="myListViewItemTemplate">
<span id="nameLabel"></span>
</div>
</div>
</div>
Atlas script:
<listView targetElement="myListView">
<layoutTemplate>
<template layoutElement="myListTemplate" />
</layoutTemplate>
<itemTemplate>
<template layoutElement="myListViewItemTemplate">
<label targetElement="nameLabel">...</label>
</template>
</itemTemplate>
</listView>
This is just a ListView which displays a label (span) for each item.When we define a template, such as the item template, we can definewhat kind of controls the elements inside the context of that templateis. In this example we say that the element "nameLabel", inside theelement "myListViewItemTemplate", is a label.
When you bind the listview against for example a datasource with 2items, Atlas will clone the "myListViewItemTemplate" element to createan item instance that will be added to the DOM. Atlas will look at yourAtlas definitions and instantiate and initialize the componentsassociated with the elements inside this item instance.
In your case, you should do exactly the same with a nested listview as you do with a label.
That is, you should first define the nested listview inside the parentlistview's item template. The HTML for a listview with a nestedlistview could look something like this:
<div id="myListView">
</div>
<div class="template">
<div id="myListViewTemplate">
<div id="myListViewItemTemplate">
<span id="myNameLabel"></span>
<div id="myNestedListView">
</div>
<div class="template">
<div id="myNestedListViewTemplate">
<div id="myNestedListViewItemTemplate">
<span id="myNestedNameLabel"></span>
</div>
</div>
</div>

</div>
</div>
</div>
And the Atlas code would then look something like:
<listView targetElement="myListView" ...>
<layoutTemplate>
<template layoutElement="myListTemplate" />
</layoutTemplate>
<itemTemplate>
<template layoutElement="myListViewItemTemplate">
<label targetElement="nameLabel">...</label>
<listView targetElement="" ...>
<layoutTemplate>
<template layoutElement="myNestedListViewTemplate" />
</layoutTemplate>
<itemTemplate>
<template layoutElement="myNestedListViewItemTemplate">
<label targetElement="myNestedNameLabel">...</label>
</template>
</itemTemplate>
</listView>
</template>
</itemTemplate>
</listView>
I haven't actually tried this, but this should work. Please let me know if this makes sense.

Ok, I got it theoretically, I think. When I copied code from your previous master/detail example, it repeats result of query behind under each element of original listview as you can see onhttp://hidef.asp2.cz/default2.aspx (maybe only in code, it sometimes doesnt work) I think in this scenario I must do other type of data keying then you have in your master/detail example. There should be way to bind that nested listview on load with automatic=false and then do only evaluatein, but I didn't find way how to bind parameter of datasource for nested one from datasource of master one like:

<dataSourceid="commentsDS"runat="server" serviceUrl="comments.asmx">
<bindings>
<binding dataContext="??something??" dataPath="text" property="selectParameters" propertyKey="topic"/>
</bindings>
</dataSource>
...
<listView targetElement="CommentsListView" itemTemplateParentElementId="CommentsListViewTemplate" propertyChanged="onChange">
<bindings>
<binding dataContext="commentsDS" dataPath="data" property="data"/>
</bindings>
<layoutTemplate>
<template layoutElement="CommentsListViewTemplate" />
</layoutTemplate>
<itemTemplate>
<template layoutElement="CommentsListViewItemTemplate">
<label targetElement="commentText">
<bindings>
<binding dataPath="c_text" property="text"/>
</bindings>
</label>
</template>
</itemTemplate>
</listView>


I think your code looks correct. You should leave the data contextempty, and set the dataPath to for example "NewsID", which would be aproperty of the dataitem inside the outer listview. I think that wouldwork.

I don't know if I set right dataPath and if code for setting property is ok, but it doesn't work. You can see what I tried on default.aspx. I'll continue trying...but it looks I'm running in circle again.
You should declare the comments data source _inside_ the itemtemplateof the listview, in which you have placed the nested listview.

It doesnt workSad [:(]
I tried set property named newsID and moved datasource first. Then I tried to make dummy control with this id bounded as text and setting datasource parameter by this. Nothing of this works.
If I got it, atlas creates datasource instance for each item in listview, so I tried simply parametrize by binding this ID directly, as it is on my page now. I don't know why it doesn't work,but I also don't know if it is a good idea to let it work in this way. This mechanism should work fine on my simple page rendering engine with few items. But when I'm tried in classic asp.net create master/detail in this fashion, it was unusable. I solved it by binding to dataset with two related datatables and detail repeater was defined as:
<asp:repeater id="childRepeater" datasource='<%# ((DataRowView)Container.DataItem).Row.GetChildRows("myrelation") %>' runat="server">
Are there ..or will be there in future...techniques in atlas which can work same way?

You can see a demo of a nested listview using atlas athttp://www.wilcob.com/atlasnestedlistview. The source for this demo canbe downloaded fromhttp://www.wilcob.com/wilco/Downloads/Programming/AtlasNestedListView.zip.
As you can see, I currently use a button to invoke the nestedDataSource. I can't currently think of a way that would automagicallylet it select data from the service once it is created, withoutmodifying atlas sources or adding a custom control.
Update: fixed links.

It was close..huh..I had dataContext="newsNameLabel" dataPath="ID" instead of dataContext="newsNameLabel" dataPath="dataContext.ID" in one of my testversions. Thanks

Saturday, March 24, 2012

Load a web page, play with the html code and paste in a DIV

Hi,

I have a default.aspx page and I want one of it's frames to present a web page from another site. I tried using JS AJAX and found that is is impossible to do this across sites. It there a way to get the server to get a web page, allow me to play with it's html code and then paste it in a div in default.aspx?

I know how to get my I default.aspx page to invoke a function on WebServer.asmx, but have no idea how to get a web page in VB. Can someone explain how / redirect me to an explaination?

Thanks
Yoni

Check this article:http://msdn2.microsoft.com/en-us/library/system.net.webrequest.aspx


If it's in a frame anyway, it seems like you might be adding needless complexity by trying to do this on the client side. For good security reasons, there will always be limitations on what you can do cross-domain on the client side.

You could just set that frame's src to a RemoteContent.aspx (or whatever) page on your site, and have that make the web request on the server side, manipulate it how you want, and then present it.


gt1329a:

If it's in a frame anyway, it seems like you might be adding needless complexity by trying to do this on the client side. For good security reasons, there will always be limitations on what you can do cross-domain on the client side.

You could just set that frame's src to a RemoteContent.aspx (or whatever) page on your site, and have that make the web request on the server side, manipulate it how you want, and then present it.

and how can I do this? also, can I put it in an iframe?
Thanks,
Yoni


MSDN has good information on how to use the WebRequest class (as someone else linked above): http://msdn2.microsoft.com/en-us/library/system.net.webrequest(VS.80).aspx

It would work fine in an iframe. Just set the iframe's src to your RemoteRequest.aspx (or whatever) and have that do the processing on the server side and output what you want to appear in the iframe.


gt1329a:

MSDN has good information on how to use the WebRequest class (as someone else linked above): http://msdn2.microsoft.com/en-us/library/system.net.webrequest(VS.80).aspx

I tried to get the following page but keep getting a timout error:
http://he.wikipedia.org/w/index.php?title=%D7%AA%D7%91%D7%A0%D7%99%D7%AA:%D7%94%D7%A2%D7%A8%D7%9A_%D7%94%D7%9E%D7%95%D7%9E%D7%9C%D7%A5&action=render
Why won't Microsoft's WebRequest example work with this page?
Yoni


I'm not sure why that would time out. Is there anything blocking outbound connections to port 80 on the server you're testing this on?

Another thing you might want to look at issetting the request's user agent to a popular browser's. Wikipedia might have some sort of restrictions in place to deter scrapers from stealing its content.


Thanks. I managed to load the page using the following code:

Dim wcAs WebClient =New WebClient()wc.Credentials = CredentialCache.DefaultCredentialswc.Encoding = System.Text.Encoding.UTF8wc.Headers.Add("Content-Type","application/x-www-form-urlencoded")wc.Headers.Add("User-agent","User")Dim resAs Uri =New Uri("http://he.wikipedia.org/w/index.php?title=%D7%AA%D7%91%D7%A0%D7%99%D7%AA:%D7%94%D7%A2%D7%A8%D7%9A_%D7%94%D7%9E%D7%95%D7%9E%D7%9C%D7%A5&action=render&ctype=text/plain&dontcountme=s")Return wc.DownloadString(res)
Thanks for your help.

Wednesday, March 21, 2012

Loading external .aspx file into AJAX Toolkit TabPanel

Hello,

I'm new to ASP.NET AJAX. I want to create a default page, maybe a master page. then i want to add the AJAX Toolkit TabContainer with different TabPanels for each of my other .aspx files (home.aspx, about.aspx, etc.) I want to know how I would setup the TabContainer with a tabpanel for each page and load those pages when the appropriate Tab is clicked. a small snippet of example code would be greatly appreciated

Thanks to all in advance

GL

How about something like this?

<ajaxToolkit:TabContainer ID="tabs" runat="server" Width="600px" Height="400px">
<ajaxToolkit:TabPanel ID="tabHome" runat="server" HeaderText="Home">
<ContentTemplate>
<iframe src="http://pics.10026.com/?src=home.aspx" width="100%" height="100%">
</iframe>
</ContentTemplate>
</ajaxToolkit:TabPanel>
<ajaxToolkit:TabPanel ID="tabAbout" runat="server" HeaderText="About">
<ContentTemplate>
<iframe src="http://pics.10026.com/?src=about.aspx" width="100%" height="100%">
</iframe>
</ContentTemplate>
</ajaxToolkit:TabPanel>
</ajaxToolkit:TabContainer>


Thanksctafield, that did the trick. works like a charm but I wonder if there might be another way besides frames. I dont like to use frames plus i'm concerned about browsers that may not support frames. Thank you for the quick response

If there is another way I would greatly appreciate the guide

Thanks

GL


Ok, When I used the iframe my pages end up having 2 separate vertical scrollbars. one for the main window and one for the iframe region. i cna see that confusing my users when they need to scroll up or down. has anyone thought of another solution?

you can actually turn off the scrollbars for the iframe - just make sure you set its width and height to 100% so data doesn't get chopped and that would get rid of the scrollbar for the iframe...

<

iframeid="TargetPane"scrolling="no"


Hi,

You might also be interested in reading one of Scott Guthrie'sblog posts where he created a class called ViewManager to render ASP.NET controls to HTML and send it via a webservice to the page.

Thanks,
Ted


You can add WebControls (.ascx) to each panel you want by using following code-behind:

AjaxControlToolkit.TabPanel tpHome = new AjaxControlToolkit.TabPanel();
tpHome.HeaderText = "Home";
tpHome.ContentTemplate = Page.LoadTemplate("Home.ascx");
tcDefault.Tabs.Add(tpHome);

AjaxControlToolkit.TabPanel tpAbout = new AjaxControlToolkit.TabPanel();
tpAbout.HeaderText = "About";
tpAbout.ContentTemplate = Page.LoadTemplate("About.ascx");
tcDefault.Tabs.Add(tpAbout);

tcDefault is TabContainer control.


AjaxControlToolkit.TabPanel tab = new AjaxControlToolkit.TabPanel();
tab.HeaderText = "test_new_tab";
TabContainer1.Tabs.Add(tab);

??index error WHY?

Good piece of code to use the control on the code behind.
Even the control toolkit samples didn't have these in detail

However i couldn't load an external page onto the page.loadtemplate method
It throws the following error when trying with full path


Exception Details:System.Web.HttpException: 'http://localhost:8080/Documents/9245/bjk49000.PDF' is not a valid virtual path.

Any suggestions?

Rain Man


At the moment i'm using the following method by coding on the client end

<ajaxToolkit:TabPanel runat="server" ID="TabPanelAttachment" HeaderText="Attachments">
<ContentTemplate>
<iframe runat="server" id="iframePreview" width="850" height="800" frameborder ="0"> </iframe>
</ContentTemplate>
</ajaxToolkit:TabPanel
var urlPrefix = "http://localhost:8080/Documents/"
var urlSuffix = docId + "/" + fileName;
var url = urlPrefix + urlSuffix;

$find('TabContainerDocument').set_activeTabIndex(1);
document.getElementById('TabContainerDocument_TabPanelAttachment_iframePreview').src = url;

TabContainerDocument_TabPanelAttachment_iframePreview is the iframe id at run time
Hope that helps for someone who is trying on something similar

Happy coding

Rain Man


This reallyhas to be built into the TabPanel tool.


Haven't tried this but it might be another alternative to controls and iFrames...

Dynamic drive website has example of using Javascript to do page calls to a div, not too sure if will work in but might be good for a try?

http://www.dynamicdrive.com/dynamicindex17/ajaxcontent.htm

Dave