در این مقاله قصد داریم اطلاعات را با استفاده از Jquery Ajax در بانک اطلاعاتی ذخیره کنیم (Asp.Net)

سلام دوستان

در این مقاله قصد داریم اطلاعات را با استفاده از Jquery Ajax در بانک اطلاعاتی ذخیره کنیم

ابتدا جدول مربوطه را میسازیم

یک بانک اطلاعاتی با نام ExampleInsertAjaxDB ایجاد کنید و اسکریپت زیر را روی آن اجرا کنید

CREATE TABLE [dbo].[Persons](
	[PersonID] [int] IDENTITY(1,1) NOT NULL,
	[PersonName] [nvarchar](150) NULL,
	[PersonFamily] [nvarchar](150) NULL,
	[PersonAge] [int] NULL,
 CONSTRAINT [PK_Persons] PRIMARY KEY CLUSTERED 
(
	[PersonID] ASC
)WITH (PAD_INDEX  = OFF, STATISTICS_NORECOMPUTE  = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS  = ON, ALLOW_PAGE_LOCKS  = ON) ON [PRIMARY]
) ON [PRIMARY]

سپس چند TextBox جهت ورود اطلاعات در صفحه قرار دهید

             <table class="style2" dir="rtl">
                        <tr>
                            <td class="style3">
                                نام :</td>
                            <td>
        <asp:TextBox ID="txtName" runat="server" Width="70%"></asp:TextBox>
                                <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" 
                                    ControlToValidate="txtName" ErrorMessage="*" ForeColor="Red"></asp:RequiredFieldValidator>
                            </td>
                        </tr>
                        <tr>
                            <td class="style3">
                                نام خانوادگی :</td>
                            <td>
        <asp:TextBox ID="txtFamily" runat="server" Width="70%"></asp:TextBox>
                                <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" 
                                    ControlToValidate="txtFamily" ErrorMessage="*" ForeColor="Red"></asp:RequiredFieldValidator>
                            </td>
                        </tr>
                        <tr>
                            <td class="style3">
                                سن :</td>
                            <td>
        <asp:TextBox ID="txtAge" runat="server" Width="70%"></asp:TextBox>
                                <asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" 
                                    ControlToValidate="txtAge" ErrorMessage="*" ForeColor="Red"></asp:RequiredFieldValidator>
                            </td>
                        </tr>
                        <tr>
                            <td class="style3">
                                 </td>
                            <td>
        <asp:Button ID="btnSave" runat="server" style="direction: ltr" mce_style="direction: ltr" Text="ثبت" />
                            </td>
                        </tr>
                    </table>

در کد صفحه متدی جهت درج اضافه میکنیم

           [WebMethod]
        public static void Insert(string name, string family, string age)
        {
      string ConnectionString = "Data Source=.;Initial Catalog=ExampleInsertAjaxDB;User ID=sa;Password=123";
            SqlConnection connection=new SqlConnection(ConnectionString);
            string query = "Insert Into Persons Values (@PersonName,@PersonFamily,@PersonAge)";
            SqlCommand command=new SqlCommand(query,connection);
            command.Parameters.AddWithValue("@PersonName", name);
            command.Parameters.AddWithValue("@PersonFamily", family);
            command.Parameters.AddWithValue("@PersonAge", age);
            connection.Open();
            command.ExecuteNonQuery();
            connection.Close();
      
        }

در متد بالا نکته مهم WebMethod بالای متد است که باعث میشه بتوانیم توسط Ajax این متد را صدا بزنیم

کد Ajax هم

      <mce:script type="text/javascript"><!--
          $(document).ready(function () {
              $('#btnSave').click(function () {
                  var personname = $('#txtName').val();
                  var personfamily = $('#txtFamily').val();
                  var personage = $('#txtAge').val();
                  $.ajax({
                      type: 'POST',
                      contentType: "application/json; charset=utf-8",
                      url: 'Default.aspx/Insert',
                      data: "{'name':'" + personname + "','family':'" + personfamily + "','age':'" + personage + "'}",
                      async: false,
                      success: function (response) {
                          $('#txtName').val(''); $('#txtFamily').val(''); $('#txtAge').val(''); 
                          alert("اطلاعات با موفقیت ذخیره شد");
                      },
                      error: function () {
                          alert("در ثبت خطایی رخ داده است");
                      }
                  });
              });
          });
// --></mce:script>

در این متد :

در قسمت زیر متد مربوطه را از صفحه مورد نظر صدا میزنیم

  contentType: "application/json; charset=utf-8",

در قسمت زیر پارامتر ها ارسال میکنیم

    data: "{'name':'" + personname + "','family':'" + personfamily + "','age':'" + personage + "'}",

نمونه هم ضمیمه کردم

امیدوارم خوشتون اومده باشه

موفق و پیروز باشید