Adding javascript to a link's OnClientClick property while binding a repeater - c#

I'm trying to get this working but no success:
<asp:Repeater ID="Repeater1" runat="server" OnItemCommand="btnDeleteFamily_Click">
<HeaderTemplate>
<table>
<tr>
<th width="90" valign="top"><%=getTag("name")%></th>
</tr>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td><%#Eval("chrname")%></td>
<asp:LinkButton ID="btnDeleteFamily" CssClass="fRight ui-icon ui-icon-trash" runat="server" CommandName="delete" CommandArgument='<%#Eval("idmember")%>' OnClientClick='return confirm("<%= getTag("deletefamilymemberdialog") %>")' Text="" ValidationGroup="delete_family" />
</td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>
When clicking on the btnDeleteFamily OnClientClick the confirm dialog is not shown.
getTag (method in the code behind) is used for localization to get the text depending on the language. My intention is to show that message in the JavaScript dialog, but I'm getting:
<a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$rptFamily$ctl01$btnDeleteFamily','')" class="fRight ui-icon ui-icon-trash" id="ctl00_ContentPlaceHolder1_rptFamily_ctl01_btnDeleteFamily" onclick='return confirm("<%= getTag("deletefamilymemberdialog") %>");'/>
So it's not processing getTag in the server side otherwise I would be getting
onclick='return confirm("Are you sure that you want to delete this entry?");'
Thanks

I think writing the message to page as a javascript variable is a better solution :
<script>
var deleteMemberDialogMessage = '<%= getTag("deletefamilymemberdialog") %>';
</script>
And your repeater :
<asp:LinkButton ID="btnDeleteFamily" CssClass="fRight ui-icon ui-icon-trash"
runat="server" CommandName="delete" CommandArgument='<%#Eval("idmember")%>'
OnClientClick='return confirm(deleteMemberDialogMessage)' Text=""
ValidationGroup="delete_family" />
By the way be sure that your deletefamilymemberdialog message doesn't have single quote.
EDIT : If you want to bind a value from your datasource to your repeater, you should bind your column to control instead of Response.Write (<%=) like that :
<asp:LinkButton ID="btnDeleteFamily" CssClass="fRight ui-icon ui-icon-trash"
runat="server" CommandName="delete" CommandArgument='<%#Eval("idmember")%>'
OnClientClick='<%# Bind("return confirm('{0}');'", "YourColumnName") %> Text=""
ValidationGroup="delete_family" />

protected void Repeater_ItemDataBound(object sender, RepeaterItemEventArgs e)
{
LinkButton lb = e.Item.FindControl("btnDelete") as LinkButton;
if (lb != mull) {
lb.OnClientClick = "whatever";
}
}

It seems to be ok, for me at least.
You could try it in firefox, and using the WebDeveloper toolbar or Firebug extensions you will be able to get more information about what is happening behind scene.
Maybe there are others errors on the page that doesn't allow this code to work.

If you want to use the jQuery dialog in confirmation mode to bind to link buttons on a repeater inside an update panel, AND the code you want to execute after confirmation is different for each row, you can set it up this way:
Add a javascript function to your page/control like this:
function confirm(buttonFunctionForPostBack)
{
$("#dialog").dialog('option', 'buttons', {
"Cancel": function() {
$(this).dialog("close");
},
"Delete Payment": function () {
eval(buttonFunctionForPostBack);
$(this).dialog("close");
}
}
).dialog('open');
}
And in your code behind:
public void Repeater1_ItemDataBound(object sender, RepeaterItemEventArgs e)
{
LinkButton lb = e.Item.FindControl("deleteButton") as LinkButton;
if (lb != null)
{
lb.OnClientClick = "confirm(\"" + this.Page.ClientScript.GetPostBackEventReference(lb, string.Empty) + "\");return false;";
}
}
And in your aspx page:
<asp:Repeater ID="Repeater1" runat="server" OnItemDataBound="Repeater1_ItemDataBound">
<HeaderTemplate>
<table>
<tr>
<th width="90" valign="top"></th>
</tr>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td><%#Eval("name")%></td>
<td><asp:LinkButton ID="deleteButton" runat="server" CommandName="delete" CommandArgument='<%#Eval("id")%>' Text="Delete" />
</td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>
This lets you take advantage of the fact that you can set the dialog's 'buttons' option after the dialog was created. Also, it doesn't require any extra script variables.

