ثبت اطلاعات با jQuery Ajax به زبان سی شارپ و ASP.NET در SQL Server

ثبت اطلاعات با jQuery Ajax

در این مقاله نشان خواهیم داد که چگونه با استفاده از ثبت اطلاعات با jQuery Ajax به زبان سی شارپ و ASP.NETدر SQL Server ؛ داده ها را وارد کنیم. به عنوان مثال یک پروژه ساده برای اضافه کردن رکوردها به دیتابیس (MS SQL Server) با استفاده از jQuery ajax در asp.net C را خواهیم داشت.

در این مقاله به طور خاص روی چگونگی اضافه کردن یا درج یک رکورد به دیتابیس بدون postback صفحه تمرکز می کنیم، و این کار می تواند باروش jQuery ajax انجام شود.

ما یک فراخوانی ajax ازسمت کلاینت انجام می دهیم که پارامترها (داده ها) را به سمت سرور ارسال می کند، و درسمت سرور این مقادیر رادر دیتابیس خود ذخیره می کنیم.

در سمت سرور این کار را می توانیم به روش های مختلفی مانند استفاده از Generic Handlers (فایل ashx)، استفاده از WebMethod (فایل ASMX)، استفاده ازسرویس های WCF یا Asp.net Web API مدیریت کنیم.

در این جا ما یک مثال ساده از درج داده ها در دیتابیس بااستفاده از فراخوانی jquery ajaxweb method با پارامترها را نشان می دهیم.

مراحل درج ثبت اطلاعات با jQuery Ajax

  •  دانلود و وارد کردن کتابخانه jQuery
  •  اضافه کردن HTML
  •  ایجاد کلاس
  •  Code behind: ایجاد Webmethod (برای درج رکوردها)
  •  jQuery: فراخوانی متد jquery Ajax

