آموزش کار با ajax در asp.net
0 0

آموزش کار با ajax در asp.net


آموزش کار با ajax در asp.net

در این پست نحوه ارسال اطلاعات به سرور به صورت Ajax در Asp.Net را توضیح می دهیم.

ساده ترین روش استفاده از Ajax در Asp.Net استفاده از ابزارهای آماده خود Asp.Net می باشد به این صورت یک  UpdatePanel از ابزارهای Ajax در Asp.Net به صفحه اضافه کنید و کدهای که می خواهید به صورت Ajax به سرور ارسال شوند داخل آن بنویسید.

اما ما در این آموزش با استفاده jquery این کار را انجام می دهیم.

ابتدا به سایت jquery.com رفته و آخرین نسخه آن را دانلود کنید همچنین می توانید کد زیر را در Package Manager Console بنویسید تا آخرین نسخه jquery به صورت خودکار از سایت NuGet دانلود شده و به برنامه اضافه شود.

 install-package jquery

ابتدا ما یک دیتابیس در sql Server ایجاد کردیم که دارای یک جدول به نام person می باشد و فیلد های نام و نام خانوادگی را برای آن در نظر گرفتیم. تا نام و نام خانوادگی را با استفاده از Ajax در دیتابیس ذخیره کنیم.

کدهای صفحه Default.aspx به صورت زیر می باشد.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>www.iranganj.ir</title>
    <script src="Scripts/jquery-2.1.3.min.js"></script>
    <script type="text/javascript">
        function SendData() {
            var varName = document.getElementById("txtName").value;
            var varFamily = document.getElementById("txtFamily").value;
            $.ajax(
            {
                type: "POST",
                url: "Default.aspx/Insert",
                data: "{'name':'" + varName + "','family':'" + varFamily + "'}",
                contentType: "application/json;charset=utf-8",
                dataType: "json",
                success: function (data, textStatus, jqXHR) { alert("Insert success"); },
                error: function (jqXHR, textStatus, errorThrown) { alert("Insert UnSuccess\n" + errorThrown); },
                complete: function (jqXHR, textStatus) { alert("textStatus"); }

            }

                );
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div dir="rtl">
            <table>
                <tbody>
                    <tr>
                        <td>نام</td>
                        <td>
                            <input type="text" id="txtName" /></td>
                    </tr>
                    <tr>
                        <td>نام خانوادگی</td>
                        <td>
                            <input type="text" id="txtFamily" /></td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <input type="button" value="ثبت" id="btnSend" onclick="SendData();" />
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </form>
</body>
</html>

در کدهای بالا ابتدا لینک jquery که در بالا نحوه دانلود آن را توضیح دادیم اضافه کردیم.

سپس یک funcation به نام SendData تعریف کردیم و در آن  نام و نام خانوادگی را از input ها دریافت کردیم و در دو متغیر varName و varFamily قرار دادیم.

Type : نوع ارسال را مشخص می کنیم که به دو صورت POST و GET می تواند باشد

url : مسیر انجام عملیات ثبت را مشخص می کنیم ما با همین صفحه اشاره کردیم و شما می توانید نام هر صفحه دیگری نیز بنویسید.  Insert نام متدی است کار ثبت اطلاعات در دیتابیس را انجام میدهد را نوشتیم که در پایین به صورت کامل آن را توضیح خواهیم داد.

Data : در این قسمت اطلاعات ارسالی به سمت سرور را می نویسیم توجه کنید name و family ورودی های متد Insert می باشد که باید هم نام با ورودی های متد تعریف شده یکسان باشند.

contentType : در این قسمت ابتدا بسته ارسالی را مشخص می کنیم که به صورت json باشد و همچنین جهت پشتیبانی از زبان فارسی و همچنین پشتیبانی از کارکترهای دو بایتی برابر utf-8 قرار می دهیم.

dataType : نوع داده دریافتی که از سمت سرور ارسال می شود رامشخص می کنیم که می تواند به صورت json و html و xml و .. باشد

Success : در این قسمت مشخص می کنیم در صورتی که عملیات موفق آمیز بود چه اتفاقی بیفتد.

Error : همچنین در صورت بروز خطا چه پیغامی را نمایش دهد و همچنین می توانیم خطای اتفاق افتاده را نیز نمایش دهیم.

Complete : در این قسمت مشخص می کنیم در صورتی که عملیات پایان یافت چه اتفاقی بیفتد.

در کلیک دکمه btnSend تابع SendData را فراخوانی کردیم.

کدهای سی شارپ به صورت زیر می باشد.

using System;
using System.Collections.Generic;
using System.Configuration;
using System.Data.SqlClient;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }

    [WebMethod(EnableSession = true)]
    public static void Insert(string name, string family)
    {
        string query = "INSERT INTO Person VALUES (@Name,@Family)";
        string conString = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
        using (SqlConnection con = new SqlConnection(conString))
        {
            using (SqlCommand cmd = new SqlCommand(query, con))
            {
                cmd.Parameters.AddWithValue("@Name", name);
                cmd.Parameters.AddWithValue("@Family", family);
                con.Open();
                cmd.ExecuteNonQuery();
                con.Close();
            }
        }
    }
}

در کدهای بالا یک متد به نام Insert تعریف کردیم که حتما از نوع public و  staticباید باشد و همچنین این متد دو ورودی دارد که نام و نام خانوادگی را دریافت می کند.

سورس و فیلم آموزشی این آموزش به صورت کامل جهت دانلود قرار داده شده.

دانلود

نویسنده حسین فتحی
گروه مطلب Asp.Net
نوع مطلب فیلم آموزشی
تاریخ انتشار ۱۶ بهمن ۱۳۹۳
منبع ایران گنج
تعداد نظرات ۲
قیمت کاربران VIP
توضیح توجه:
  • زمانی که روی لینک دانلود کلیک می کنید لینک دانلود به مدت 24 ساعت معتبر خواهد بود
  • لینک های دانلود دوره های آموزشی تا پایان دوره قابل دانلود می باشد.
  • برای خارج کردن فایل ها از حالت فشرده از ورژن جدید نرم افزار winrar استفاده کنید.
  • برای خارج کردن فایل ها از حالت فشرده لینک های دانلودی که چندین قسمت می باشند فقط قسمت اول را از حالت فشرده خارج کنید.
  • لطفا توضیحات نوشته شده برای مطالب را با دقت بخوانید.
  • برای نمایش فیلم ها می توانید از نرم افزار هایی مانند Km Player , VLC Player یا Media Player Classic استفاده کنید.

نظر / سوال

Captcha

تعداد نظرات : ۲

  • محسن

    خیلی عالی بود و لی ای کاش بیشتر توضیح می دادین که تقاوت Success با complete در چیه؟؟؟

    پاسخ
    • مدیر

      با سلام و درود

      در آموزش توضیح داده شده. Success زمانی اتفاق می افتد که عملیات ajax با موفقیت انجام شده باشد اما complete چه عملیات ajax با موفقیت انجام شود چه با خطا مواجع شود اتفاق می افتد در کل با پایان عملیات ajax قسمت complete اتفاق می افتد.

      پاسخ

این صفحه را می‌پسندم