如何使用ajax删除asp.net中的记录

Question

我列出了一个包含数据库内容的页面。我想为它添加删除功能。我使用asp占位符将数据放在页面上。我也使用电话号码作为主键。我试图搜索它。但没有什么对我有用。如果我们可以使用ajax删除它也会很棒。

这是使用asp.net使用C＃和SQL Server的测试配方页面。

protected void Page_Load(object sender, EventArgs e)
        {
            if (!this.IsPostBack)
            {
                //Populating a DataTable from database.
                DataTable dt = this.GetData();

                //Building an html string.
                StringBuilder html = new StringBuilder();

                //div structure
                html.Append("<div class='container contest-wrapper'>");
                //dynamic divs
                int row_count = dt.Rows.Count;
                html.Append("<div class='col-md-12'>");
                html.Append("<p>Total Entries:" + row_count + "</p>");
                html.Append("</div>");
                foreach (DataRow row in dt.Rows)
                {

                    html.Append("<div class='col-md-6 main-container'>");
                    html.Append("<div class='single-contest'>");
                    html.Append("<div class='collapse methodDiv' id='" + row["PhNo"].ToString() + "'><p>" + row["DishMethod"].ToString() + "</p></div>");
                    html.Append("<img class='img-responsive contest-img' src='" + row["DishImg"].ToString() + "'>");
                    //html.Append("<a runat='server' id='" + row["PhNo"].ToString()+ "' onserverclick='Delete(" + row["PhNo"].ToString() + ")' >Delete</a>");
                    //html.Append("<input type='hidden' runat='server' name='hdnPhNo' value='" + row["PhNo"].ToString() + "' />");
                    //html.Append("<input runat='server' OnClick='Delete(" + row["PhNo"].ToString() + ")' type='submit' name='buttonDelete' value='Delete Entry' />");
                    //html.Append("<button ID='delete' runat='server' Text='Delete' OnClick='delete(" + row["PhNo"].ToString() + ")'>Delete</button>");
                    html.Append("<p><b>Dish Name: </b>");
                    html.Append(row["DishName"].ToString());
                    html.Append("</p>");
                    html.Append("<p><b>Uploaded By: </b>");
                    html.Append(row["UserName"].ToString());
                    html.Append("</p>");
                    html.Append("<p><b>Email: </b>");
                    html.Append(row["Email"].ToString());
                    html.Append("</p>");
                    html.Append("<p><b>Phone Number: </b>");
                    html.Append(row["PhNo"].ToString());
                    html.Append("</p>");
                    //html.Append("<p><b>Dish Method: </b>");
                    //html.Append(row["DishMethod"].ToString());
                    //html.Append("</p>");
                    html.Append("<button type='button' class='method-btn' data-toggle='collapse'  onclick='setColor(event)'; data-count='1'  data-target='#"+ row["PhNo"].ToString() + "'>Method</button>");
                    html.Append("</div>");
                    html.Append("</div>");
                }
                //dynamic divs
                html.Append("</div>");
                //div structure

                //Append the HTML string to Placeholder.
                PlaceHolder1.Controls.Add(new Literal { Text = html.ToString() });
            }
        }
        private DataTable GetData()
        {
            string constr = ConfigurationManager.ConnectionStrings["RecipeDataModel"].ConnectionString;
            using (SqlConnection con = new SqlConnection(constr))
            {
                using (SqlCommand cmd = new SqlCommand("SELECT * FROM RecipeContest"))
                {
                    using (SqlDataAdapter sda = new SqlDataAdapter())
                    {
                        cmd.Connection = con;
                        sda.SelectCommand = cmd;
                        using (DataTable dt = new DataTable())
                        {
                            sda.Fill(dt);
                            return dt;
                        }
                    }
                }
            }
        }
        public void delete(object sender, EventArgs e, int phNo)
        {
            //string phNo = hdnPhNo.Value;
            //string phNo = Request["hdnPhNo"];
            string connString = ConfigurationManager.ConnectionStrings["RecipeDataModel"].ConnectionString;
            SqlConnection conn = null;
            conn = new SqlConnection(connString);
            conn.Open(); SqlCommand cmd = new SqlCommand();
            cmd.CommandText = "DELETE FROM RecipeContest WHERE PhNo='" + phNo + "'";
            cmd.Connection = conn;
            int numberDeleted = cmd.ExecuteNonQuery();
            //Display success message.
            string message = "Your details have been deleted successfully.";
            string script = "window.onload = function(){ alert('";
            script += message;
            script += "')};";
            ClientScript.RegisterStartupScript(this.GetType(), "SuccessMessage", script, true);
        }

我想在点击相应的删除按钮后删除一条记录。如果可以实现AJax也会很棒。