Change QueryString url on ListView Button click in ASP.Net

Hi nauna,

Refer the below example.

HTML

<div>
    <asp:ListView ID="ListView1" runat="server" GroupPlaceholderID="groupPlaceHolder1"
        ItemPlaceholderID="itemPlaceHolder1">
        <LayoutTemplate>
            <table>
                <asp:PlaceHolder runat="server" ID="groupPlaceHolder1"></asp:PlaceHolder>
            </table>
        </LayoutTemplate>
        <GroupTemplate>
            <tr>
                <asp:PlaceHolder runat="server" ID="itemPlaceHolder1"></asp:PlaceHolder>
            </tr>
        </GroupTemplate>
        <ItemTemplate>
            <td>
                <asp:Label runat="server" ID="lblQueryString" Text='<%#Eval("ID") %>'></asp:Label>
            </td>
            <td>
                <asp:Button ID="btnChange" Text="Change Query String" runat="server" />
            </td>
        </ItemTemplate>
    </asp:ListView>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        $('[id*=btnChange]').on('click', function () {
            var id = $(this).closest('tr').find('[id*=lblQueryString]').html();
            var oldURL = window.location.protocol + "//" + window.location.host + window.location.pathname;
            var newUrl = oldURL + "?Id=" + id;
            if (window.history != 'undefined' && window.history.pushState != 'undefined') {
                window.history.pushState({ path: newUrl }, '', newUrl);
            }
            return false;
        });
    });
</script>

C#

protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        DataTable dt = new DataTable();
        dt.Columns.AddRange(new DataColumn[] { new DataColumn("ID", typeof(int)) });
        dt.Rows.Add(1);
        dt.Rows.Add(2);
        dt.Rows.Add(3);
        ListView1.DataSource = dt;
        ListView1.DataBind();
    }
}

Screenshot

If you want to do it without div and table then use the below code. Find the previous element and get the id.

<asp:ListView ID="ListView1" runat="server">
    <ItemTemplate>
        <asp:Label runat="server" ID="lblQueryString" Text='<%#Eval("ID") %>'></asp:Label>
        <asp:Button ID="btnChange" Text="Change Query String" runat="server" />
    </ItemTemplate>
</asp:ListView>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        $('[id*=btnChange]').on('click', function () {
            var id = $(this).prev().html()
            var oldURL = window.location.protocol + "//" + window.location.host + window.location.pathname;
            var newUrl = oldURL + "?Id=" + id;
            if (window.history != 'undefined' && window.history.pushState != 'undefined') {
                window.history.pushState({ path: newUrl }, '', newUrl);
            }
            return false;
        });
    });
</script>