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باید باشد و همچنین این متد دو ورودی دارد که نام و نام خانوادگی را دریافت می کند.
سورس و فیلم آموزشی این آموزش به صورت کامل جهت دانلود قرار داده شده.
این مطلب را به اشتراک بگذارید...
نظر / سوال