در این مقاله نشان می دهیم که چگونه یک فرم ثبت نام بدون Refresh را با استفاده از jQuery Ajax و JSON صفحه ثبت کرده و برای دیتابیس ارسال کنیم. در این مقاله از ASP.Net WebMethod استفاده کردیم و داده ها را از فیلدهای فرم مانند TextBox، DropDownList و… گرفته و در جدول دیتابیس وارد می کنیم. علاوه بر توضیحات کامل ، تصاویر نیز برایتان قرار داده شده است. با من همراه باشید …
فرم ثبت نام بدون Refresh
ساختار دیتابیس:
دیتابیس جدیدی با نام “UserDB” ایجاد کردیم که شامل جدولی با عنوان “Users” به شکل زیر می باشد:
کد HTML:
این کد شامل Textbox های مربوط به نام کاربری و پسورد و یک GridView برای نمایش نام کاربری و پسوردهای واردشده از طریق jQuery Ajax می باشد.
<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> <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 برای ذخیره فرم در دیتابیس
در ادامه، پیاده سازی jQuery AJAX برای ذخیره داده ها مانند مقدار TextBox های نام کاربری و پسورد به دیتابیس را داریم.
یک JavaScript Custom Object با نام user ایجاد می شود و داخل آن دو property با عنوان Username و Password به عنوان فرزند آن اضافه می کنیم، که شبیه شی کلاس در C# می باشد.
مقادیر TextBox های Username و Password در این propertyها قرار می گیرد و سپس این شی با استفاده از متد JSON stringify موجود در کتابخانه JSON2.js به رشته تبدیل می شود و به عنوان پارامتر به متد SaveUser که متد فراخوانی jQuery Ajax می باشد، ارسال می شود.
زمانی که فراخوانی jQuery Ajax با موفقیت انجام شد، یک پیغام هشدار جاوا اسکریپتی نمایش داده می شود و صفحه دوباره بارگذاری می شود، بنابراین رکورد در کنترل GridView نمایش داده می شود.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script type="text/javascript" src="http://cdn.jsdelivr.net/json2/0.1/json2.js"></script> <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; }); }); </script>
پیاده سازی کلاس:
پیاده سازی کلاس را در ادامه مشاهده می کنید، این کلاس JavaScript Custom Object را شبیه سازی می کند که پیشتر بحث کردیم. این شی برای واکشی و نگه داشتن مقادیر Username و Password که توسط متد jQuery Ajax ارسال می شوند، استفاده می شود.
نکته: بسیار مهم است که نام property های داخل کلاس دقیقا مشابه property های مربوط به JavaScript Custom Object باشد، در غیر این صورت jQuery Ajax ، WebMethod را اجرا نخواهد کرد.
سی شارپ
public class User { public string Username { get; set; } public string Password { get; set; } }
VB.Net:
Public Class User Public Property Username() As String Get Return _Username End Get Set(value As String) _Username = Value End Set End Property Private _Username As String Public Property Password() As String Get Return _Password End Get Set(value As String) _Password = Value End Set End Property Private _Password As String End Class
فضاهای نام:
فضای نام های زیر باید به پروژه اضافه شوند:
سی شارپ
using System.Data; using System.Data.SqlClient; using System.Configuration; using System.Web.Services; using System.Web.Script.Services;
VB.Net:
Imports System.Data Imports System.Data.SqlClient Imports System.Configuration Imports System.Web.Services Imports System.Web.Script.Services
WebMethod سمت سرور برای مدیریت فراخوانی jQuery AJAX
WebMethod زیر زمانی اجرا می شود که فراخوانی AJAX از سمت کلاینت انجام شده باشد. این متد شیء User را از سمت کلاینت می گیرد و مقادیر Username و Password در دیتابیس ذخیره می شوند.
سی شارپ
[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(); } } }
کد VB.Net:
<WebMethod ()> _ <ScriptMethod ()> _ Public Shared Sub SaveUser(user As User) Dim constr As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString Using con As New SqlConnection(constr) Using cmd As 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() End Using End Using End Sub
اضافه کردن کنترل GridView برای نمایش رکوردهای اضافه شده
در رویداد Page Load، کنترل GridView با رکوردهای جدول Users پر می شود.
سی شارپ
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(); } } } } }
کد VB.Net:
Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load If Not Me.IsPostBack Then Dim constr As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString Using con As New SqlConnection(constr) Using cmd As New SqlCommand("SELECT * FROM Users") Using sda As New SqlDataAdapter() Dim dt As New DataTable() cmd.CommandType = CommandType.Text cmd.Connection = con sda.SelectCommand = cmd sda.Fill(dt) gvUsers.DataSource = dt gvUsers.DataBind() End Using End Using End Using End If End Sub
موفق باشید !
ممنون. مفید بود
۶