如何从Gridview-RowDataBound返回值以在链接中使用它。 C＃

Question

Im trying to delete Gridview row on button click. i want to save the clicked row's id into a variable. And use this variable in the hyperlink.

here my RowDataBound code

  protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        e.Row.Attributes.Add("onmouseover", "this.style.cursor='Pointer';this.style.backgroundColor='Yellow'");
       e.Row.RowIndex.ToString())); 

        string id = DataBinder.Eval(e.Row.DataItem, "ProductionOrderId").ToString();
    // somthing like
    // return id ;

    }
}

here the hyperlink where i need i id of the selected row

<asp:HyperLink  runat="server" NavigateUrl="~/Producter/Delete?id= id" ID="HyperLink1"> Delete</asp:HyperLink>

Answer 1

Firstly: add a reference to jQuery to the head section of your Master page

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

Secondly: add the ProductionOrderId to the datarow as an attribute (as shown below), this way it will be accessible on the client side via jQuery

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
            {
                e.Row.Attributes.Add("onmouseover", "this.style.cursor='Pointer';this.style.backgroundColor='Yellow'");
                e.Row.RowIndex.ToString();
                string id = DataBinder.Eval(e.Row.DataItem, "ProductionOrderId").ToString();
                //save ProductionOrderId as datarow attribute
                e.Row.Attributes.Add("rowid", id);
            }
}

Thirdly:

in the body of your .aspx file add the following script tag. Every time a row is clicked it modifies your 'Delete' link with the id of the row to delete. I have also included your link for the sake of clarity and completeness.

<a href='<%=ResolveUrl("~/Producter/Delete?id=" ) %>' ID="HyperLink1">Delete</a>

 <script language="javascript">
    //every time a row is clicked this script will perform the following actions:
        $("tr").click(function () {
            var clicked = $(this);
            //get the row id from the currently cliked row
            var rowid = clicked.attr("rowid");
            //get the value of href attribute from the link with id 'HyperLink1'
            var link = $("#HyperLink1").attr("href");
            //remove any previously appended values
            var linkTokens = link.split("=");
            linkTokens[1] = "";
            link = linkTokens.join("=");
            //append the current row id to the link
            link = link + rowid;
            //set the href attribute of your link to the new value
            $("#HyperLink1").attr("href", link);
        });
    </script>

Should you need further assistance please do not hesitate to let me know.

Disclaimer: It is usually best to use a cdn to deliver js files since it is highly likely that they have already been cached by the user browser.

As requested, here is how to put jquery library 2.0 in your content folder:

1. Make a backup of your working solution.
2. Click on this link with your right mouse button and choose save as.
3. Save it to your content folder on disk.
4. From Visual studio choose 'add existing item'
5. Browse to your content folder
6. Select your jquery file
7. Click add.
8. Now Drag your jquery file in the header section of your page.
9. Delete the old tag (link to ajax.googleapis.com)

Answer 2

Modified the RowDataBound to hold the GridView record ids to the client side:

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        e.Row.Attributes.Add("onmouseover", "this.style.cursor='Pointer';this.style.backgroundColor='Yellow'");
       e.Row.RowIndex.ToString())); 

        string id = DataBinder.Eval(e.Row.DataItem, "ProductionOrderId").ToString();

        // store the id at the client side
        e.Row.Attributes.Add("id", id);
    }
}

And in your javascript code (using jQuery): This will change the hyperlink href value whenever the GridView record would be clicked.

<script type="text/javascript">
  $('#<%=GridView1.ClientID %> tr[id]').click(function () {
      idToDelete = $('#<%=GridView1.ClientID %> tr[id]').val();
      $("a.HyperLink1").attr("href", "~/Producter/Delete?id=" + idToDelete);
  });
</script>

Although I haven't tested the code, but I hope it should work as required.

EDIT: You should also have added reference for jQuery.js file in the head section like this:

<script src="js/jquery-1.6.1.min.js" type="text/javascript"></script>

Answer 3

An easier way would be to create a helper method:

string getLink(MyObject obj)
{
   return "~/Producter/Delete?id" + obj.ID;
}

And in the view:

<asp:HyperLink  runat="server" NavigateUrl="<%# getLink(Container.DataItem) %>" ID="HyperLink1"> Delete</asp:HyperLink>