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

[ایمان مدائنی]

http://barnamenevisan.org/ImagesArticle/7f325ff320544a0cb7b3cee409b25eac.jpg
سلام

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

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

یک بانک اطلاعاتی با نام UsersDB سپس یک Table با نام Users در آن ایجاد کنید
http://barnamenevisan.org/ImagesArticle/28492e446f874fada18f65f6cd751c7a.jpg
در صورتی که حال ساختن بانک رو نداشتین اسکریپت زیر را روی 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();
}
}
}
}
}


http://barnamenevisan.org/ImagesArticle/a54900ab443240dbad6da2803c00c274.jpg

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

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




رمز نگاری QueryString در Asp.Net
(http://barnamenevisan.org/Articles/Article2155.html)


ذخیره اطلاعات فرم در بانک اطلاعاتی توسط Ajax
(http://barnamenevisan.org/Articles/Article2157.html)

ارسال و دریافت اس ام اس با GSM Modem و ذخیره در بانک اطلاعاتی (#C)
(http://barnamenevisan.org/Articles/Article2153.html)

تغییر Theme سایت در زمان اجرا
(http://barnamenevisan.org/Articles/Article2151.html)