Search code examples
javascriptc#asp.netrepeater

Asp.net OnClientClick show value from other cell in table


I have the following ASP Repeater in a table:

<asp:Repeater ID="rptPage" runat="server" OnItemCommand="rptPage_ItemCommand" OnItemDataBound="rptPage_ItemDataBound">
    <ItemTemplate>
        <tr>
            <td id="ArticleTitle">
                <%# DataBinder.Eval(Container.DataItem,"Title") %>
            </td>
            <td>
                <%# DataBinder.Eval(Container.DataItem,"AuthorName") %>
            </td>
            <td>
                <asp:Button ID="EditButton" runat="server" CommandName="edit" CommandArgument='<%# DataBinder.Eval(Container.DataItem,"ID") %>' Text="Edit" />
            </td>
            <td>
                <asp:Button ID="DeleteButton" runat="server" OnClientClick="return fnConfirmDelete(this)" CommandName="delete" CommandArgument='<%# DataBinder.Eval(Container.DataItem,"ID") %>' Text="Delete" />
            </td>
            <td>
                <a href="<%# String.Format("/news/Article={0}", processTitle(Eval("Title"))) %>">View Here</a>
            </td>
        </tr>
    </ItemTemplate>
</asp:Repeater>

This all works fine.

There is a confirm button on the delete function, using the following method:

function fnConfirmDelete(ArticleTitle) 
    {
        return confirm("Delete Article " + ArticleTitle);
    }

Now, what I want to do is pass the text from this:

<%# DataBinder.Eval(Container.DataItem,"Title") %>

into the confirm box.

I have tried adding a 'name' field:

<asp:Button ID="DeleteButton" runat="server" OnClientClick="return fnConfirmDelete(this)" CommandName="delete" CommandArgument='<%# DataBinder.Eval(Container.DataItem,"ID") %>' Text="Delete" name='<%# DataBinder.Eval(Container.DataItem,"Title") %>'/>

But this does not display the text in the name field, but some kind of server side change.

I have also tried passing the value into the JavaScript function:

<asp:Button ID="DeleteButton" runat="server" OnClientClick="return fnConfirmDelete('<%# DataBinder.Eval(Container.DataItem,"Title") %>')" CommandName="delete" CommandArgument='<%# DataBinder.Eval(Container.DataItem,"ID") %>' Text="Delete" />

But this says the server tag is not well formed.

I have also tried to pass in an id from the cell that has the value, but again server tag is not well formed.

Does anyone know how I can achieve this?

Also, once I get it to the JavaScript function, how would I retrieve the value?

EDIT:

I tried:

 <asp:Button ID="DeleteButton" runat="server" OnClientClick="return fnConfirmDelete('"<%# DataBinder.Eval(Container.DataItem,"Title") %>"')" CommandName="delete" CommandArgument='<%# DataBinder.Eval(Container.DataItem,"ID") %>' Text="Delete" />

as suggested by @Reddy below, but it also gave a server tag not well formed error.


Solution

  • The problem was that when using a repeater, the repeater assigns a value to the name field, so anything I store there gets overwritten with the assigned name field.

    So instead, I stored the variable in the title, which now displays as intended:

    <asp:Button ID="DeleteButton" runat="server" title='<%# DataBinder.Eval(Container.DataItem,"Title") %>' OnClientClick="return fnConfirmDelete(this)" CommandName="delete" CommandArgument='<%# DataBinder.Eval(Container.DataItem,"ID") %>' Text="Delete" />
    

    EDIT: Then I can retrieve the element using JQuery as follows:

    function fnConfirmDelete(ArticleTitle) 
    {
        return confirm("Delete Article: " + $(ArticleTitle).attr('id'));
    }
    

    One issue, for some reason, JQuery could not retrieve the element 'title' eg:

        return confirm("Delete Article: " + $(ArticleTitle).attr('title'));
    

    But if I rename the field to LinkTitle it all worked fine:

    <asp:Button ID="DeleteButton" runat="server" LinkTitle='<%# DataBinder.Eval(Container.DataItem,"Title") %>' OnClientClick="return fnConfirmDelete(this)" CommandName="delete" CommandArgument='<%# DataBinder.Eval(Container.DataItem,"ID") %>' Text="Delete" />
    
    return confirm("Delete Article: " + $(ArticleTitle).attr('LinkTitle'));
    

    Which is just a custom field name