ثبت داده ها با استفاده از جاوا اسکریپت در بانک اطلاعاتی

شنبه 10 بهمن 1394

در این مقاله قصد داریم چگونگی وارد کردن داده ها به پایگاه داده در ASP.NET با استفاده از جاوا اسکریپت که در آن ازمتد insert استفاده کرده ایم ، را مرحله به مرحله توضیح دهیم .

ثبت داده ها با استفاده از جاوا اسکریپت در بانک اطلاعاتی

 بخش  اولیه:

مرحله 1: ویژوال استودیو را باز کرده ویک وبسایت Empty ایجاد کرده و نام insert_demo را به آن اختصاص میدهیم.

مرحله 2:  در Solution Explorer  یک وب فرم و یک دیتابیس ایجاد میکنیم .

 برای Web Form :

روی Solution Explorer  راست کلیک کرده و گزینه Add New Item را انتخاب و سپس  Web Form جدیدی با نام insert_demo.aspx ایجاد میکنیم.

 برای SQL Server Database:

روی Solution Explorer  راست کلیک کرده و گزینه Add New Item را انتخاب و سپس  SQL Serve Database انتخاب میکنیم. [ داخل پوشه  App_Data  دیتابیس را اضافه میکنیم]

بخش دیتابیس:

مرحله 3: در دیتابیس  [mydb.mdf] ، جدول tbl_Data  را ایجاد میکنیم. my db را باز کرده و روی  گزینه Table راست کلیک کرده ، و Add New table را انتخاب میکنیم . جدول خود را مانند زیر طراحی  کنید،

 جدول:

 

بخش طراحی:

مرحله 5:  فایل insert_demo.aspx را باز کرده ، و دیزاین صفحه را ایجاد میکنیم.

insert_demo.aspx:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="insert_demo.aspx.cs" Inherits="insert_demo.InsertDemo" %>

<!DOCTYPE html>  
  
    <html xmlns="http://www.w3.org/1999/xhtml">  
  
    <head runat="server">  
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>  
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>  
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script>  
        <title></title>  
  
  
        <style type="text/css">  
            .auto-style1   
            {  
                width: 147px;  
            }  
        </style>  
    </head>  
  
    <body dir="rtl">  
        <form id="form1" runat="server">  
            <div>  
  
                <table style="width:100%;">  
                    <tr>  
                        <td class="auto-style1"> </td>  
                        <td> </td>  
                        <td> </td>  
                    </tr>  
                    <tr>  
                        <td class="auto-style1">نام </td>  
                        <td>  
                            <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>  
                        </td>  
                        <td> </td>  
                    </tr>  
                    <tr>  
                        <td class="auto-style1">ایمیل </td>  
                        <td>  
                            <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>  
                        </td>  
                        <td> </td>  
                    </tr>  
                    <tr>  
                        <td class="auto-style1">خصوصیت</td>  
                        <td>  
                            <asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>  
                        </td>  
                        <td> </td>  
                    </tr>  
                    <tr>  
                        <td class="auto-style1">شهر</td>  
                        <td>  
                            <asp:TextBox ID="TextBox4" runat="server"></asp:TextBox>  
                        </td>  
                        <td> </td>  
                    </tr>  
                    <tr>  
                        <td class="auto-style1"> </td>  
                        <td> </td>  
                        <td> </td>  
                    </tr>  
                    <tr>  
                        <td class="auto-style1"> </td>  
                        <td>  
                            <asp:Button ID="Button1" runat="server" Text="ثبت" />  
                        </td>  
                        <td> </td>  
                    </tr>  
                </table>  
  
            </div>  
        </form>  
        <script type="text/javascript">
            $(function () {

                $('#Button1').click(function () {
                    var name = $('#TextBox1').val();
                    var email = $('#TextBox2').val();
                    var designation = $('#TextBox3').val();
                    var city = $('#TextBox4').val();
                    if (name != '' && email != '' && designation != '' && city != '') {
                        $.ajax
                        ({
                            type: 'POST',
                            url: 'insert_demo.aspx/Insertdata',
                            async: false,
                            data: "{name:'" + name + "','email':'" + email + "',designation:'" + designation + "',city:'" + city + "'}",
                            contentType: 'application/json; charset =utf-8',
                            success: function (data) {

                                var obj = data.d;
                                if (obj == 'true') {
                                    $('#TextBox1').val('');
                                    $('#TextBox2').val('');
                                    $('#TextBox3').val('');
                                    $('#TextBox4').val('');
                                    alert("Data Saved Successfully");

                                }
                            },

                            error: function (result) {
                                alert("Error Occured, Try Again : "+result);
                            }
                        });
                    } else {
                        alert("Pleae Fill all the Fields");
                        return false;
                    }
                });
            });
        </script>  
  
    </body>  
  
    </html>  

بخش کد:

مرحله 6:   insert_demo.aspx.cs را باز کرده وکدهای زیر را در آن وارد میکنیم(Insert Into).

Insert_demo.aspx.cs :

 public partial class InsertDemo : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }
        [WebMethod]
        public static string Insertdata(string name, string email, string designation, string city)
        {
            string msg = "";

            SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["conStr"].ConnectionString);
            SqlCommand cmd = new SqlCommand("insert into tbl_data values(@name, @email,@designation,@city)", con);
            cmd.Parameters.AddWithValue("@name", name);
            cmd.Parameters.AddWithValue("@email", email);
            cmd.Parameters.AddWithValue("@designation", designation);
            cmd.Parameters.AddWithValue("@city", city);
            con.Open();

            int i = cmd.ExecuteNonQuery();
            if (i == 1)
            {
                msg = "true";
            }
            else
            {
                msg = "false";
            }
            con.Close();
            return msg;
            
        } 
    }
}

و داخل Web.config کد زیرا وارد میکنیم

<connectionStrings>
    <add name="conStr" connectionString="Data Source=(LocalDB)\v11.0;AttachDbFileName=|DataDirectory|\mydb.mdf;Integrated Security=True;MultipleActiveResultSets=True"/>
  </connectionStrings>

 

خروجی   :

برای بررسی ارسال داده به پایگاه داده برمیگردیم , Tables =>mydb.mdf و سپس روی tbl_data راست کلیک کرده و show Table Data را انتخاب میکنیم.

 

 

 

 

 

فایل های ضمیمه

برنامه نویسان

نویسنده 3355 مقاله در برنامه نویسان

کاربرانی که از نویسنده این مقاله تشکر کرده اند

در صورتی که در رابطه با این مقاله سوالی دارید، در تاپیک های انجمن مطرح کنید