در این مقاله میخواهیم در زمان اجرا اطلاعات را از کاربر بگیریم و توسط Jquery به گرید ویو اضافه کنیم همچنین اطلاعات وارد شده را در پایگاه داده ذخیره کنیم

اضافه کردن سطر در زمان اجرا توسط jquery در asp.net

ابتدا در پایگاه داده یک جدول به نام Customer به شکل زیر میسازیم:

برنامه ویژوال استدیو خود را باز کنید و یک پروژه از نوع وب فرم بسازید سپس یک صفحه جدید به پروژه خود اضافه کنید و از جعبه ابزار خود یک عدد کنترل گرید ویو و دو عدد کنترل TextBox و دو عدد دکمه  به صفحه خود اضافه کنید:

  <asp:GridView ID="gvCustomers" CssClass="table" runat="server" AutoGenerateColumns="false">
        <Columns>
            <asp:TemplateField HeaderText="نام" ItemStyle-Width="150px" ItemStyle-CssClass="Name">
                <ItemTemplate>
                    <%# Eval("Name") %>
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="کشور" ItemStyle-Width="150px" ItemStyle-CssClass="Country">
                <ItemTemplate>
                    <%# Eval("Country")%>
                </ItemTemplate>
            </asp:TemplateField>
        </Columns>
    </asp:GridView>
    <br />
    <table border="0" cellpadding="0" cellspacing="0">
        <tr>
            <td style="width: 150px">
                نام:<br />
                <asp:TextBox ID="txtName" runat="server" Width="140" Text="" />
            </td>
            <td style="width: 150px">
                کشور:<br />
                <asp:TextBox ID="txtCountry" runat="server" Width="140" Text="" />
            </td>
            <td style="width: 100px">
                <br />
                <asp:Button ID="btnAdd" runat="server" Text="افزودن به گرید" />
            </td>
        </tr>
    </table>
    <br />
    <asp:Button Text="ثبت در پایگاه داده" runat="server" OnClick="Submit" />

حال برا پر کردن گرید باید در رویداد Page_Load صفحه اطلاعات را از پایگاه داده بخونیم و به datasource گرید بدهیم که این عملیات را در یک تابع به نام BindGrid انجام میدهیم و تابع BindGrid را در رویداد وفق فراخوانی میکنیم:

protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        this.BindGrid();
    }
}
 
private void BindGrid()
{
    DataTable dt = new DataTable();
    string query = "SELECT Name, Country FROM Customers";
    string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
    using (SqlConnection con = new SqlConnection(constr))
    {
        using (SqlCommand cmd = new SqlCommand(query))
        {
            cmd.Connection = con;
            using (SqlDataAdapter sda = new SqlDataAdapter(cmd))
            {
                sda.SelectCommand = cmd;
                sda.Fill(dt);
            }
        }
    }
 
    if (dt.Rows.Count == 0)
    {
        //If no records then add a dummy row.
        dt.Rows.Add();
    }
 
    gvCustomers.DataSource = dt;
    gvCustomers.DataBind();
}

حالا باید زمانی که روی دکمه افزودن به گرید کلیک میکنیم اطلاعات وارد شده توسط jquery  به گرید اضافه شود اسکریپت زیر را در پایین صفحه خود اضافه کنید:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
    $("[id*=btnAdd]").click(function () {
        //Reference the GridView.
        var gridView = $("[id*=gvCustomers]");
 
        //Reference the first row.
        var row = gridView.find("tr").eq(1);
 
        //Check if row is dummy, if yes then remove.
        if ($.trim(row.find("td").eq(0).html()) == "") {
            row.remove();
        }
 
        //Clone the reference first row.
        row = row.clone(true);
 
        //Add the Name value to first cell.
        var txtName = $("[id*=txtName]");
        SetValue(row, 0, "name", txtName);
 
        //Add the Country value to second cell.
        var txtCountry = $("[id*=txtCountry]");
        SetValue(row, 1, "country", txtCountry);
 
        //Add the row to the GridView.
        gridView.append(row);
 
        return false;
    });
 
    function SetValue(row, index, name, textbox) {
        //Reference the Cell and set the value.
        row.find("td").eq(index).html(textbox.val());
 
        //Create and add a Hidden Field to send value to server.
        var input = $("<input type = 'hidden' />");
        input.prop("name", name);
        input.val(textbox.val());
        row.find("td").eq(index).append(input);
 
        //Clear the TextBox.
        textbox.val("");
    }
});
</script>

زمانی که روی دکمه ثبت در پایگاه داده کلیک کنید سطر های اضافه شده به گرید در جدول ثبت خواهد شد برای انجام این عمل کد زیر را در رویداد کلیک دکمه بنویسید:

protected void Submit(object sender, EventArgs e)
{
    if (!string.IsNullOrEmpty(Request.Form["name"]) && !string.IsNullOrEmpty(Request.Form["country"]))
    {
        //Fetch the Hidden Field values from the Request.Form collection.
        string[] names = Request.Form["name"].Split(',');
        string[] countries = Request.Form["country"].Split(',');
 
        //Loop through the values and insert into database table.
        for (int i = 0; i < names.Length; i++)
        {
            string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
            using (SqlConnection con = new SqlConnection(constr))
            {
                using (SqlCommand cmd = new SqlCommand("INSERT INTO Customers VALUES(@Name, @Country)"))
                {
                    cmd.Parameters.AddWithValue("@Name", names[i]);
                    cmd.Parameters.AddWithValue("@Country", countries[i]);
                    cmd.Connection = con;
                    con.Open();
                    cmd.ExecuteNonQuery();
                    con.Close();
                }
            }
        }
 
        //Refresh the page to load GridView with records from database table.
        Response.Redirect(Request.Url.AbsoluteUri);
    }
}