User control (ascx) in asp.net and its bindable properties dont show up in the data container - asp.net

When I add a user control which has bindable properties to an asp.net page I do not see its bindable properties on the designer's dialog box when I click the edit Data bindings on the Repeater-Listview
should I add any other propery descriptors?
the markup would be like this inside a repeater or similar control
<uc1:Menu ID="Menu1" superman="<% Eval("userid") %>" runat="server" />
on the bindable property I only use
[System.ComponentModel.DefaultBindingProperty("superman")]
[System.ComponentModel.Bindable(true)]
public int superman
{
get;
set;
}
People discuss it here but they couldn't find a solution

I think this might be a problem with Visual Studio, I have not found a way to show the properties of user controls, but still, you can bind the property even when it does not appear in the options box:
This is how you bind it:
In the user control code behind:
[Bindable(true)]
public string MyProperty
{
get
{
return this.lblMessage.Text;
}
set
{
this.lblMessage.Text = value + DateTime.Now.ToString();
}
}
In the ASCX file:
<asp:Label ID="lblMessage" Text="something" runat="server" />
In the ASPX page:
<asp:DataList runat="server" ID="dataList" Width="50%"
DataSourceID="ObjectDataSource1">
<ItemTemplate>
<uc1:WebUserControl1 runat="server" ID="myUC" MyProperty='<%# Eval("Name") %>' />
</ItemTemplate>
</asp:DataList>
<asp:ObjectDataSource ID="ObjectDataSource1" runat="server"
SelectMethod="GetProducts" TypeName="WebApplication1.Repository">
</asp:ObjectDataSource>
Simple just add the property you created in your UC in the tag:
<uc1:WebUserControl1 runat="server" ID="myUC" MyProperty='<%# Eval("Name") %>' />
This is the output:

I think you just make the markup by typing it,
the user control must be drag and drop to the page in the design view.
try this may helps.

Related

Passing CommandArguement to LinkButton from variable