Related

Asp.Net Button click Event inside Repeater inside UpdatePanel

I am trying to use a Repeater inside a Updatepanel and have Buttons that delete one entery in the Database and get the new Data for the Repeater and Update the Panel. I have tried a LinkButton, but it does always postback and the page relodes. Then i tried a regular Button and create a Event for that Button on DataBound Event. But it doesnt work. Here is the code:
aspx file:
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<asp:UpdatePanel runat="server" id="Panel">
<ContentTemplate>
<table cellpadding="0" cellspacing="0" id="saveTable">
<tr style="font-weight: bold;">
<td>Erstellt am</td>
<td>Anforderer</td>
<td>Werk</td>
<td>Gebäude</td>
<td>Start Datum</td>
<td>Löschen</td>
<td>Benutzen</td>
</tr>
<asp:Repeater ID="Repeater1" runat="server" onitemdatabound="Repeater1_ItemDataBound">
<ItemTemplate>
<tr id="Meldung<%# DataBinder.Eval(Container.DataItem,"meldungId")%>">
<td><%# DataBinder.Eval(Container.DataItem, "timestamp").ToString().Substring(0, 10)%></td>
<td><%# DataBinder.Eval(Container.DataItem,"nameAnforderer") %></td>
<td><%# DataBinder.Eval(Container.DataItem,"Werk") %></td>
<td><%# DataBinder.Eval(Container.DataItem,"Building") %></td>
<td><%# DataBinder.Eval(Container.DataItem,"startDatum").ToString().Substring(0, 10) %></td>
<td>
<asp:Button runat="server" ID="test"/>
</td>
<td></td>
</tr>
</ItemTemplate>
</asp:Repeater>
</table>
</ContentTemplate>
</asp:UpdatePanel>
and in the code behind i give the Button with id = test a event
protected void deleteMeldung(object sender, EventArgs e) {
System.Threading.Thread.Sleep(5000);
}
protected void Repeater1_ItemDataBound(object source, RepeaterItemEventArgs e) {
RepeaterItem repeaterSource = e.Item;
Button btn1 = repeaterSource.FindControl("test") as Button;
DataRowView drv = e.Item.DataItem as DataRowView;
string meldungId = drv.Row["meldungId"].ToString();
btn1.ID = "myNewButton"+meldungId;
btn1.Click += new EventHandler(deleteMeldung);
btn1.Text = "delete";
}
so whats working is passing the Text and the ID to each button like that. But the Buttons do not have the Click Event to call deleteMeldung()
What I tend to do is to have a separate delete button outside of the repeater (this is usually asp:Button with style set to 'display:none' along with a hidden field. Lets call these B_Delete and HF_DeleteId.
The buttons inside of the repeater do not cause postback themselves, but they only set the ID of the given row to the hidden field HF_DeleteId, and then call $('#B_Delete').click() (where the B_Delete should be replaced with current ClientID of the button). Then in the server method B_Delete_Click you can retrieve the ID of the row to be deleted from the hidden field. Works with update panels no problem. No need to mess with triggers and handling events from dynamically generated buttons.
It may look like this:
<asp:UpdatePanel runat="server" ID="UP_Rptr" UpdateMode="Conditional">
<ContentTemplate>
<asp:Repeater runat="server" ID="RPTR_DeleteTest" EnableViewState="False" OnItemDataBound="RPTR_DeleteTest_ItemDataBound">
<ItemTemplate>
<div>
<span><%# Eval("ID") %></span>
<span><%# Eval("Name") %></span>
<span><asp:LinkButton runat="server" ID="LB_Delete" Text="delete"></asp:LinkButton></span>
</div>
</ItemTemplate>
</asp:Repeater>
<asp:HiddenField runat="server" ID="HF_DeleteId" />
<asp:Button runat="server" ID="B_Delete" OnClick="B_Delete_Click" Style="display:none;" />
</ContentTemplate>
</asp:UpdatePanel>
And the server methods:
protected void RPTR_DeleteTest_ItemDataBound(object sender, RepeaterItemEventArgs e)
{
var lb = e.Item.Controls[1] as LinkButton; // for simplicity only - do not use code like this
lb.OnClientClick = String.Format("$('#{0}').val('{1}');$('#{2}').click();return false;",
HF_DeleteId.ClientID,
DataBinder.Eval(e.Item.DataItem, "ID"),
B_Delete.ClientID);
}
protected void B_Delete_Click(object sender, EventArgs e)
{
int id = Int32.Parse(HF_DeleteId.Value);
// do your sanity checks and deletion logic here
}
i tried Pafkas solution and it worked, thank you for that. However, i was intressted if there is any other way to solve this problem and i found another solution, i registred every LinkButton with the ScriptManager like that:
btn1.Click += new EventHandler((sender1, e1) => deleteMeldung(sender1, e1, meldungId));
ScriptManager scriptManager = ScriptManager.GetCurrent(Page);
if (scriptManager != null) {
scriptManager.RegisterAsyncPostBackControl(btn1);
}
and with this link button :
<asp:LinkButton runat="server" ID="test"/>
it worked, it fired the deleteMeldung method without reloding und passed the parameter meldungId to delete the enterie and updates the new Data to the UpdatePanel

How to get items row id of repeater when user clicks rows linkbutton control

I have a repeater, nested with Html table rows:
<asp:Repeater ID="Repeater1" runat="server" OnItemDataBound="Repeater1_ItemDataBound">
<HeaderTemplate>
<table id="grid">
<thead>
<tr>
<th>SID</th>
<th>Start Date</th>
<th>End Date</th>..
<th>PDF Text</th>
</tr>
</thead>
<tbody>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td><%#DataBinder.Eval(Container.DataItem,"ID") %></td>
<td><%#DataBinder.Eval(Container.DataItem,"startDate") %></td>
<td><%#DataBinder.Eval(Container.DataItem,"endDate") %></td
<td>
<asp:LinkButton runat="server" ID="lbtnPDF" Text="PDF Full Text" OnClick="lbtnPDF_Click" />
</td>
</tr>
</ItemTemplate>
<FooterTemplate>
</tbody>
</table>
</FooterTemplate>
</asp:Repeater>
When the user clicks on linkbutton, I want to get the ID of that row of repeater item and will display the PDF file which is related to that ID, in another aspx page.
I wrote on itemdatabound event :
protected void Repeater1_ItemDataBound(object sender, RepeaterItemEventArgs e)
{
LinkButton lnkBtn = (LinkButton)e.Item.FindControl("lbtnPDF");
}
How can I get column Id of repeater nested with an html table?
I don't think you are following the right approach to do it. I would choose the benefits of Repeater's ItemCommand Event to do it.
The following code might be helpful to you:
HTML/ASP.net
<asp:Repeater ID="Repeater1" DataSourceID="SqlDataSource1" runat="server" OnItemCommand="Repeater1_ItemCommand">
<ItemTemplate>
<asp:Button ID="Button1" runat="server" Text='<%#DataBinder.Eval(Container.DataItem,"Username") %>' CommandName="ViewPDF" CommandArgument='<%#DataBinder.Eval(Container.DataItem,"ID") %>' />
</ItemTemplate>
</asp:Repeater>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString='<%$ ConnectionStrings:myConnString %>' SelectCommand="SELECT * FROM [tblUserAccounts]"></asp:SqlDataSource>
As you have noticed, I have used CommandName and CommandArgument attributes in the label. I have used CommandName attribute to identify which action the user is expecting. Also the CommandArgument to pass the required data object to server.
Go to Repeater's OnItemCommand instead of ItemDataBound event. And write the code as below;
protected void Repeater1_ItemCommand(object source, RepeaterCommandEventArgs e)
{
if (e.CommandName == "ViewPDF")
{
Response.Redirect("~/MyPDFFiles/" + (string)e.CommandArgument);
}
}
Now run and test your Application!
Hope this helps!

DefaultButton in Repeater with textbox and button?

I have a repeater, which represents a shoppingbasket. This shopping basket has an "Update quantity" and a "Delete item" button.
When you edit the quantity and click enter, I will need it to use the Update quantity button (unlike now where it uses the delete item button).
In the code I've tried fixing this by adding a "QuantityPanel" with a DefaultButton, but this doesn't solve my issue!
Any ideas?
My code:
<asp:Repeater ID="ProductBasketRepeater" runat="server"
onitemcommand="ProductBasketRepeater_ItemCommand"
onitemdatabound="ProductBasketRepeater_ItemDataBound1">
<ItemTemplate>
<tr class="BasketEntryItem">
<td class="ImageCol">
<asp:Image ID="ProductImageBox" runat="server" Width="50" />
</td>
<td class="NameCol">
<asp:HyperLink ID="ProductNameHyperlink" runat="server"></asp:HyperLink>
</td>
<td class="PriceCol">
<asp:Label ID="PriceLabel" runat="server"></asp:Label>
</td>
<td class="QuanCol">
<asp:Panel ID="QuantityPanel" runat="server" DefaultButton="UpdateQuantityBtn">
<asp:TextBox ID="QuantityBox" runat="server" Width="30px"></asp:TextBox>
<asp:LinkButton ID="UpdateQuantityBtn" runat="server" Text="Opdater" CommandName="UpdateQuantity"></asp:LinkButton>
</asp:Panel>
</td>
<td class="TotalCol">
<asp:Label ID="TotalPriceLabel" runat="server"></asp:Label><br />
<asp:Button ID="DeleteProductBtn" runat="server" Text="Slet" CommandName="Delete" />
</td>
</tr>
</ItemTemplate>
<SeparatorTemplate>
</SeparatorTemplate>
</asp:Repeater>
In case jQuery is unavailable, you can use simple JavaScript to set to set default button for any texbox:
JS Code:
function clickButton(e, buttonid){
var evt = e ? e : window.event;
var bt = document.getElementById(buttonid);
if (bt){
if (evt.keyCode == 13){
bt.click();
return false;
}
}
}
ASPX page or any simple "input" textbox:
<input name="TextBox1" type="text" id="TextBox1" onkeypress="return clickButton(event,'Button1')" />
Code begind C#:
TextBox1.Attributes.Add("onkeypress", "return clickButton(event,'" + Button1.ClientID + "')");
Do you need help with apply this code in repeater ?
Using jQuery, this piece of code will issue a programmatic click when pressing enter in the textbox:
$('input[id$=QuantityBox]').keypress(function(e) {
if (e.keyCode == 13) {
$(this).next('input[id$=UpdateQuantityBtn]').click();
}
});
Note: I saw a bit late you did not requested jquery specifically, but in you do, this should do the trick.

Use repeater to display all the threads in same topic question

I want to use asp.net repeater control to display all threads that under same topic. Each thread has three buttons--reply,edit and delete. Besides buttons, I also want to display author, subject, post time and content. I have two questions here regarding to how to write button click event and binding data to a div in backend. My front end code is as following:(I use c#)
<asp:Repeater ID="Repeater1" runat="server">
<HeaderTemplate>
<table>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td colspan="2">
<asp:Button ID="btn_Reply" runat="server" Text="Rreply" OnClick="btn_Reply_Click" />
<asp:Button ID="btn_Edit" runat="server" Text="Edit" OnClick="btn_Edit_Click" CommandArgument='<%Eval("id").ToString() %>' />
<asp:Button ID="btn_Delete" runat="server" Text="Delete" OnClick="btn_Delete_Click" CommandArgument='<%Eval("id").ToString() %>' />
</td>
</tr>
<tr>
<td align="right" width="100px">Author:</td>
<td><%#Eval("owner") %></td>
</tr>
<tr>
<td align="right" width="100px">Subject:</td>
<td><%#Eval("title") %></td>
</tr>
<tr>
<td align="right" width="100px">Post Time:</td>
<td><%#Eval("timePosted") %></td>
</tr>
<tr>
<td colspan="2">
<div id="contentDiv" runat="server" ondatabinding="contentDiv_DataBinding"></div>
</td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>
Question 1: how to write button click event in backend, for example I want to use CommandArgument of edit button, what's the click event should be?
protected void btn_Edit_Click(object sender,??//I don't know how to write the second)
Question 2: the content stored in database is in html format, What to write in contentDiv_DataBinding event?
protected void contentDiv_DataBinding(object sender, System.EventArgs e)
{
//seems it can not find contentDiv, otherwise, I'll just use contentDiv.html=<%#Eval("content") %>
}
Thank you in advance!
As the control is nested inside the Repeater, you must refer to it by finding it inside the item being data bound:
protected void Repeater_DataBinding(object sender, System.EventArgs e)
{
HtmlControl contentDiv = e.item.FindControl("contentDiv");
}
However, I think it would be better to put a Literal control inside the Div and refer to that instead:
<div id="contentDiv" runat="server">
<asp:literal id="ltlContent" runat="server" />
</div>
protected void Repeater_DataBinding(object sender, System.EventArgs e)
{
Literal ltlContent = e.item.FindControl("ltlContent");
ltlContent = e.Item.DataItem("content");
}
Regarding controlling the buttons inside the Repeater, you can add a CommandName to the button and call this in the ItemCommand event:
<asp:Button ID="btn_Reply" runat="server" Text="Rreply" CommandName="Reply" CommandArgument='<%Eval("id")%>' />
<asp:Button ID="btn_Edit" runat="server" Text="Edit" CommandName="Edit" CommandArgument='<%Eval("id").ToString() %>' />
<asp:Button ID="btn_Delete" runat="server" Text="Delete" CommandName="Delete" CommandArgument='<%Eval("id").ToString() %>' />
protected void contentDiv_ItemCommand(object sender, System.EventArgs e)
{
if (e.CommandName == "Reply"){
}
if (e.CommandName == "Edit"){
}
if (e.CommandName == "Delete"){
}
}
Finally, change your Repeater tag to:
<asp:Repeater ID="Repeater1" runat="server" OnItemDataBound="Repeater_DataBinding" OnItemCommand="contentDiv_ItemCommand">

How to use button in repeater control?

I am using asp.net 3.5 with c#.I want to invoke button click event inside repeater control.
<asp:Repeater ID="rptFriendsList"
runat="server"
onitemcommand="rptFriendsList_ItemCommand">
<ItemTemplate>
<asp:ImageButton ID="btnSave"
runat="server"
ImageUrl="~/Contents/Images/save_button.png"
CommandName="Schedule"
UseSubmitBehavior="False" />
</ItemTemplate>
</asp:Repeater>
but when i click to a button its giving an error
"Invalid postback or callback
argument. Event validation is enabled
using in
configuration or <%# Page
EnableEventValidation="true" %> in a
page. For security purposes, this
feature verifies that arguments to
postback or callback events originate
from the server control that
originally rendered them. If the data
is valid and expected, use the
ClientScriptManager.RegisterForEventValidation
method in order to register the
postback or callback data for
validation."
my purpose is to execute some code in button click which is placed inside the repeater.Please help me to solve this issue.Thanks in advance.
UseSubmitBehavior="False" this property you have used is not present with the image button have you over ridden imagebutton class and added this property.
<asp:Repeater ID="Repeater1" runat="server" OnItemCommand="Repeater1_OnItemCommand" DataSourceID="SqlDataSource1">
<ItemTemplate>
key1:
<asp:Label ID="key1Label" runat="server" Text='<%# Eval("key1") %>'></asp:Label><br />
key2:
<asp:Label ID="key2Label" runat="server" Text='<%# Eval("key2") %>'></asp:Label><br />
key3:
<asp:Label ID="key3Label" runat="server" Text='<%# Eval("key3") %>'></asp:Label><br />
<asp:TextBox ID="col1" runat="server" Text='<%# Eval("col1") %>'></asp:TextBox>
<asp:TextBox ID="col2" runat="server" Text='<%# Eval("col2") %>'></asp:TextBox>
<br />
<asp:linkbutton ID="Linkbutton1" commandname="Update" runat="server" text="Update" CommandArgument='<%# Eval("key1") +"|"+Eval("key2")+"|"+ Eval("key3") %>' />
<asp:linkbutton ID="Linkbutton2" commandname="Cancel" runat="server" text="Cancel" />
</ItemTemplate>
protected void Repeater1_OnItemCommand(object source, RepeaterCommandEventArgs e)
{
if (e.CommandName == "Update")
{
string col1 = ((TextBox)e.Item.FindControl("col1")).Text;
string col2 = ((TextBox)e.Item.FindControl("col2")).Text;
string allKeys = Convert.ToString(e.CommandArgument);
string[] arrKeys = new string[2];
char[] splitter = { '|' };
arrKeys = allKeys.Split(splitter);
SqlDataSource1.UpdateParameters["col1"].DefaultValue = col1;
SqlDataSource1.UpdateParameters["col2"].DefaultValue = col2;
SqlDataSource1.UpdateParameters["key1"].DefaultValue = arrKeys[0];
SqlDataSource1.UpdateParameters["key2"].DefaultValue = arrKeys[1];
SqlDataSource1.UpdateParameters["key3"].DefaultValue = arrKeys[2];
SqlDataSource1.Update();
Repeater1.DataBind();
}
}
This also happens when you have assigned the datasource and data bound your repeater in the OnLoad event rather than OnInit
I have used this bellow code and runs ok
use this bellow code in .aspx page
<asp:Repeater ID="Repeater1" runat="server" OnItemCommand="Repeater1_ItemCommand">
<HeaderTemplate>
<table>
<tr>
<th>
Edit
</th>
</tr>
</table>
</HeaderTemplate>
<ItemTemplate>
<table>
<tr>
<td align="center">
<asp:LinkButton ID="LinkButton1" runat="server" CommandName="Edit">Edit</asp:LinkButton>
</td>
</tr>
</table>
</ItemTemplate>
</asp:Repeater>
Use this in .cs Make the event Repeater1_ItemCommand
protected void Repeater1_ItemCommand(object source, RepeaterCommandEventArgs e)
{
switch (e.CommandName)
{
case "Edit":
// Do some stuff when the Edit button is clicked.
break;
// Other commands here.
default:
break;
}
}
You can't use button, because button create postback on click and also itemcommand of repeater called!
But, If you want to use asp:button instead of asp:linkbutton, you have to set UseSubmitBehavior property of button to false. its means, button dont make postback.
<asp:Button ID="btnAccept" runat="server" Text="Accept All" CssClass="vb-default vb-green vb-txt-light" CommandName="Accept" CommandArgument='<%# Eval("UserID") %>' UseSubmitBehavior="false" />
Set page EnableEventValidation="false".
if you're adding items server side, try to assign unique ID to each ImageButton

Categories

Resources