در این مقاله قصد دارم بهتون یاد بدم که چگونه اطلاعات فرم های خود را توسط Jquery Ajax و بدون Post Back شدن صفحه در بانک اطلاعاتی ذخیره کنید .

سلام

در این مقاله قصد دارم بهتون یاد بدم که چگونه اطلاعات فرم های خود را توسط Jquery Ajax و بدون Post Back شدن صفحه در بانک اطلاعاتی ذخیره کنید .

مرحله اول باید بانک اطلاعاتی مربوط به پروژه خود را ایجاد کنیم

یک بانک اطلاعاتی با نام UsersDB سپس یک Table با نام Users در آن ایجاد کنید

در صورتی که حال ساختن بانک رو نداشتین اسکریپت زیر را روی Sql Server اجرا کنید

USE [master]
GO
/****** Object:  Database [UsersDB]    Script Date: 10/11/2013 16:55:39 ******/
CREATE DATABASE [UsersDB]  
GO
ALTER DATABASE [UsersDB] SET ANSI_NULL_DEFAULT OFF 
GO
ALTER DATABASE [UsersDB] SET ANSI_NULLS OFF 
GO
ALTER DATABASE [UsersDB] SET ANSI_PADDING OFF 
GO
ALTER DATABASE [UsersDB] SET ANSI_WARNINGS OFF 
GO
ALTER DATABASE [UsersDB] SET ARITHABORT OFF 
GO
ALTER DATABASE [UsersDB] SET AUTO_CLOSE OFF 
GO
ALTER DATABASE [UsersDB] SET AUTO_CREATE_STATISTICS ON 
GO
ALTER DATABASE [UsersDB] SET AUTO_SHRINK OFF 
GO
ALTER DATABASE [UsersDB] SET AUTO_UPDATE_STATISTICS ON 
GO
ALTER DATABASE [UsersDB] SET CURSOR_CLOSE_ON_COMMIT OFF 
GO
ALTER DATABASE [UsersDB] SET CURSOR_DEFAULT  GLOBAL 
GO
ALTER DATABASE [UsersDB] SET CONCAT_NULL_YIELDS_NULL OFF 
GO
ALTER DATABASE [UsersDB] SET NUMERIC_ROUNDABORT OFF 
GO
ALTER DATABASE [UsersDB] SET QUOTED_IDENTIFIER OFF 
GO
ALTER DATABASE [UsersDB] SET RECURSIVE_TRIGGERS OFF 
GO
ALTER DATABASE [UsersDB] SET  DISABLE_BROKER 
GO
ALTER DATABASE [UsersDB] SET AUTO_UPDATE_STATISTICS_ASYNC OFF 
GO
ALTER DATABASE [UsersDB] SET DATE_CORRELATION_OPTIMIZATION OFF 
GO
ALTER DATABASE [UsersDB] SET TRUSTWORTHY OFF 
GO
ALTER DATABASE [UsersDB] SET ALLOW_SNAPSHOT_ISOLATION OFF 
GO
ALTER DATABASE [UsersDB] SET PARAMETERIZATION SIMPLE 
GO
ALTER DATABASE [UsersDB] SET READ_COMMITTED_SNAPSHOT OFF 
GO
ALTER DATABASE [UsersDB] SET  READ_WRITE 
GO
ALTER DATABASE [UsersDB] SET RECOVERY FULL 
GO
ALTER DATABASE [UsersDB] SET  MULTI_USER 
GO
ALTER DATABASE [UsersDB] SET PAGE_VERIFY CHECKSUM  
GO
ALTER DATABASE [UsersDB] SET DB_CHAINING OFF 
GO
USE [UsersDB]
GO
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
CREATE TABLE [dbo].[Users](
	[Username] [nvarchar](30) NOT NULL,
	[Password] [nvarchar](200) NOT NULL
) ON [PRIMARY]
GO

کد HTML

شامل دو TextBox جهت دریافت نام کاربری و کلمه عبور

یک GridView جهت نمایش اطلاعات ثبت شده

    <table border="0" cellpadding="0" cellspacing="0">
        <tr>
            <td>
                نام کاربری:
            </td>
            <td>
                <asp:TextBox ID="txtUsername" runat="server" Text="" />
            </td>
        </tr>
        <tr>
            <td>
                کلمه عبور:
            </td>
            <td>
                <asp:TextBox ID="txtPassword" runat="server" TextMode="Password" />
            </td>
        </tr>
        <tr>
            <td>
            </td>
            <td>
                <asp:Button ID="btnSave" Text="ثبت" runat="server" />
            </td>
        </tr>
    </table>
    <hr />
    <asp:GridView ID="gvUsers" runat="server" AutoGenerateColumns="false" HeaderStyle-BackColor="#3AC0F2"
        HeaderStyle-ForeColor="White" RowStyle-BackColor="#A1DCF2">
        <Columns>
            <asp:BoundField DataField="Username" HeaderText="نام کاربری" />
            <asp:BoundField DataField="Password" HeaderText="کلمه عبور" />
        </Columns>
    </asp:GridView>

ارسال اطلاعات فرم به متد مربوطه توسط Jquery Ajax

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

<mce:script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" mce_src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></mce:script>
<mce:script type="text/javascript" src="http://cdn.jsdelivr.net/json2/0.1/json2.js" mce_src="http://cdn.jsdelivr.net/json2/0.1/json2.js"></mce:script>
<mce:script type="text/javascript"><!--
    $(function () {
        $("[id*=btnSave]").bind("click", function () {
            var user = {};
            user.Username = $("[id*=txtUsername]").val();
            user.Password = $("[id*=txtPassword]").val();
            $.ajax({
                type: "POST",
                url: "Default.aspx/SaveUser",
                data: '{user: ' + JSON.stringify(user) + '}',
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (response) {
                    alert("User has been added successfully.");
                    window.location.reload();
                }
            });
            return false;
        });
    });
// --></mce:script>

در زیر کلاسی تعریف شده در بدنه کد که پارامتر های ورودی را دریافت و یا چک میکنه

تقریبا Object از نوع Table ما

public class User
{
    public string Username { get; set; }
    public string Password { get; set; }
}

و اما کد مدیریت و ثبت کننده اطلاعات در CodeBehind

[WebMethod]
[ScriptMethod]
public static void SaveUser(User user)
{
    string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
    using (SqlConnection con = new SqlConnection(constr))
    {
        using (SqlCommand cmd = new SqlCommand("INSERT INTO Users VALUES(@Username, @Password)"))
        {
            cmd.CommandType = CommandType.Text;
            cmd.Parameters.AddWithValue("@Username", user.Username);
            cmd.Parameters.AddWithValue("@Password", user.Password);
            cmd.Connection = con;
            con.Open();
            cmd.ExecuteNonQuery();
            con.Close();
        }
    }
}

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

کلمه زیر که بالای متد قرار گرفته برای این است که بتوان توسط Ajax از این متد استفاده کرد

و کد زیر هم وظیفه پر کردن گرید ویو از بانک اطلاعاتی رو بعهده داره

protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
        using (SqlConnection con = new SqlConnection(constr))
        {
            using (SqlCommand cmd = new SqlCommand("SELECT * FROM Users"))
            {
                using (SqlDataAdapter sda = new SqlDataAdapter())
                {
                    DataTable dt = new DataTable();
                    cmd.CommandType = CommandType.Text;
                    cmd.Connection = con;
                    sda.SelectCommand = cmd;
                    sda.Fill(dt);
                    gvUsers.DataSource = dt;
                    gvUsers.DataBind();
                }
            }
        }
    }
}

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

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

نظر یادتون نره