فرم ثبت نام بدون Refresh با استفاده از jQuery Ajax در ASP.Net

در این مقاله نشان می دهیم که چگونه یک فرم ثبت نام بدون 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

موفق باشید !