Question

I have a list in my aspx page where the values for the list are coming from the database. The data can be added to the list successfully

But how can I retrieve the value of the selected list item when I click on that? (ul_Click event)

I don’t want to redirect to another page because I’m using AJAX. so i want it in the same page. that’s why i commented the

    <ul runat="server" id="ulList" onclick="ul_Click">
    </ul>

The data is binded to the list in the page_load event.

protected void Page_Load(object sender, EventArgs e)
{
    conn = new SqlConnection("Server=NIPUNA-PC\\SQLEXPRESS; Database=XXX; Trusted_Connection=True");
    string[] itemList = authorList();
    foreach (string item in itemList)
    {
        HtmlGenericControl newLi = new HtmlGenericControl("li");
        //newLi.InnerHtml = "<a href=\"Books.aspx?bookId=" + item + "\">" + item + "</a>";
        newLi.InnerText = item;
        ulList.Controls.Add(newLi);
    }
}

I want the ul_Click() event?

Answer 1

seems like you were on track with the innerHtml thing. You can pass some kind of an ID with the link.

"<a href=\"Books.aspx?bookId=" + item + "&liID=" + **SOME_ID** + "\">" + item + "</a>";

then do a request querystring and check for that id. if it’s there, then call a function?

i’m not 100% sure, but what you’re trying to do might be impossible otehrwise with HtmlGenericControl. I don’t think you can bind an onclick event to HtmlGenericControl

Your other option is perhaps go with ajax/javascript

EDIT> just saw the comment. so …. you might do something like

 "<a href=\"javascript:callMyAjaxFunction(" + item + ");\">" + item + "</a>";

you could also do

"<a href=\#"\" onclick=\"javascript:callMyAjaxFunction(" + item + ");\">" + item + "</a>";

i personally dislike the last one as <a href="#" version because it can cause bad client side behavior such as to go to page top or something stupid like that when clicked.

just to wrap things up. Keep in mind that you’ll need a client side javascript to handle the function

<script language="javascript">
    function callMyAjaxFunction(bookid){
       // do something
    }
</script>