I have seen many resources on SO that say that I can use following syntax to pass value to CommandArguement of `LinkButton'
<%forearch(var comment in Comments){%>
<asp:LinkButton ID="del" CommandArguement='<%= comment.CommentId%>' onCommand="delete_click" Text="Delete"/>
<%}%>
But when I write this in my ascx file and click on the link the value passed to command argument is "<%=comment.CommentId%>" instead of commentId itself. Please guide what am I doing wrong?
Edit 1
based on answers and comments, I have moved to use repeater instead of foreach and plain code. Here is the code I have come up with
<asp:Repeater ID="commRepeater" SelectMethod="GetPageComments" runat="server">
<ItemTemplate>
<p>
<%#Eval("Comment") %>
<%if(Page.User.Identity.IsAuthenticated && Page.User.Identity.GetUserId() == Eval("UserId")){ %>
<span>
<asp:LinkButton Text="Edit" runat="server" ID="EditLink" CommandArgument='<%#Eval("CommentId")%>' OnClick="Update_Comment" />
<asp:LinkButton Text="Delete" runat="server" ID="DeleteLink" CommandArgument='<%#Eval("CommentId")%>' OnClientClick="if (!confirm('Are you sure you want delete?')) return false;" OnCommand="Delete_Comment" />
</span>
<%} %>
</p>
</ItemTemplate> </asp:Repeater>
you can see that I am trying to show the edit and delete links if user is logged in and his Id matches with user who commented but it tells me that I can on use Eval in databound controls. how would I hide/show edit/delete links conditionally within repeater
You could simply use codebehind, for example in Page_Load:
protected void Page_Load(Object sender, EventArgs e)
{
if(!IsPostBack)
{
del.CommandArgument = comment.CommentId;
}
}
Maybe a better approach would be to use the Comments-collection(which seems to be a list or array of a custom class) as DataSource of a Repeater(or other web-databound control). Then you can add the LinkButtons to the Itemtemplate.
You can then either use ItemCreated or ItemDataBound events of the repeater in codebehind or inline ASP.NET tags to bind the CommandArgument.
For example:
CommandArguement='<%# DataBinder.Eval( Container.DataItem, "CommentId" ) %>'
What you are doing currently is not recommended and is highly error prone. You can easily achieve this with ASP.NET Repeater control like this:-
<asp:Repeater ID="MyRepeater" runat="server">
<ItemTemplate>
<asp:LinkButton ID="del" CommandArguement='<%# Eval("CommentId") %>'
OnCommand="del_Command" Text="Delete" runat="server" />
</ItemTemplate>
</asp:Repeater>
In Page_Load simply bind it:-
if (!Page.IsPostBack)
{
MyRepeater.DataSource = CommentsRepository();
MyRepeater.DataBind();
}
Or Else if you are have ASP.NET 4.5 then use strongly type Data Bound controls like this:-
<asp:Repeater ID="MyRepeater" runat="server" ItemType="MyNamespace.Comment"
SelectMethod="MyRepeater_GetData">
<ItemTemplate>
<asp:LinkButton ID="del" CommandArguement='<%# Item.CommentId %>'
OnCommand="del_Command" Text="Delete" runat="server" />
</ItemTemplate>
</asp:Repeater>
And you method in code behind should be something like this(just for Demo):-
public IEnumerable<MyNamespace.Comment> MyRepeater_GetData()
{
return new List<Comment>
{
new Comment { CommentId =1, Name= "foo"},
new Comment { CommentId =2, Name= "bar"},
};
}

Databinding to a View Model not working

I have an AJAX Accordion Control sitting on my Web Form. I have a Asp.Net Label sitting inside an Accordion Pane. I want to databind the text property of the label to a View Model I have running.
The Label Text Property never seems to databind with the View Model? It will work perfectly if I pull the label outside of the Accordion Pane, but not inside?
This works:
<asp:Label runat="server" Text='<%# Model.Program.NameVisible.ToString() %>' />
This does not:
<asp:AccordionPane ID="AccordionPane2" runat="server">
<Header>
Advanced Search
</Header>
<Content>
<asp:Panel ID="pnlAdvancedSearch" runat="server">
<table cellpadding="2" cellspacing="0" width="100%" runat="server">
<tr>
<td align="right">
<asp:Label runat="server" Text='<%# Model.Program.NameVisible.ToString() %>' />
</td>
</tr>
</table>
</asp:Panel>
</Content>
</asp:AccordionPane>
Any ideas or workarounds?
Thanks.
Update: This apparently does not work when nested inside any AJAX Controls. I have had the same issue with the binding not taking place inside a ModalPopUpExtender as well.
The DataBind of the Accordion control does not invoke DataBind for each of the explicitly defined, custom AccordionPane controls. It instead will build the panes, as per the answer provided by Jupaol, using templates.
In your example, you will need to explicitly call DataBind on the control you want bound, or on a parent which will invoke databinding on all children. So, in your example, calling pnlAdvancedSearch.DataBind() would suffice to bind your label, and any other controls within the search panel.
I feel it worthwhile to add, however, that it also seems like it would be simpler to replace your <asp:Label> control entirely with a simple:
<%: Model.Program.NameVisible.ToString() %>
I just found a way
First of all the Accordion control does support data binding:
The Accordion can also be databound. Simply specify a data source through the DataSource or DataSourceID properties and then set your data items in the HeaderTemplate and ContentTemplate properties.
Source
Example:
Output
ASPX
<ajax:Accordion runat="server" ID="ajax22" RequireOpenedPane="true"
HeaderCssClass="accordionHeader"
HeaderSelectedCssClass="accordionHeaderSelected"
ContentCssClass="accordionContent"
>
<ContentTemplate>
Even cooler content
<br />
<asp:Label Text='<%# DataBinder.Eval(Container.DataItem, "Something") %>' ID="lbl" runat="server" />
</ContentTemplate>
<HeaderTemplate>
Cool header
<br />
<asp:Label Text='<%# DataBinder.Eval(Container.DataItem, "Something") %>' ID="lbl" runat="server" />
</HeaderTemplate>
</ajax:Accordion>
ASPX code behind
You need to specify the Accordion.DataSource property, this property only supports IEnumerable or IListSource, therefore you would need to bind your accordion as follows:
this.ajax22.DataSource = new[] { this.Model };
this.DataBind();
Model
public class MyModel
{
public MyModel()
{
this.Something = "plop!";
}
public string Something { get; set; }
}
When you bind your Accordion, a number of AccordionPanes are created to represent each bound item.
If you specify additional custom AccordionPanes, when you apply binding as specified above, these AccordionPanes will be ignored and won't be rendered.

asp.net ajax like reorder list

I'm trying to create a draggable list to change the order some pictures are displayed in a product page. I wan't to be able to do this in the product edit page (same place where I add the pics and their description). So, when creating I have nothing inserted on the database and since the AJAX toolkit reorderlist only works with a datasource I was specifying the list as the source of the reorderlist and calling the databind method. In the item template of the reorder list I have a textbox to edit the pic description and a img that displays the photo. I can drag the items and the list gets reordered, however when I click save I can't get the updated text on the textbox and the order property on the picture doesn't get updated. I've tried manually getting the items in the reorderlist but they're always null even though the list shows 20 items the DataItem is empty. I've enabled viewstate and didn't help either.
Here's my code:
<ajaxToolkit:ReorderList ID="rdlPhotos" runat="server" SortOrderField="PhotoOrder" AllowReorder="true" PostBackOnReorder="true" ClientIDMode="AutoID" EnableViewState="true" ViewStateMode="Enabled">
<ItemTemplate>
<div>
<%--<eva:PhotoView ID="iPV" runat="server" Photo='<%# Container.DataItem %>' />--%>
<asp:Image ID="imgPhoto" runat="server" ImageUrl='<%# string.Format("http://eva-atelier.net/sparkle{0}", Eval("Path").ToString().Substring(1)) %>' Width="150" Height="150" />
<div class="formGrid">
<label class="formLabel">Title</label>
<asp:TextBox ID="txtTitle" runat="server" Text='<%#Bind("FileTitle") %>' />
<br />
<label class="formLabel">Description</label>
<asp:TextBox ID="txtDescription" runat="server" Text='<%#Bind("FileDescription") %>' />
<br />
</div>
<p>
<asp:Button ID="btnRemove" runat="server" Text="Remover" />
</p>
</div>
</ItemTemplate>
<ReorderTemplate>
<asp:Panel ID="pnlReorder" runat="server" />
</ReorderTemplate>
<DragHandleTemplate>
<div style="width:20px;height:20px;background-color:Red"></div>
</DragHandleTemplate>
</ajaxToolkit:ReorderList>
And below the C# code:
private void AddPhotosView()
{
if (_currentProduct.Photos != null && _currentProduct.Photos.Count > 0)
{
rdlPhotos.DataSource = _currentProduct.Photos;
rdlPhotos.DataBind();
}
}
I'm new to Asp.net I come from a large WPF background, sorry if I'm making basic question :)
Thanks
For updating order of ReorderList items add your handler for it's OnItemReorder event. In this case your handler may looks like this:
protected void ReorderHandler(object sender, ReorderListItemReorderEventArgs e)
{
var movedPhoto = _currentProduct.Photos[e.OldIndex];
_currentProduct.Photos.RemoveAt(e.OldIndex);
_currentProduct.Photos.Insert(e.NewIndex, movedPhoto);
_currentProduct.Photos.Save();
}
For updating FileTitle and FileDescription of single Photo it is easy to use OnUpdateCommand event of ReorderList and a button with attribute CommandName="Update" for each Photo.
And for updating all Photos at once just iterate through rdlPhotos.Items in next manner:
protected void SaveAllHandler(object sender, EventArgs e)
{
foreach (var riItem in rdlPhotos.Items)
{
var id = ((HiddenField)riItem.FindControl("itemID")).Value;
var title = ((TextBox)riItem.FindControl("txtTitle")).Text;
var description = ((TextBox)riItem.FindControl("txtDescription")).Text;
UpdatePhoto(id, title, description);
}
}
Remember that rdlPhotos.Items here are in initial order. And for identifying which Photo should be updated add hidden field with Photo.ID-value to ReorderList's ItemTemplate like this:
<asp:HiddenField runat="server" ID="itemID" Value='<%# Eval("ID") %>' />

Change the source of image by clicking thumbnail using updatePanel

For example, i have this ImageViewer.ascx UserControl:
<div class="ImageTumbnails">
<asp:ListView ID="ImageList" runat="server" ItemPlaceholderID="ItemContainer">
<LayoutTemplate>
<asp:PlaceHolder ID="ItemContainer" runat="server" />
</LayoutTemplate>
<ItemTemplate>
<asp:HyperLink runat="server"
NavigateUrl='<%# Link.ToProductImage(Eval("ImageFile").ToString())%>'>
<asp:Image runat="server" ImageUrl='<%# Link.ToThumbnail(Eval("ImageFile").ToString()) %>' />
</asp:HyperLink>
</ItemTemplate>
</asp:ListView>
</div>
<div class="ImageBig">
<asp:Image ID="ProductImageBig" runat="server" ImageUrl="" />
</div>
When the thumbnail is clicked it will change the source of ProductImageBig with its hyperlink target.
How can i achieve this using UpdatePanel ? ( Or will i be able to )
You are currently using a HyperLink control which will direct the user to the value of the NavigateUrl property. If it goes to a separate page, how will it modify the URL of the ProductImageBig control?
One option is to change the HyperLink control to a ImageButton and then specify a method in your codebehind for the "OnCommand" property.
In the code behind, you can cast the sender object to a the ImageButton, retrieve its ImageURL, and then set the URL of your ProductImageBig
public void DisplayPhoto(object sender, CommandEventArgs args)
{
ProductImageBig.NavigateUrl = ((ImageButton)sender).ImageUrl;
updatePanel.Update();
}
If you have the entire markup surrounded in an UpdatePanel named "updatePanel" and you have the properties set correctly, you can then update it after setting the Url.

NavigateUrl with NavigateUrlFormat populated from AppSettings (dynamically)

I have a gridview with a hyperlink inside an TemplateField. The NavigateUrlFormat will be populated from the Web.Config file, it has the following format:
mysite.com/{0}
Where {0} will be populated from the gridview datasource, however, my current code doesn't work:
<asp:TemplateField HeaderText="WorkOrder #">
<ItemTemplate>
<asp:HyperLink ID="HyperLink1" runat="server"
NavigateUrl='<%# Eval("WorkOrderKey", "<%$ AppSettings:DispatchLink %>") %>'
Text='<%# Eval("WorkOrderKey") %>'></asp:HyperLink>
</ItemTemplate>
</asp:TemplateField>
The problem is right after "AppSettings:DispatchLink", it closes the tag when it see "%>". Is there a way around this problem?
Thank you,
Kenny.
You cannot nest <%# and other tags. Use ConfigurationManager.AppSettings["DispatchLink"] (pls. lookup correkt Class/Property in MSDN) instead.
Or: If your are using that HyperLink Control more than once I would suggest that you create an own MYHyperLink derived from System.Web.UI.WebControls.HyperLink and set the Property NavigateUrlFormatString in your Constructor.
Something like this:
public class DispatchLink : System.Web.UI.WebControls.HyperLink
{
public DispatchLink()
{
this. NavigateUrlFormatString = ConfigurationManager.AppSettings["DispatchLink"]
}
}

Resources