در این مقاله قصد دارم بهتون یاد بدم که چگونه اطلاعات فرم های خود را توسط 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(); } } } } }

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

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

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