Refresh repeater using ajax json

Question

Hi,

I am using ajax json using "web method". I have deleted data successfully from repeater control

Requirement:

After deleting ( as I have already done ) I  need to refresh or reload Repeater control using Ajax json so deleting record will not be available on repeater as its deleted

How can I do that..

Thanks

Answer 1

Hi,

After deleting the row in the Repeater control, call ajax method to rebind the data to Repeater control:

Html code:

  <style type="text/css">
        body
        {
            font-family: Arial;
            font-size: 10pt;
        }
         
        table
        {
            border: 1px solid #ccc;
        }
         
        table th
        {
            background-color: #F7F7F7;
            color: #333;
            font-weight: bold;
        }
         
        table th, table td
        {
            padding: 5px;
            border-color: #ccc;
        }
    </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        window.onload = function () {
            BindRepeater();
        }
        function BindRepeater() {
            $("[id*=rptCustomers]").find("tr:gt(1)").remove();
            $.ajax({
                type: "POST",
                url: "TestPage.aspx/GetCustomers",
                data: '{}',
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: OnSuccess,
                failure: function (response) {
                    alert(response.d);
                },
                error: function (response) {
                    alert(response.d);
                }
            });
        }
 
        function OnSuccess(response) {
            $("[id*=rptCustomers]").attr("border", "1");
            var xmlDoc = $.parseXML(response.d);
            var xml = $(xmlDoc);
            var customers = xml.find("Table");
            var row = $("[id*=rptCustomers] tr:last-child").clone(true);
            $("[id*=rptCustomers] tr:last-child").remove();
            $.each(customers, function () {
                var customer = $(this);
                $(".CustomerID", row).html($(this).find("CustomerId").text());
                $(".Name", row).html($(this).find("Name").text());
                $(".Country", row).html($(this).find("Country").text());
                $("[id*=rptCustomers]").append(row);
                row = $("[id*=rptCustomers] tr:last-child").clone(true);
            });
        }
    </script>
    <script type="text/javascript">
        $(function () {
            $("[id*=rptCustomers] [id*=lnkDelete]").click(function () {
                if (confirm("Do you want to delete this Customer?")) {
                    //Determine the GridView row within whose LinkButton was clicked.
 
                    //Look for the Hidden Field and fetch the CustomerId.
                    var customerId = parseInt($(this).parents().find('span.CustomerID').html());
                    //Make an AJAX call to server side and pass the fetched CustomerId.
 
                    $.ajax({
                        type: "POST",
                        url: "TestPage.aspx/DeleteCustomer",
                        data: '{customerId: ' + customerId + '}',
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        success: function (r) {
                            if (r.d) {
                                BindRepeater();
                            }
                        }
                    });
                }
                return false;
            });
        });
    </script>

 <div>
        <table id="rptCustomers">
            <tr>
                <th>
                    Id
                </th>
                <th>
                    Name
                </th>
                <th>
                    Country
                </th>
            </tr>
            <asp:Repeater ID="Repeater1" runat="server">
                <ItemTemplate>
                    <tr>
                        <td>
                            <asp:Label CssClass="CustomerID" Text='<%# Eval("CustomerId") %>' runat="server" />
                        </td>
                        <td>
                            <asp:Label CssClass="Name" Text='<%# Eval("Name") %>' runat="server" />
                        </td>
                        <td>
                            <asp:Label CssClass="Country" Text='<%# Eval("Country") %>' runat="server" />
                        </td>
                        <td>
                            <a id="lnkDelete" href="#">Delete</a>
                        </td>
                    </tr>
                </ItemTemplate>
            </asp:Repeater>
        </table>
    </div>

In Html above, I recall the BindRepeater() function after deleting row.

Code behind to get data from SQL:

    public partial class TestPage : LayoutsPageBase
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                this.BindDummyRow();
            }

        }
        private void BindDummyRow()
        {
            DataTable dummy = new DataTable();
            dummy.Columns.Add("CustomerId");
            dummy.Columns.Add("Name");
            dummy.Columns.Add("Country");
            dummy.Rows.Add();

            Repeater1.DataSource = dummy;
            Repeater1.DataBind();
        }
        private static DataSet GetData(SqlCommand cmd)
        {
            string strConnString = "Server=SQL;Database=Employee;UID=testuser;Password=Access1";
            using (SqlConnection con = new SqlConnection(strConnString))
            {
                using (SqlDataAdapter sda = new SqlDataAdapter())
                {
                    cmd.Connection = con;
                    sda.SelectCommand = cmd;
                    using (DataSet ds = new DataSet())
                    {
                        sda.Fill(ds);
                        return ds;

                    }
                }
            }
        }
        [WebMethod]
        public static string GetCustomers()
        {
            string query = "SELECT top 10 CustomerId, Name, Country FROM Customers";
            SqlCommand cmd = new SqlCommand(query);
            return GetData(cmd).GetXml();
        }
        [WebMethod]
        public static bool DeleteCustomer(int customerId)
        {
            string conString = "Server=SQL;Database=Employee;UID=testuser;Password=Access1";
            using (SqlConnection con = new SqlConnection(conString))
            {
                using (SqlCommand cmd = new SqlCommand("DELETE FROM Customers WHERE CustomerId = @CustomerId"))
                {
                    cmd.Connection = con;
                    cmd.Parameters.AddWithValue("@CustomerId", customerId);
                    con.Open();
                    int rowsAffected = cmd.ExecuteNonQuery();
                    con.Close();
                    return rowsAffected > 0;
                }
            }
        }

    }

SQL Script:

INSERT INTO Customers
SELECT 1, 'John Hammond', 'United States'
UNION ALL
SELECT 2, 'Mudassar Khan', 'India'
UNION ALL
SELECT 3, 'Suzanne Mathews', 'France'
UNION ALL
SELECT 4, 'Robert Schidner', 'Russia'

Thanks

Best Regards

---

Please remember to mark the replies as answers if they help.
If you have feedback for TechNet Subscriber Support, contact [e-mail]

Answer 2

I have already tested this its working but its also removing table header

Problem:

Its also removing table header I don't want to remove that, what all i want is just to remove table row

Answer 3

Hi,

This code snippet above won't remove table header, it only remove the table row, see this result, I deleted all the row in the table, and table header is still here:

This meets your requirement.

Thanks

Best Regards

---

Please remember to mark the replies as answers if they help.
If you have feedback for TechNet Subscriber Support, contact [e-mail]

Answer 4

thanks