در این آموزش ثبت اطلاعات با jQuery Ajax فرض می کنیم که شما با WebMethod (فایل ASMX) آشنا هستید. بنابراین اجازه دهید که این مقاله را در اینجا ساده کنیم و در سمت سرور (C#) رکوردها را با استفاده از WebMethod درج خواهیم کرد.

دانلود و وارد کردن کتابخانه jQuery

از آنجایی که ما می خواهیم از ajax method در آموزش ثبت اطلاعات با jQuery Ajax  استفاده کنیم قبل از نوشتن هرگونه کدی در پروژه ثبت اطلاعات با jQuery Ajax،

ابتدا آخرین فایل jQuery را دانلود و در وب فرم (default.aspx) خود include می کنیم. فایل jQuery را می توانیم در سرور خود میزبانی کنیم،

یا به صورت مستقیم از کتابخانه jQuery روی گوگل استفاده نماییم.

پس از آن، تگ head صفحه وب ما شبیه به کد زیر می شود:


<head>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
 </script>
</head>

اضافه کردن HTML: تگ های ورودی که مقادیر آن ها در دیتابیس درج می شود.

در اینجا چند TextBox و button به وب فرم (default.aspx) اضافه می کنیم. و در کلیک دکمه، متد jquery ajax راخواهیم ساخت.

به طور خلاصه در فراخوانی جی کوئری ajax چندین پارامتر را برای ذخیره آن ها با کد سمت سرور ارسال می کنیم. طراحی HTML ما به شکل زیر خواهد بود:

<table>
           <tr>
                <td> نام: </td>
                <td><input id="txtFirstName" type="text" /> </td>
            </tr>
            <tr>


همانطور که ساختار HTML را مشاهده می کنید، ایده کلی این مثال و آنچه که می خواهیم ذخیره کنیم در آموزش ثبت اطلاعات با jQuery Ajax را متوجه شده اید.

بله، می خواهیم اطلاعات کاربر مانند نام، نام خانوادگی و مکان آن را در دیتابیس MS SQL SERVER ذخیره نماییم.

ایجاد کلاس

از آن جایی که ما باید شی JSON از سمت کلاینت به سمت سرور ارسال کنیم، ما باید اشیای جاوا اسکریپت خود رابه JSON تبدیل نماییم.

و کدگشایی آن می تواند سمت سرور انجام شود. که شی جاوا اسکریپت می تواند به شیکلاس C# تبدیل شود. پس یک کلاس C# ایجاد می کنیم.

در مثال ما، ما می خواهیم اطلاعات کاربر را ذخیره کنیم،بنابراین یک کلاس جدید با نام userDetails دارای propertyهای firstname، lastname و location ایجاد می کنیم.

در ضمن به خاطر داشته باشید که برای شی جاوا اسکریپت در سمت کلاینت نیز از ساختار مشابهی استفاده می کنیم.

                <td>نام خانوادگی:   </td>
                <td><input id="txtLastName" type="text" /> </td>
            </tr>
            <tr>
                <td>مکان:  </td>
                <td><input id="txtLocation" type="text" />  </td>
            </tr>
            <tr>
                <td></td>
                <td><button id="btnAddRecord">ثبت رکورد</button>
                    <span id="msg"></span>
                </td>
            </tr>
        </table>

Code-behind: ایجاد یک WebMethod (که برای ذخیره رکوردها استفاده می شود.)

تا اینجا ما ساختار HTML و کلاس شی userDetails را آماده کردیم، حالا اجازه دهید که یک webmethod بنویسیم که داده ها را در دیتابیس ذخیره می کند و ما این webMethod (وب سرویس) را از طریق jquery ajax از سمت کلاینت ذخیره می کنیم. کد WebMethod ما به شکل زیر می باشد:

//*
public class userDetails
{
   public string firstName;
   public string lastName;
   public string location;
}
//*

نکته: برای جلوگیری از SQL Injections، ما همیشه از کوئری پارامتری یا Stored procedure استفاده می کنیم.

بهترین کار برای انجام عملیات CRUD استفاده از کوئری پارامتر به جای دستورات ساده SQL می باشد.

فراخوانی متد jquery Ajax و ارسال/ درج داده ها در سرور

لطفا به این بخش دقت بیشتری داشته باشید چرا که این قسمت بخش اصلی مقاله است زیرا متد jquery ajax غالبا در همه اپلیکیشن های وب مورد استفاده قرار می گیرد.

خوب است که درک درست و خوبی از آن داشته باشیم،بنابراین می توانیم در زمان کار با پروژه ها به خوبی از آن استفاده کنیم.

حالا در رویداد کلیک دکمه ما webmethod از jquery را با پارامترها فراخوانی می کنیم، و این پارامترها (داده ها) دردیتابیس ذخیره می شوند.

احتمالا متوجه شدید که ما پارامترها را به صورت شی JSON، درست مثل کلاس شیمشابهی که در سمت سرور ساختیم، ارسال می کنیم.

متد Jquery ajax ما به شکل زیر نوشته شده است، که webmethod ای به نام addNewUser را که قبل تر در سمت سرور ساختیم، فراخوانی می کند.

//*
[WebMethod]
public string addNewUser(userDetails userDetails)
{
	try
	{
		using (SqlConnection con = new SqlConnection(cn.ConnectionString))
		{
			using (SqlCommand cmd = new SqlCommand())
			{
				cmd.CommandText = "insertNewUser";
				cmd.CommandType = CommandType.StoredProcedure;
				cmd.Connection = con;

				cmd.Parameters.AddWithValue("@firstName", userDetails.firstName);
				cmd.Parameters.AddWithValue("@lastName", userDetails.lastName);
				cmd.Parameters.AddWithValue("@location", userDetails.location);
				con.Open();
				cmd.ExecuteNonQuery();
			} con.Close();
		}
		return "success";
	}
	catch (Exception ac)
	{
		return "Error";
	}
}
//*

به این ترتیب کار ما تمام شد، روی دکمه کلیک می کنیم و متد ajax فراخوانی می شود.

نکته: این دو خطای رایج در کار با Webmethod رخ می دهد

۱. فراخوانی نامعتر سرویس، مقادیر جامانده برای پارامتر

۲. خطای نامشخص web method

خطای ۱: زمانی رخ می دهد که شی JSON ای که ما به سرور ارسال می کنیم نام پارامتر یکسان با همتای خود در web method سی شارپ نداشته باشد.

به عنوان مثال، نام کلاس شی C# ما باید مشابه شی جاوا اسکریپت باشد.

خطای ۲: این خطا بیشتر زمانی اتفاق می افتد که نام یا آدرس webmethod را اشتباه مشخص کرده باشیم یا اینکه webmethod در Webpage نوشته شده باشد.

مثلا (صفحه .ASPX) بنابراین لازم است که آن را استاتیک تعریف کنیم.

نتیجه گیری: در پایان این مقاله شما قادر به فراخوانی webmethod از jquery ajax خواهید بود. این مقاله در Asp.net C# با تلفیق متد jquery ajax و وب سرویس (ASMX) webmethod توضیح می دهد که چگونه داده ها را

با استفاده از jquery در asp.net C# درج یا ذخیره نماییم.

این کار بدون postback صفحه می تواند داده ها را دردیتابیس MS SQL در وب اپلیکیشن ما ذخیره کند.

 


زهره سلطانیان

نوشته‌های مرتبط

دیدگاه‌ها

*
*

این سایت از اکیسمت برای کاهش هرزنامه استفاده می کند. بیاموزید که چگونه اطلاعات دیدگاه های شما پردازش می‌شوند.