چگونه در asp.net با jquery داده را در جدول sql ثبت کنیم

شنبه 20 دی 1393

در این مقاله یک دید کلی در مورد اینکه چگونه در asp.net می توان داده ها را با jquery در جدول درج کنیم خواهیم داشت و خواهید دید که این عمل به سادگی انجام میپذیرد.

چگونه در  asp.net با jquery  داده را در جدول sql ثبت کنیم

   

در این مقاله این عمل را با استفاده از ajax در asp.net  انجام خواهیم داد ابتدا یک جدول در sql به نام test میسازیم و دو فیلد نام و ایمیل را نیز برای این جدول در نظر میگیریم.

حال به پروژه خود یک صفحه با نام Default.aspx (روی پروژه راست کلیک کرده و گزینه Add New Item و سپس New Page را انتخاب میکنیم و نام را وارد میکنیم و رو ی add کلیک میکنیم) اضافه میکنیم.

حال در قسمت سورس کد زیر را وارد کنید:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head id="Head1" runat="server">

    <title>AutoComplete Box with jQuery</title>

    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/base/jquery-ui.css"

        rel="stylesheet" type="text/css" />

    <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>

       <script type="text/javascript">

        $(document).ready(function () {

            $('#Button1').click(function () {

                $.ajax({

                    type: 'POST',

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

                    url: 'Default.aspx/InsertMethod',

                    data: "{'Name':'" + document.getElementById('txtUserName').value + "', 'Email':'" + document.getElementById('txtEmail').value + "'}",

                    async: false,

                    success: function (response) {                       

           $('#txtUserName').val('');

           $('#txtEmail').val('');

                        alert("Record Has been Saved in Database");

                    },

                    error: function ()

                    { console.log('there is some error'); }

                });

            });

        });      

    </script>

</head>

<body>

    <form id="form1" runat="server">

    <div class="demo">

        <div class="ui-widget">

            <label for="tbAuto">

                Enter UserName:

            </label>

&nbsp;<asp:TextBox ID="txtUserName" runat="server" ClientIDMode="Static" Width="202px"></asp:TextBox>

            <br />

            <br />

            Email: <asp:TextBox ID="txtEmail" runat="server" ClientIDMode="Static" Width="210px"></asp:TextBox>

            <br />

            <br />           

            <asp:Button ID="Button1" runat="server" Text="Button" ClientIDMode="Static" />

        </div>

    </div>

    </form>

</body>

</html>

حالا با فشردن کلید f7  به قسمت کد صفحه رفته و کد زیر را وارد کنید :

using System;

using System.Collections.Generic;

using System.Data.SqlClient;

using System.Web.Services;

using System.Web;

using System.Data;

 

public partial class _Default : System.Web.UI.Page

{

    protected void Page_Load(object sender, EventArgs e)

    {     

    }

      

    [WebMethod]

    public static string InsertMethod(string Name, string Email) 

    {       

        SqlConnection con = new SqlConnection("Data Source=.;Initial Catalog=TestDB;User ID=sa;Password=Micr0s0ft");

        {

            SqlCommand cmd = new SqlCommand("Insert into TestTable values('" + Name + "', '" + Email + "')", con);

            {

                con.Open();

                cmd.ExecuteNonQuery();

                return "True";

            }

        }

    }

}

حالا برنامه را اجرا کنید و نام و ایمیل را وارد کنید و بر روی دکمه button  کلیک کنید اطلاعات در جدول ذخیره میشود و یک پیغام در پایین صفحه سمت راست مبنی بر رکورد در جدول ذخیره شد ظاهرمی شود که میتوانید برای اطمینان sql را باز کرده و رکورد اضافه شده را مشاهده کنید یکی از مزایای استفاده از این روش این است که برای اضافه کردن یک رکورد به جدول خود نیازی به پست بک صفحه نیست.

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

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

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

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

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