XMLHttpRequest رابطی است که به شما امکان نقل و انتقالات را از سمت کاربر، به سمت سرور و سپس دریافت پاسخ آن را میدهد. این رابط طوری طراحی شدهاست که دیگر برای این جابجایی نیازی به بارگزاری مجدد کل صفحه نباشد و قسمتی از اطلاعات صفحات به روز شوند، مزاحمتی برای کاربر ایجاد نشود. به همین دلیل از این رابط، در پشت صحنههای عملیات ایجکسی استفاده زیادی میشود. در این مقاله با استفاده از خصوصیتی به نام request.IsAjax بررسی میشود که آیا درخواست رسیده به سرور از نوع ایجکسی است یا خیر. اگر به سورس نوشته شده این متد نگاه دقیقتری بیندازیم، متوجه میشویم کاری که این متد انجام میدهد، در واقع در یک خط خلاصه میشود و آن بررسی هدری برای وجود درخواست از نوع XMLHttpRequest است:
return request.Headers["X-Requested-With"] == "XMLHttpRequest";
یکی از متدهای این رابط، متد ارسال آن (send) میباشد که میتواند رابطی به نام formData را انتقال دهد و این رابط از نوع مجموعهای از کلید و مقدارهاست. این رابط زمانی به کار گرفته میشود که انکدینگ فرم خود را بر روی multipart/form-data قرار داده باشید. این ساختار میتواند توسط دستور for of بررسی گردد. برای آشنایی بیشتر با متدهای آن این صفحه را مطالعه فرمایید.
هنگام ارسال فایل در حالت postback، ما فرم را بر روی multipart قرار میدهیم تا امکان ارسال آن توسط formData مهیا شود. ولی از آنجاکه ما از ایجکس استفاده میکنیم، بهتر است که خودمان مستقیما از این ساختار استفاده کنیم.
بخشی از فرم Html
<div> <label>تصویر</label> <div> <input id="picture" type="file" data-buttonText="انتخاب تصویر"> </div> </div> <div> <label>کد ملی</label> <div> <input id="txtNationalCode" required="" maxlength="10" type="text"> </div> </div> <div> <label>نام</label> <div> <input id="txtName" type="text" maxlength="50" required=""> </div> </div> <div class="form-group"> <div class="col-sm-4 col-sm-offset-2"> <button class="btn btn-primary" id="btnSubmit" type="submit">ذخیره</button> <button class="btn btn-white" id="btnClear" type="submit">لغو</button> </div> </div>
سپس کد جی کوئری زیر را مینویسیم:
var formData = new FormData(); formData.append('FirstName', $("#txtName").val()); formData.append('NationalCode', $("#txtNationalCode").val()); jQuery.each($('#picture')[0].files, function (i, file) { formData.append('picture-'+i, file); }); $.ajax({ type: "POST", dataType: "json", url: address, data: formData, success: function (data) { //..... }, error: function (data) { //...... } });
توجه به این نکته ضروری است و با توجه کدهایی که در نت دیدم و بسیاری از آن حتی به عنوان پاسخ صحیح در نظر گرفته شده بودند این است که شیء FormData شامل هیچ سازندهای نیست و باید با استفاده از متد append آنها را اضافه کنید.
برای اینکار SQL Server از یک بافر 60 کیلوبایتی برای ذخیره سازی اطلاعات لاگهایی که قرار است به صورت غیرهمزمان با تراکنشها نوشته شوند، استفاده میکند. هر زمان که این 60KB پر شد، آنرا flush کرده و ثبت خواهد نمود. به این ترتیب به دو مزیت خواهیم رسید:
- پردازش تراکنشها بدون منتظر شدن جهت commit نهایی در دیسک سخت ادامه خواهند یافت. صبر کمتر به معنای امکان پردازش تراکنشهای بیشتری در یک سیستم پر ترافیک است.
- با توجه به بافری که از آن صحبت شد، اینبار اعمال Write به صورت یک سری batch اعمال میشوند که کارآیی و سرعت بیشتری نسبت به حالت تکی دارند.
اندکی تاریخچه
ایده یک چنین عملی 28 سال قبل توسط Hal Berenson ارائه شدهاست! اوراکل آنرا در سال 2006 تحت عنوان Asynchronous Commit پیاده سازی کرد و مایکروسافت در سال 2014 آنرا ارائه دادهاست.
فعال سازی ماندگاری غیرهمزمان در SQL Server
فعال سازی این قابلیت در سطح بانک اطلاعاتی، در سطح یک تراکنش مشخص و یا در سطح رویههای ذخیره شده کامپایل شده مخصوص OLTP درون حافظهای، میسر است.
برای فعال سازی ماندگاری با تاخیر در سطح یک دیتابیس، خواهیم داشت:
ALTER DATABASE dbname SET DELAYED_DURABILITY = DISABLED | ALLOWED | FORCED;
در اینجا اگر ALLOWED را انتخاب کنید، به این معنا است که لاگ کلیه تراکنشهای مرتبط با این بانک اطلاعاتی به صورت غیرهمزمان نوشته میشوند. حالت FORCED نیز دقیقا به همین معنا است با این تفاوت که اگر حالت ALLOWED انتخاب شود، تراکنشهای ماندگار (آنهایی که به صورت دستی DELAYED_DURABILITY را غیرفعال کردهاند)، سبب flush کلیه تراکنشهایی با ماندگاری به تاخیر افتاده خواهند شد و سپس اجرا میشوند. در حالت Forced تنظیم دسترسی DELAYED_DURABILITY = OFF در سطح تراکنشها تاثیری نخواهد داشت؛ اما در حالت ALLOWED این مساله به صورت دستی در سطح یک تراکنش قابل لغو است.
البته باید توجه داشت، صرفنظر از این تنظیمات، یک سری از تراکنشها همیشه ماندگار هستند و بدون تاخیر؛ مانند تراکنشهای سیستمی، تراکنشهای بین دو یا چند بانک اطلاعاتی و کلیه تراکنشهایی که با FileTable، Change Data Capture و Change Tracking سر و کار دارند.
در سطح تراکنشهای میتوان نوشت:
COMMIT TRANSACTION WITH (DELAYED_DURABILITY = ON);
BEGIN ATOMIC WITH (DELAYED_DURABILITY = ON, ...)
سؤال: آیا فعال سازی DELAYED_DURABILITY بر روی مباحث locking و isolation levels تاثیر دارند؟
پاسخ: خیر. کلیه تنظیمات قفل گذاریها همانند قبل و بر اساس isolation levels تعیین شده، رخ خواهند داد. تنها تفاوت در اینجا است که با فعال سازی DELAYED_DURABILITY، کار commit بدون صبر کردن برای پایان نوشته شدن اطلاعات در لاگ سیستم صورت میگیرد. به این ترتیب قفلهای انجام شده زودتر آزاد خواهند شد.
سؤال: میزان از دست دادن اطلاعات احتمالی در این روش چقدر است؟
در صورتیکه سرور کرش کند یا ریاستارت شود، حداکثر به اندازهی 60KB اطلاعات را از دست خواهید داد (اندازهی بافری که برای اینکار درنظر گرفته شدهاست). البته عنوان شدهاست که اگر ریاستارت یا خاموشی سرور، از پیش تعیین شده باشد، ابتدا کلیه لاگهای flush نشده، ذخیره شده و سپس ادامهی کار صورت خواهد گرفت؛ ولی زیاد به آن اطمینان نکنید. اما همواره با فراخوانی sys.sp_flush_log، میتوان به صورت دستی بافر لاگهای سیستم را flush کرد.
یک آزمایش
در ادامه قصد داریم یک جدول جدید را در بانک اطلاعاتی آزمایشی testdb2 ایجاد کنیم. سپس یکبار تنظیم DELAYED_DURABILITY = FORCED را انجام داده و 10 هزار رکورد را ثبت میکنیم و بار دیگر DELAYED_DURABILITY = DISABLED را تنظیم کرده و همین عملیات را تکرار خواهیم کرد:
CREATE TABLE tblData( ID INT IDENTITY(1, 1), Data1 VARCHAR(50), Data2 INT ); CREATE CLUSTERED INDEX PK_tblData ON tblData(ID); CREATE NONCLUSTERED INDEX IX_tblData_Data2 ON tblData(Data2); ------------------------- alter database testdb2 SET DELAYED_DURABILITY = FORCED; ------------------------- SET NOCOUNT ON Print 'DELAYED_DURABILITY = FORCED' DECLARE @counter AS INT = 0 DECLARE @start datetime = getdate() WHILE (@counter < 10000) BEGIN INSERT INTO tblData (Data1, Data2) VALUES('My Data', @counter) SET @counter += 1 END Print DATEDIFF(ms,@start,getdate()); GO ------------------------- alter database testdb2 SET DELAYED_DURABILITY = DISABLED; truncate table tblData; ------------------------- SET NOCOUNT ON Print 'DELAYED_DURABILITY = DISABLED' DECLARE @counter AS INT = 0 DECLARE @start datetime = getdate() WHILE (@counter < 10000) BEGIN INSERT INTO tblData (Data1, Data2) VALUES('My Data', @counter) SET @counter += 1 END Print DATEDIFF(ms,@start,getdate()); GO -----------------------
DELAYED_DURABILITY = FORCED 666 DELAYED_DURABILITY = DISABLED 2883
برای مطالعه بیشتر
Control Transaction Durability
SQL Server 2014 Delayed Durability/Lazy Commit
Delayed Durability in SQL Server 2014 – Part 1
Is In-Memory OLTP Always a silver bullet for achieving better transactional speed
Delayed Durability in SQL Server 2014
نحوه استفاده از ViewModel در ASP.NET MVC
public class ResumeViewModel { public ResumeViewModel() { } public ResumeViewModel(IEnumerable<Resume> resum, IEnumerable<Work_Experience_Job_Seeker> workExperienceJobSeekerOfViewModel, IEnumerable<Job_Expertises> jobExpertisesOfViewModel, IEnumerable<Degrees_Work_Experience_Required> degreesWorkExperienceRequiredOfViewModel, IEnumerable<Specialized_Course> specializedCourseOfViewModel, IEnumerable<Book_Published> bookPublishedOfViewModel, IEnumerable<Basic_Table> basicTable) { ResumeOfViewModel = resum; WorkExperienceJobSeekerOfViewModel = workExperienceJobSeekerOfViewModel; JobExpertisesOfViewModel = jobExpertisesOfViewModel; DegreesWorkExperienceRequiredOfViewModel = degreesWorkExperienceRequiredOfViewModel; SpecializedCourseOfViewModel = specializedCourseOfViewModel; BookPublishedOfViewModel = bookPublishedOfViewModel; BasicTable = basicTable; } public IEnumerable<Resume> ResumeOfViewModel { get; set; } public IEnumerable<Work_Experience_Job_Seeker> WorkExperienceJobSeekerOfViewModel { get; set; } public IEnumerable<Job_Expertises> JobExpertisesOfViewModel { get; set; } public IEnumerable<Degrees_Work_Experience_Required> DegreesWorkExperienceRequiredOfViewModel { get; set; } public IEnumerable<Specialized_Course> SpecializedCourseOfViewModel { get; set; } public IEnumerable<Book_Published> BookPublishedOfViewModel { get; set; } public IEnumerable<Basic_Table> BasicTable { get; set; } public int NumberForm { get; set; } // EditResumes.chtml & ShowResumes.chtml ===> baraye select kardan formha :D }
[HttpGet] public ActionResult EditResumes(int id) { var contex = new Final_My_ProjectEntities2(); var res1 = contex.Resumes.Where(rec => rec.Resume_ID == id); var res2 = contex.Work_Experience_Job_Seeker.Where(rec => rec.Resume_ID == id).ToList(); var res3 = contex.Job_Expertises.Where(rec => rec.Resume_ID == id).ToList(); var res4 = contex.Degrees_Work_Experience_Required.Where(rec => rec.Resume_ID == id).ToList(); var res5 = contex.Specialized_Course.Where(rec => rec.Resume_ID == id).ToList(); var res6 = contex.Book_Published.Where(rec => rec.Resume_ID == id).ToList(); var res12 = contex.Basic_Table.ToList(); var viewModel = new ResumeViewModel(res1, res2, res3, res4, res5, res6,res12); var items = new SelectList( new[] { new {Value = "1", Text = "فرم مهارت ها"}, new {Value = "2", Text = "فرم کتاب/مقالات منتشر شده"}, new {Value = "3", Text = "فرم سابقه کاری"}, new {Value = "4", Text = "فرم دورههای تخصصی گذرانده"}, new {Value = "5", Text = "فرم تخصصهای شغلی"}, new {Value = "6", Text = "فرم مدارک تحصیلی"} }, "Value", "Text"); ViewBag.Form = new SelectList(items, "Value", "Text"); var res7 = contex.Basic_Table.Where(rec => rec.Domain == "MilitaryStatus").ToList(); ViewBag.MilitaryStatus = new SelectList(res7, "Value", "Meaning",res1); var res8 = contex.Basic_Table.Where(rec => rec.Domain == "Sex"); ViewBag.Sex = new SelectList(res8, "Value", "Meaning", res1); var res9 = contex.Basic_Table.Where(rec => rec.Domain == "MartialStatus").ToList(); ViewBag.MartialStatus = new SelectList(res9, "Value", "Meaning", res1); var res10 = contex.Basic_Table.Where(rec => rec.Domain == "Degree").ToList(); ViewBag.Degree = new SelectList(res10, "Value", "Meaning"); var res11 = contex.Basic_Table.Where(rec => rec.Domain == "Ability").ToList(); ViewBag.Ability = new SelectList(res11, "Value", "Meaning"); return View(viewModel); }
@model Final_My_Project.ViewModels.ResumeViewModel @{ ViewBag.Title = "ویرایش رزومه"; ViewBag.PartOne = "فرم مهارت ها"; ViewBag.PartTwo = "فرم کتاب/مقالات منتشر شده"; ViewBag.Part3 = "فرم سابقه کاری"; ViewBag.Part4 = "فرم دورههای تخصصی گذرانده"; ViewBag.Part5 = "فرم تخصصهای شغلی"; ViewBag.Part6 = "فرم مدارک تحصیلی"; } <h2 style="font-family: Arial;">@ViewBag.Title</h2><br/> <script type="text/javascript"> $(function () { $('#Gender').change(function () { var selectKind = $(this).find('option:selected').text(); var divMilitary; if (selectKind == "زن") { divMilitary = $('#Military'); divMilitary.hide(); divMilitary.css('display', 'none'); } else if (selectKind == "مرد") { divMilitary = $('#Military'); divMilitary.show(); divMilitary.css('display', 'block'); } }); }); </script> <script type="text/javascript"> $(function () { $('#SelectForm').change(function () { var selectFrom = $(this).find('option:selected').text(); if (selectFrom == "فرم مهارت ها") { $('#PartOne').show(); $('#PartOne').css('display', 'block'); $('#PartTwo').hide(); $('#PartTwo').css('display', 'none'); $('#Part3').hide(); $('#Part3').css('display', 'none'); $('#Part4').hide(); $('#Part4').css('display', 'none'); $('#Part5').hide(); $('#Part5').css('display', 'none'); $('#Part6').hide(); $('#Part6').css('display', 'none'); } if (selectFrom == "فرم کتاب/مقالات منتشر شده") { $('#PartTwo').show(); $('#PartTwo').css('display', 'block'); $('#PartOne').show(); $('#PartOne').css('display', 'none'); $('#Part3').hide(); $('#Part3').css('display', 'none'); $('#Part4').hide(); $('#Part4').css('display', 'none'); $('#Part5').hide(); $('#Part5').css('display', 'none'); $('#Part6').hide(); $('#Part6').css('display', 'none'); } if (selectFrom == "فرم سابقه کاری") { $('#Part3').show(); $('#Part3').css('display', 'block'); $('#PartTwo').hide(); $('#PartTwo').css('display', 'none'); $('#PartOne').show(); $('#PartOne').css('display', 'none'); $('#Part4').hide(); $('#Part4').css('display', 'none'); $('#Part5').hide(); $('#Part5').css('display', 'none'); $('#Part6').hide(); $('#Part6').css('display', 'none'); } if (selectFrom == "فرم دورههای تخصصی گذرانده") { $('#Part4').show(); $('#Part4').css('display', 'block'); $('#PartTwo').hide(); $('#PartTwo').css('display', 'none'); $('#PartOne').show(); $('#PartOne').css('display', 'none'); $('#Part3').hide(); $('#Part3').css('display', 'none'); $('#Part5').hide(); $('#Part5').css('display', 'none'); $('#Part6').hide(); $('#Part6').css('display', 'none'); } if (selectFrom == "فرم تخصصهای شغلی") { $('#Part5').show(); $('#Part5').css('display', 'block'); $('#PartTwo').hide(); $('#PartTwo').css('display', 'none'); $('#PartOne').show(); $('#PartOne').css('display', 'none'); $('#Part3').hide(); $('#Part3').css('display', 'none'); $('#Part4').hide(); $('#Part4').css('display', 'none'); $('#Part6').hide(); $('#Part6').css('display', 'none'); } if (selectFrom == "فرم مدارک تحصیلی") { $('#Part6').show(); $('#Part6').css('display', 'block'); $('#Part5').show(); $('#Part5').css('display', 'none'); $('#PartTwo').hide(); $('#PartTwo').css('display', 'none'); $('#PartOne').show(); $('#PartOne').css('display', 'none'); $('#Part3').hide(); $('#Part3').css('display', 'none'); $('#Part4').hide(); $('#Part4').css('display', 'none'); } }); }); </script> @Html.DropDownListFor(m=>m.NumberForm, (SelectList)ViewBag.Form, new { id = "SelectForm" }) @using (Html.BeginForm()) { @Html.ValidationSummary(true) <div id="PartOne" > <h3 style="font-family: Arial; color: #008080; font-weight: bold; ">@ViewBag.PartOne</h3><br/> @foreach (var item in Model.ResumeOfViewModel) { <table dir="rtl"> <tr> <td> @Html.Label("عنوان رزومه") </td> <td> @Html.TextBoxFor(model =>item.Title_Of_Resume , new {@class = "text", style = "width:100 px"}) @Html.ValidationMessageFor(model => item.Title_Of_Resume) </td> </tr> <tr> <td> <div id="Gender" > @Html.Label("نوع جنسیت") @Html.DropDownList("نوع جنسیت", new SelectList(ViewBag.Sex, "Value", "Text", item.Sex_ID == 0 ? 0 : item.Sex_ID)) @Html.ValidationMessageFor(model => item.Sex_ID) </div> </td> <td> <div > @Html.Label("وضعیت تاهل") @Html.DropDownList("وضعیت تاهل", new SelectList(ViewBag.MartialStatus, "Value", "Text", item.Martial_Status_ID == 0 ? 0 : item.Martial_Status_ID)) @Html.ValidationMessageFor(model => item.Martial_Status_ID) </div> </td> </tr> <tr id="Military" style="display: none;"> <td> @Html.Label("وضعیت نظام وظیفه") </td> <td> @Html.DropDownList("وضعیت نظام وظیفه", new SelectList(ViewBag.MilitaryStatus, "Value", "Text", item.Military_Status_ID == 0 ? 0 : item.Military_Status_ID), new { id = "Gender" }) @Html.ValidationMessageFor(model => item.Military_Status_ID) </td> </tr> <tr> <td> @Html.Label("آشنایی با رایانه") </td> <td> @Html.DropDownListFor(model => item.Knowledge_Of_Computers_ID, (SelectList)ViewBag.Ability) @Html.ValidationMessageFor(model => item.Knowledge_Of_Computers_ID) </td> </tr> <tr> <td> @Html.Label("آشنایی با امور اداری و دفتری") </td> <td> @Html.DropDownListFor(model => item.Knowledge_Administrative_and_Clerical_ID, (SelectList) ViewBag.Ability) @Html.ValidationMessageFor(model => item.Knowledge_Administrative_and_Clerical_ID) </td> </tr> <tr> <td> @Html.Label("آشنایی با زبان انگلیسی") </td> <td> @Html.DropDownListFor(model => item.Knowledge_Of_English_ID, (SelectList) ViewBag.Ability) @Html.ValidationMessageFor(model => item.Knowledge_Of_English_ID) </td> </tr> <tr> <td> @Html.Label("آشنایی با زبان عربی") </td> <td> @Html.DropDownListFor(model => item.Knowledge_Of_Arabic_ID, (SelectList) ViewBag.Ability) @Html.ValidationMessageFor(model => item.Knowledge_Of_Arabic_ID) </td> </tr> <tr> <td> @Html.Label("آشنایی با ماکروسافت آفیس") </td> <td> @Html.DropDownListFor(model =>item.Knowledge_Of_Office_ID, (SelectList) ViewBag.Ability) @Html.ValidationMessageFor(model => item.Knowledge_Of_Office_ID) </td> </tr> <tr> <td> @Html.Label("آشنایی با امور مالی و حسابداری") </td> <td> @Html.DropDownListFor(model =>item.Knowledge_Of_Finance_ID, (SelectList) ViewBag.Ability) @Html.ValidationMessageFor(model => item.Knowledge_Of_Finance_ID) </td> </tr> <tr> <td> @Html.Label("آشنایی با مدیریت") </td> <td> @Html.DropDownListFor(model =>item.Knowledge_Of_Manage_ID, (SelectList) ViewBag.Ability) @Html.ValidationMessageFor(model =>item.Knowledge_Of_Manage_ID) </td> </tr> <tr> <td> @Html.Label("گواهینامه رانندگی پایه یک") </td> <td> @Html.DropDownListFor(model =>item.Driving_license_One_ID, (SelectList) ViewBag.Ability) @Html.ValidationMessageFor(model =>item.Driving_license_One_ID) </td> </tr> <tr> <td> @Html.Label("گواهینامه رانندگی پایه دو") </td> <td> @Html.DropDownListFor(model =>item.Driving_license_Two_ID, (SelectList) ViewBag.Ability) @Html.ValidationMessageFor(model =>item.Driving_license_Two_ID) </td> </tr> <tr> <td> @Html.Label("گواهینامه رانندگی پایه موتورسیکلت") </td> <td> @Html.DropDownListFor(model =>item.Certificate_Motor_ID, (SelectList) ViewBag.Ability) @Html.ValidationMessageFor(model =>item.Certificate_Motor_ID) </td> </tr> <tr> <td> @Html.Label("ماشین شخصی") </td> <td> @Html.DropDownListFor(model =>item.Personal_Vehicle_ID, (SelectList) ViewBag.Ability) @Html.ValidationMessageFor(model =>item.Personal_Vehicle_ID) </td> </tr> <tr> <td> @Html.Label("روابط عمومی") </td> <td> @Html.DropDownListFor(model =>item.Public_Relationship_ID, (SelectList) ViewBag.Ability) @Html.ValidationMessageFor(model =>item.Public_Relationship_ID) </td> </tr> <tr> <td> @Html.Label("دیگر توانایی ها") </td> <td> @Html.EditorFor(model =>item.Etc_Ability) @Html.ValidationMessageFor(model =>item.Etc_Ability) </td> </tr> </table> } </div> <p> <input type="submit" value="Save" onclick="return confirm('از ثبت اطلاعات مطمئن هستید؟')" /> </p> } <div> @Html.ActionLink("بازگشت به مدیریت رزومه ها", "ManageOfResumes") </div> @section scripts { @Scripts.Render("~/bundles/jqueryval") }
[HttpPost] public ActionResult EditResumes(ResumeViewModel model) // model null mishe ! CHERAA??! { var contex = new Final_My_ProjectEntities2(); try { if (ModelState.IsValid) { // Code... che cody? contex.SaveChanges(); } } catch (Exception) { ViewBag.wrong = "لطفا دادههای ورودی را بررسی نمایید"; } return View(model); }
فرض کنید تعیین اعتبار یکی از فیلدهای فرم نیاز به انجام محاسباتی در سمت سرور دارد و اینکار را میخواهیم با استفاده از jQuery Ajax انجام دهیم. مشکلی که در اینجا وجود دارد، این است که A در Ajax به معنای asynchronous است. یعنی زمانیکه کاربر دکمه submit را فشرد، دیگر برنامه منتظر این نخواهد شد که پاسخ کامل دریافت شود ، سایر پردازشها صورت گیرد و سپس فرم را به سرور ارسال نماید (شبیه به ایجاد یک ترد جدید در برنامههای ویندوزی). مثال زیر را در نظر بگیرید:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TestCustomValidation.aspx.cs"
Inherits="TestJQueryAjax.TestCustomValodation" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
function validate() {
var number1 = $("#<%=txtNumber1.ClientID %>").val();
var number2 = $("#<%=txtNumber2.ClientID %>").val();
var result = false;
$.ajax({
type: "POST",
url: 'AjaxSrv.asmx/ValidateIt',
data: '{"number1":' + number1 + ',"number2":' + number2 + '}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success:
function(msg) {
if (msg.d) {
result = true;
alert('بسیار خوب');
}
else {
result = false;
alert('دوباره سعی کنید');
}
},
error:
function(XMLHttpRequest, textStatus, errorThrown) {
result = false;
alert("خطایی رخ داده است");
}
});
//debugger;
return result;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
number 1 :
<asp:TextBox runat="server" ID="txtNumber1" />
<br />
number 2 :
<asp:TextBox runat="server" ID="txtNumber2" />
<br />
<asp:Button ID="btnSubmit" Text="Submit" UseSubmitBehavior="false" runat="server"
OnClientClick="if(!validate()){ return false;}" OnClick="btnSubmitClick" />
</div>
</form>
</body>
</html>
این مثال یک نوع اعتبار سنجی سفارشی را در حین submit با استفاده از وب سرویس زیر انجام میدهد (حاصلضرب دو عدد دریافتی را بررسی میکند که باید مساوی 10 باشند. البته هدف از این مثال ساده، آشنایی با نحوهی انجام این نوع عملیات است که میتواند شامل کار با دیتابیس و غیره هم باشد. و گرنه بدیهی است این بررسی را با دو سطر کد جاوا اسکریپتی نیز میشد انجام داد):
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Web.Script.Services;
namespace TestJQueryAjax
{
/// <summary>
/// Summary description for AjaxSrv
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.ComponentModel.ToolboxItem(false)]
[ScriptService]
public class AjaxSrv : System.Web.Services.WebService
{
[WebMethod(EnableSession = true)]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public bool ValidateIt(int number1, int number2)
{
return number1 * number2 == 10;
}
}
}
راه حل چیست؟
راه حلهای فضایی بسیاری را در وب در این مورد میتوان پیدا کرد؛ اما راه حل استاندارد آن در این حالت ویژه، استفاده از Ajax در حالت غیرهمزمان است. یعنی این فریم ورک Ajax را وادار کنیم که تا پایان عملیات مورد نظر، منتظر بماند و سپس فرم را ارسال کند. برای این منظور تنها کافی است یک سطر زیر را پیش از فراخوانی تابع Ajax ، اضافه و فراخوانی نمائیم:
$.ajaxSetup({async: false}) ;
UseSubmitBehavior دکمه ما را به شکل زیر رندر میکند (دکمه به یک button معمولی (بجای حالت submit) تبدیل شده و سپس یک doPostBack را اضافه خواهد کرد):
<input id="btnSubmit" type="button" onclick="if(!validate()){ return false;};__doPostBack('btnSubmit','')" value="Submit" name="btnSubmit"/>
درختهای دودویی Binary Trees
نحوه پیمایش درخت دودویی
این درخت پیمایشهای گوناگونی دارد ولی سه تای آنها اصلیتر و مهمتر هستند:
In-order یا LVR (چپ، ریشه، راست): در این حالت ابتدا گرههای سمت چپ ملاقات (چاپ) میشوند و سپس ریشه و بعد گرههای سمت راست.
Pre-Order یا VLR (ریشه، چپ، راست) : در این حالت ابتدا گرههای ریشه ملاقات میشوند. بعد گرههای سمت چپ و بعد گرههای سمت راست.
Post_Order یا LRV (چپ، راست، ریشه ): در این حالت ابتدا گرههای سمت چپ، بعد راست و نهایتا ریشه، ملاقات میشوند.
حتما متوجه شدهاید که منظور از v در اینجا ریشه است و با تغییر و جابجایی مکان این سه حرف RLV میتوانید به ترکیبهای مختلفی از پیمایش دست پیدا کنید.
اجازه دهید روی شکل بالا پیمایش LVR را انجام دهیم: همانطور که گفتیم باید اول گرههای سمت چپ را خواند، پس از 17 به سمت 9 حرکت میکنیم و میبینیم که 9، خود والد است. پس به سمت 6 حرکت میکنیم و میبینیم که فرزند چپی ندارد؛ پس خود 6 را ملاقات میکنیم، سپس فرزند راست را هم بررسی میکنیم که فرزند راستی ندارد پس کار ما اینجا تمام است و به سمت بالا حرکت میکنیم. 9 را ملاقات میکنیم و بعد عدد 5 را و به 17 بر میگردیم. 17 را ملاقات کرده و سپس به سمت 15 میرویم و الی آخر ...
6-9-5-17-8-15-10
VLR:
17-9-6-5-15-8-10
LRV:
6-5-9-8-10-15-17
نحوه پیاده سازی درخت دودویی:
public class BinaryTree<T> { /// <summary>مقدار داخل گره</summary> public T Value { get; set; } /// <summary>فرزند چپ گره</summary> public BinaryTree<T> LeftChild { get; private set; } /// <summary>فرزند راست گره</summary> public BinaryTree<T> RightChild { get; private set; } /// <summary>سازنده کلاس</summary> /// <param name="value">مقدار گره</param> /// <param name="leftChild">فرزند چپ</param> /// <param name="rightChild">فرزند راست /// </param> public BinaryTree(T value, BinaryTree<T> leftChild, BinaryTree<T> rightChild) { this.Value = value; this.LeftChild = leftChild; this.RightChild = rightChild; } /// <summary>سازنده بدون فرزند /// </summary> /// <param name="value">the value of the tree node</param> public BinaryTree(T value) : this(value, null, null) { } /// <summary>LVR پیمایش</summary> public void PrintInOrder() { // ملاقات فرزندان زیر درخت چپ if (this.LeftChild != null) { this.LeftChild.PrintInOrder(); } // ملاقات خود ریشه Console.Write(this.Value + " "); // ملاقات فرزندان زیر درخت راست if (this.RightChild != null) { this.RightChild.PrintInOrder(); } } } /// <summary> /// نحوه استفاده از کلاس بالا /// </summary> public class BinaryTreeExample { static void Main() { BinaryTree<int> binaryTree = new BinaryTree<int>(14, new BinaryTree<int>(19, new BinaryTree<int>(23), new BinaryTree<int>(6, new BinaryTree<int>(10), new BinaryTree<int>(21))), new BinaryTree<int>(15, new BinaryTree<int>(3), null)); binaryTree.PrintInOrder(); Console.WriteLine(); // خروجی // 23 19 10 6 21 14 3 15 } }
تفاوتی که این کد با کد قبلی که برای یک درخت معمولی داشتیم، در این است که قبلا لیستی از فرزندان را داشتیم که با خاصیت Children شناخته میشدند، ولی در اینجا در نهایت دو فرزند چپ و راست برای هر گره وجود دارند. برای جست و جو هم از الگوریتم In_Order استفاده کردیم که از همان الگوریتم DFS آمدهاست. در آنجا هم ابتدا گرههای سمت چپ به صورت بازگشتی صدا زده میشدند. بعد خود گره و سپس گرههای سمت راست به صورت بازگشتی صدا زده میشدند.
برای باقی روشهای پیمایش تنها نیاز است که این سه خط را جابجا کنید:
// ملاقات فرزندان زیر درخت چپ if (this.LeftChild != null) { this.LeftChild.PrintInOrder(); } // ملاقات خود ریشه Console.Write(this.Value + " "); // ملاقات فرزندان زیر درخت راست if (this.RightChild != null) { this.RightChild.PrintInOrder(); }
درخت دودویی مرتب شده Ordered Binary Search Tree
تا این لحظه ما با ساخت درختهای پایه آشنا شدیم: درخت عادی یا کلاسیک و درخت دو دویی. ولی در بیشتر موارد در پروژههای بزرگ از اینها استفاده نمیکنیم چرا که استفاده از آنها در پروژههای بزرگ بسیار مشکل است و باید به جای آنها از ساختارهای متنوع دیگری از قبیل درختهای مرتب شده، کم عمق و متوازن و کامل و پر و .. استفاده کرد. پس اجازه دهید که مهمترین درختهایی را که در برنامه نویسی استفاده میشوند، بررسی کنیم.
همان طور که میدانید برای مقایسه اعداد ما از علامتهای <>= استفاده میکنیم و اعداد صحیح بهترین اعداد برای مقایسه هستند. در درختهای جست و جوی دو دویی یک خصوصیت اضافه به اسم کلید هویت یکتا Unique identification Key داریم که یک کلید قابل مقایسه است. در تصویر زیر ما دو گره با مقدارهای متفاوتی داریم که با مقایسهی آنان میتوانیم کوچک و بزرگ بودن یک گره را محاسبه کنیم. ولی به این نکته دقت داشته باشید که این اعداد داخل دایرهها، دیگر برای ما حکم مقدار ندارند و کلیدهای یکتا و شاخص هر گره محسوب میشوند.
خلاصهی صحبتهای بالا: در هر درخت دودویی مرتب شده، گرههای بزرگتر در زیر درخت راست قرار دارند و گرههای کوچکتر در زیر درخت چپ قرار دارند که این کوچکی و بزرگی بر اساس یک کلید یکتا که قابل مقایسه است استفاده میشود.
این درخت دو دویی مرتب شده در جست و جو به ما کمک فراوانی میکند و از آنجا که میدانیم زیر درختهای چپ مقدار کمتری دارند و زیر درختهای راست مقدار بیشتر، عمل جست و جو، مقایسههای کمتری خواهد داشت، چرا که هر بار مقایسه یک زیر درخت کنار گذاشته میشود.
برای مثال فکر کنید میخواهید عدد 13 را در درخت بالا پیدا کنید. ابتدا گره والد 19 را مقایسه کرده و از آنجا که 19 بزرگتر از 13 است میدانیم که 13 را در زیر درخت راست پیدا نمیکنیم. پس زیر درخت چپ را مقایسه میکنیم (بنابراین به راحتی یک زیر درخت از مقایسه و عمل جست و جو کنار گذاشته شد). سپس گره 11 را مقایسه میکنیم و از آنجا که 11 کوچکتر از 13 هست، زیر درخت سمت راست را ادامه میدهیم و چون 16 بزرگتر از 13 هست، زیر درخت سمت چپ را در ادامه مقایسه میکنیم که به 13 رسیدیم.
مقایسه گرههایی که برای جست و جو انجام دادیم:
19-11-16-13
درخت هر چه بزرگتر باشد این روش کارآیی خود را بیشتر نشان میدهد.
در قسمت بعدی به پیاده سازی کد این درخت به همراه متدهای افزودن و جست و جو و حذف میپردازیم.
با استفاده از پارامترهای آبشاری میتوان شیءای را در اختیار تمام کامپوننتهای قرار گرفته شدهی در سلسله مراتب آنها قرار داد. برای مثال اگر در فایل Client\Shared\MainLayout.razor، جائیکه سایر کامپوننتها قرار است رندر شوند را توسط یک کامپوننت سطح بالا محصور کنیم:
<Alert> @Body </Alert>
بنابراین طراحی سادهی کامپوننت Alert ای (Client\Shared\Alert.razor) که تامین کنندهی یک پارامتر آبشاری سراسری است، به صورت زیر میتواند باشد:
<CascadingValue Value=this> @if(IsVisible) { <div class="alert @Css" role="alert"> @Message <button type="button" class="close" data-dismiss="alert" aria-label="Close" @onclick="HideAlert"> <span aria-hidden="true">×</span> </button> </div> } @ChildContent </CascadingValue> @code { [Parameter] public RenderFragment ChildContent { get; set; } private bool IsVisible; private string Message; private string Css = "alert-primary"; public void ShowAlert(string message, AlertType alertType) { IsVisible = true; Message = message; Css = alertType switch { AlertType.Success => "alert-success", AlertType.Info => "alert-primary", AlertType.Danger => "alert-danger", AlertType.Warning => "alert-warning", _ => "alert-primary" }; StateHasChanged(); } public void HideAlert() { IsVisible = false; } }
namespace BlazorWasmAlert.Client.Shared { public enum AlertType { Success, Info, Danger, Warning } }
الف) وجود یک CascadingValue که اینبار Value آن به خود کامپوننت اشاره میکند (Value=this). یعنی پارامتر آبشاری که در اختیار سایر کامپوننتهای محصور شدهی توسط آن ارسال میشود، دقیقا وهلهای از کامپوننت Alert است که توسط آن میتوان برای مثال، متد عمومی ShowAlert آنرا فراخوانی کرد:
<CascadingValue Value=this>
پس از درج این کامپوننت در فایل layout، روش استفادهی از آن برای مثال در کامپوننت Index به صورت زیر است:
@page "/" <h1>Hello, world!</h1> <button class="btn btn-primary" @onclick="ShowAlert">Show Alert!</button> @code { [CascadingParameter] public Alert Alert { get; set; } private void ShowAlert() { Alert.ShowAlert("This is a test!", AlertType.Info); } }
پ.ن.
در طراحی Blazor، از طراحی React الهام گرفته شدهاست و CascadingValue آن دقیقا معادل Context API جدید React است.
پیشنیازها
برای دنبال کردن این مثال فرض بر این است که NET Core 2.0 SDK. و همچنین Angular CLI را نیز پیشتر نصب کردهاید. مابقی بحث توسط خط فرمان و ابزارهای dotnet cli و angular cli ادامه داده خواهند شد و الزامی به نصب هیچگونه IDE نیست و این مثال تنها توسط VSCode پیگیری شدهاست.
تدارک ساختار ابتدایی مثال جاری
ساخت برنامهی وب، توسط dotnet cli
ابتدا یک پوشهی جدید را به نام SignalRCore2Sample ایجاد میکنیم. سپس داخل این پوشه، پوشهی دیگری را به نام SignalRCore2WebApp ایجاد خواهیم کرد (تصویر فوق). از طریق خط فرمان به این پوشه وارد شده (در ویندوز، در نوار آدرس، دستور cmd.exe را تایپ و enter کنید) و سپس فرمان ذیل را صادر میکنیم:
dotnet new mvc
ساخت برنامهی کلاینت، توسط angular cli
سپس از طریق خط فرمان به پوشهی SignalRCore2Sample بازگشته و دستور ذیل را صادر میکنیم:
ng new SignalRCore2Client
اکنون که در پوشهی ریشهی SignalRCore2Sample قرار داریم، اگر در خط فرمان، دستور . code را صادر کنیم، VSCode هر دو پوشهی وب و client را با هم در اختیار ما قرار میدهد:
تکمیل پیشنیازهای برنامهی وب
پس از ایجاد ساختار اولیهی برنامههای وب ASP.NET Core و کلاینت Angular، اکنون نیاز است وابستگی جدید AspNetCore.SignalR را به آن معرفی کنیم. به همین جهت به فایل SignalRCore2WebApp.csproj مراجعه کرده و تغییرات ذیل را به آن اعمال میکنیم:
<Project Sdk="Microsoft.NET.Sdk.Web"> <PropertyGroup> <TargetFramework>netcoreapp2.0</TargetFramework> </PropertyGroup> <ItemGroup> <PackageReference Include="Microsoft.AspNetCore.All" Version="2.0.0" /> <PackageReference Include="Microsoft.AspNetCore.SignalR" Version="1.0.0-alpha1-final" /> </ItemGroup> <ItemGroup> <DotNetCliToolReference Include="Microsoft.VisualStudio.Web.CodeGeneration.Tools" Version="2.0.0" /> <DotNetCliToolReference Include="Microsoft.DotNet.Watcher.Tools" Version="2.0.0" /> </ItemGroup> </Project>
پس از این تغییرات، دستور ذیل را در خط فرمان صادر میکنیم تا وابستگیهای پروژه نصب شوند:
dotnet restore
یک نکته: نگارش فعلی افزونهی #C مخصوص VSCode، با تغییر فایل csproj و restore وابستگیهای آن نیاز دارد یکبار آنرا بسته و سپس مجددا اجرا کنید، تا اطلاعات intellisense خود را به روز رسانی کند. بنابراین اگر VSCode بلافاصله کلاسهای مرتبط با بستههای جدید را تشخیص نمیدهد، علت صرفا این موضوع است.
پس از بازیابی وابستگیها، به ریشهی پروژهی برنامهی وب وارد شده و دستور ذیل را صادر کنید:
dotnet watch run
تکمیل برنامهی وب جهت ارسال پیامهایی به کلاینتهای متصل به آن
پس از افزودن وابستگیهای مورد نیاز، بازیابی و build برنامه، اکنون نوبت به تعریف یک Hub است، تا از طریق آن بتوان پیامهایی را به کلاینتهای متصل ارسال کرد. به همین جهت یک پوشهی جدید را به نام Hubs به پروژهی وب افزوده و سپس کلاس جدید MessageHub را به صورت ذیل به آن اضافه میکنیم:
using System.Threading.Tasks; using Microsoft.AspNetCore.SignalR; namespace SignalRCore2WebApp.Hubs { public class MessageHub : Hub { public Task Send(string message) { return Clients.All.InvokeAsync("Send", message); } } }
پس از تعریف این Hub، نیاز است به کلاس Startup مراجعه کرده و دو تغییر ذیل را اعمال کنیم:
الف) ثبت و معرفی سرویس SignalR
ابتدا باید SignalR را فعالسازی کرد. به همین جهت نیاز است سرویسهای آنرا به صورت یکجا توسط متد الحاقی AddSignalR در متد ConfigureServices به نحو ذیل معرفی کرد:
public void ConfigureServices(IServiceCollection services) { services.AddSignalR(); services.AddMvc(); }
ب) ثبت مسیریابی دسترسی به Hub
پس از تعریف Hub، مرحلهی بعدی، مشخص سازی نحوهی دسترسی به آن است. به همین جهت در متد Configure، به نحو ذیل Hub را معرفی کرده و سپس یک path را برای آن مشخص میکنیم:
public void Configure(IApplicationBuilder app, IHostingEnvironment env) { app.UseSignalR(routes => { routes.MapHub<MessageHub>(path: "message"); });
http://localhost:5000/message
انتشار پیامهایی به تمام کاربران متصل به برنامه
آدرس فوق به تنهایی کار خاصی را انجام نمیدهد. از آن جهت اتصال کلاینتهای برنامه استفاده میشود و این کلاینتها پیامهای رسیدهی از طرف برنامه را از این آدرس دریافت خواهند کرد. بنابراین مرحلهی بعد، ارسال تعدادی پیام به سمت کلاینتها است. برای این منظور به HomeController برنامهی وب مراجعه کرده و آنرا به نحو ذیل تغییر میدهیم:
using System.Threading.Tasks; using Microsoft.AspNetCore.Mvc; using Microsoft.AspNetCore.SignalR; using SignalRCore2WebApp.Hubs; namespace SignalRCore2WebApp.Controllers { public class HomeController : Controller { private readonly IHubContext<MessageHub> _messageHubContext; public HomeController(IHubContext<MessageHub> messageHubContext) { _messageHubContext = messageHubContext; } public IActionResult Index() { return View(); // show the view } [HttpPost] public async Task<IActionResult> Index(string message) { await _messageHubContext.Clients.All.InvokeAsync("Send", message); return View(); } } }
در این مثال ابتدا View ذیل نمایش داده میشود:
@{ ViewData["Title"] = "Home Page"; } <form method="post" asp-action="Index" asp-controller="Home" role="form"> <div class="form-group"> <label label-for="message">Message: </label> <input id="message" name="message" class="form-control"/> </div> <button class="btn btn-primary" type="submit">Send</button> </form>
تکمیل برنامهی کلاینت Angular جهت نمایش پیامهای رسیدهی از طرف سرور
تا اینجا ساختار ابتدایی برنامهی Angular را توسط Angular CLI ایجاد کردیم. اکنون نیاز است وابستگی سمت کلاینت SignalR Core را نصب کنیم. به همین جهت از طریق خط فرمان به پوشهی SignalRCore2Client وارد شده و دستور ذیل را صادر کنید:
npm install @aspnet/signalr-client --save
کلاینت رسمی signalr، هم جاوا اسکریپتی است و هم تایپاسکریپتی. به همین جهت به سادگی توسط یک برنامهی تایپ اسکریپتی Angular قابل استفاده است. کلاسهای آنرا در مسیر node_modules\@aspnet\signalr-client\dist\src میتوانید مشاهده کنید.
در ابتدا، فایل app.component.ts را به نحو ذیل تغییر میدهیم:
import { Component, OnInit } from "@angular/core"; import { HubConnection } from "@aspnet/signalr-client"; @Component({ selector: "app-root", templateUrl: "./app.component.html", styleUrls: ["./app.component.css"] }) export class AppComponent implements OnInit { hubPath = "http://localhost:5000/message"; messages: string[] = []; ngOnInit(): void { const connection = new HubConnection(this.hubPath); connection.on("send", data => { this.messages.push(data); }); connection.start().then(() => { // connection.invoke("send", "Hello"); console.log("connected."); }); } }
آرایهی messages را به نحو ذیل توسط یک حلقه در قالب این کامپوننت نمایش خواهیم داد:
<div> <h1> The messages from the server: </h1> <ul> <li *ngFor="let message of messages"> {{message}} </li> </ul> </div>
ng serve -o
همانطور که مشاهده میکنید، پیام خطای ذیل را صادر کردهاست:
Failed to load http://localhost:5000/message: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:4200' is therefore not allowed access.
برای این منظور به فایل آغازین برنامهی وب مراجعه کرده و سرویسهای AddCors را به مجموعهی سرویسهای برنامه اضافه میکنیم:
public void ConfigureServices(IServiceCollection services) { services.AddSignalR(); services.AddCors(options => { options.AddPolicy("CorsPolicy", builder => builder .AllowAnyOrigin() .AllowAnyMethod() .AllowAnyHeader() .AllowCredentials()); }); services.AddMvc(); }
public void Configure(IApplicationBuilder app, IHostingEnvironment env) { app.UseCors(policyName: "CorsPolicy");
در آخر برای آزمایش برنامه، به آدرس http://localhost:5000 یا همان برنامهی وب، مراجعه کرده و پیامی را ارسال کنید. بلافاصله مشاهده خواهید کرد که این پیام توسط کلاینت Angular دریافت شده و نمایش داده میشود:
کدهای کامل این مثال را از اینجا میتوانید دریافت کنید: SignalRCore2Sample.zip
برای اجرا آن، ابتدا به پوشهی SignalRCore2WebApp مراجعه کرده و دو فایل bat آنرا به ترتیب اجرا کنید. اولی وابستگیهای برنامه را بازیابی میکند و دومی برنامه را بر روی پورت 5000 ارائه میدهد.
سپس به پوشهی SignalRCore2Client مراجعه کرده و در آنجا نیز دو فایل bat ابتدایی آنرا به ترتیب اجرا کنید. اولی وابستگیهای برنامهی Angular را بازیابی میکند و دومی برنامهی Angular را بر روی پورت 4200 اجرا خواهد کرد.
نگاهی به SignalR Clients
مصرف کنندگان یک Hub میتوانند انواع و اقسام برنامههای کلاینت مانند jQuery Clients و یا حتی یک برنامه کنسول ساده باشند و همچنین Hubهای دیگر نیز قابلیت استفاده از این امکانات Hubهای موجود را دارند. تیم SignalR امکان استفاده از Hubهای آنرا در برنامههای دات نت 4 به بعد، برنامههای WinRT، ویندوز فون 8، سیلورلایت 5، jQuery و همچنین برنامههای CPP نیز مهیا کردهاند. به علاوه گروههای مختلف نیز با توجه به سورس باز بودن این مجموعه، کلاینتهای iOS Native، iOS via Mono و Android via Mono را نیز به این لیست اضافه کردهاند.
بررسی کلاینتهای jQuery
با توجه به پروتکل مبتنی بر JSON سیگنالآر، استفاده از آن در کتابخانههای جاوا اسکریپتی همانند jQuery نیز به سادگی مهیا است. برای نصب آن نیاز است در کنسول پاور شل نوگت، دستور زیر را صادر کنید:
PM> Install-Package Microsoft.AspNet.SignalR.JS
با استفاده از افزونه SignalR jQuery، به دو طریق میتوان به یک Hub اتصال برقرار کرد:
الف) استفاده از فایل proxy تولید شده آن (این فایل، در زمان اجرای برنامه تولید میشود و یا امکان استفاده از آن به کمک ابزارهای کمکی نیز وجود دارد)
نمونهای از آنرا در قسمت قبل ملاحظه کردید؛ همان فایل تولید شده در مسیر /signalr/hubs برنامه. به نوعی به آن Service contract نیز گفته میشود (ارائه متادیتا و قراردادهای کار با یک سرویس Hub). این فایل همانطور که عنوان شد به صورت پویا در زمان اجرای برنامه ایجاد میشود.
امکان تولید آن توسط برنامه کمکی signalr.exe نیز وجود دارد؛ برای دریافت آن میتوان از طریق NuGet اقدام کرد (بسته Microsoft.AspNet.SignalR.Utils) که نهایتا در پوشه packages قرار خواهد گرفت. نحوه استفاده از آن نیز به صورت زیر است:
Signalr.exe ghp http://localhost/
ب) بدون استفاده از فایل proxy و به کمک روش late binding (انقیاد دیر هنگام)
برای کار با یک Hub از طریق jQuery مراحل ذیل باید طی شوند:
1) ارجاعی به Hub باید مشخص شود.
2) روالهای رخدادگردان تنظیم گردند.
3) اتصال به Hub برقرار گردد.
4) متدی فراخوانی شود.
در اینجا باید دقت داشت که امکانات Hub به صورت خواص
$.connection
$.connection.chatHub
خوب، تا اینجا فرض بر این است که یک پروژه خالی ASP.NET را آغاز و سپس فرمان نصب Microsoft.AspNet.SignalR.JS را نیز همانطور که عنوان شد، صادر کردهاید. در ادامه یک فایل ساده html را به نام chat.htm، به این پروژه جدید اضافه کنید (برای استفاده از کتابخانه جاوا اسکریپتی SignalR الزامی به استفاده از صفحات کامل پروژههای وب نیست).
<!DOCTYPE> <html> <head> <title></title> <script src="Scripts/jquery-1.6.4.min.js" type="text/javascript"></script> <script src="Scripts/jquery.signalR-1.0.1.min.js" type="text/javascript"></script> <script src="http://localhost:1072/signalr/hubs" type="text/javascript"></script> </head> <body> <div> <input id="txtMsg" type="text" /><input id="send" type="button" value="send msg" /> <ul id="messages"> </ul> </div> <script type="text/javascript"> $(function () { var chat; $.connection.hub.logging = true; //اطلاعات بیشتری را در جاوا اسکریپت کنسول مرورگر لاگ میکند chat = $.connection.chat; //این نام مستعار پیشتر توسط ویژگی نام هاب تنظیم شده است chat.client.hello = function (message) { //متدی که در اینجا تعریف شده دقیقا مطابق نام متد پویایی است که در هاب تعریف شده است //به این ترتیب سرور میتواند کلاینت را فراخوانی کند $("#messages").append("<li>" + message + "</li>"); }; $.connection.hub.start(/*{ transport: 'longPolling' }*/); // فاز اولیه ارتباط را آغاز میکند $("#send").click(function () { // Hub's `SendMessage` should be camel case here chat.server.sendMessage($("#txtMsg").val()); }); }); </script> </body> </html>
توضیحات:
همانطور که ملاحظه میکنید ابتدا ارجاعاتی به jquery و jquery.signalR-1.0.1.min.js اضافه شدهاند. سپس نیاز است مسیر دقیق فایل پروکسی هاب خود را نیز مشخص کنیم. اینکار با تعریف مسیر signalr/hubs انجام شده است.
<script src="http://localhost:1072/signalr/hubs" type="text/javascript"></script>
سپس ارجاعی به هاب تعریف شده، تعریف گردیده است. اگر از قسمت قبل به خاطر داشته باشید، توسط ویژگی HubName، نام chat را برگزیدیم. بنابراین connection.chat ذکر شده دقیقا به این هاب اشاره میکند.
سپس سطر chat.client.hello مقدار دهی شده است. متد hello، متدی dynamic و تعریف شده در سمت هاب برنامه است. به این ترتیب میتوان به پیامهای رسیده از طرف سرور گوش فرا داد. در اینجا، این پیامها، به li ایی با id مساوی messages اضافه میشوند.
سپس توسط فراخوانی متد connection.hub.start، فاز negotiation شروع میشود. در اینجا حتی میتوان نوع transport را نیز صریحا انتخاب کرد که نمونهای از آن را به صورت کامنت شده جهت آشنایی با نحوه تعریف آن مشاهده میکنید. مقادیر قابل استفاده در آن به شرح زیر هستند:
- webSockets - forverFrame - serverSentEvents - longPolling
اکنون به صورت جداگانه یکبار برنامه hub را در مرورگر باز کنید. سپس بر روی فایل chat.htm کلیک راست کرده و گزینه مشاهده آن را در مرورگر نیز انتخاب نمائید (گزینه View in browser منوی کلیک راست).
خوب! پروژه کار نمیکند! برای اینکه مشکلات را بهتر بتوانید مشاهده کنید نیاز است به JavaScript Console مرورگر خود مراجعه نمائید. برای مثال در مرورگر کروم دکمه F12 را فشرده و برگه Console آنرا باز کنید. در اینجا اعلام میکند که فاز negotiation قابل انجام نیست؛ چون مسیر پیش فرضی را که انتخاب کرده است، همین مسیر پروژه دومی است که اضافه کردهایم (کلاینت ما در پروژه دوم قرار دارد و نه در همان پروژه اول هاب).
برای اینکه مسیر دقیق hub را در این حالت مشخص کنیم، سطر زیر را به ابتدای کدهای جاوا اسکریپتی فوق اضافه نمائید:
$.connection.hub.url = 'http://localhost:1072/signalr'; //چون در یک پروژه دیگر قرار داریم
using System; using System.Web; using System.Web.Routing; using Microsoft.AspNet.SignalR; namespace SignalR02 { public class Global : HttpApplication { protected void Application_Start(object sender, EventArgs e) { // Register the default hubs route: ~/signalr RouteTable.Routes.MapHubs(new HubConfiguration { EnableCrossDomain = true }); } } }
SignalR: Auto detected cross domain url. jquery.signalR-1.0.1.min.js:10 SignalR: Negotiating with 'http://localhost:1072/signalr/negotiate'. jquery.signalR-1.0.1.min.js:10 SignalR: SignalR: Initializing long polling connection with server. jquery.signalR-1.0.1.min.js:10 SignalR: Attempting to connect to 'http://localhost:1072/signalr/connect?transport=longPolling&connectionToken…NRh72omzsPkKqhKw2&connectionData=%5B%7B%22name%22%3A%22chat%22%7D%5D&tid=3' using longPolling. jquery.signalR-1.0.1.min.js:10 SignalR: Longpolling connected jquery.signalR-1.0.1.min.js:10
در برگه شبکه، مطابق شکل فوق، امکان آنالیز اطلاعات رد و بدل شده مهیا است. برای مثال در حالتیکه سرور پیام دریافتی را به کلیه کلاینتها ارسال میکند، نام متد و نام هاب و سایر پارامترها در اطلاعات به فرمت JSON آن به خوبی قابل مشاهده هستند.
یک نکته:
اگر از ویندوز 8 (یعنی IIS8) و VS 2012 استفاده میکنید، برای استفاده از حالت Web socket، ابتدا فایل وب کانفیگ برنامه را باز کرده و در قسمت httpRunTime، مقدار ویژگی targetFramework را بر روی 4.5 تنظیم کنید. اینبار اگر مراحل negotiation را بررسی کنید در همان مرحله اول برقراری اتصال، از روش Web socket استفاده گردیده است.
تمرین 1
به پروژه ساده و ابتدایی فوق یک تکست باکس دیگر به نام Room را اضافه کنید؛ به همراه دکمه join. سپس نکات قسمت قبل را در مورد الحاق به یک گروه و سپس ارسال پیام به اعضای گروه را پیاده سازی نمائید. (تمام نکات آن با مطلب فوق پوشش داده شده است و در اینجا باید صرفا فراخوانی متدهای عمومی دیگری در سمت هاب، صورت گیرد)
تمرین 2
در انتهای قسمت دوم به نحوه ارسال پیام از یک هاب به هابی دیگر اشاره شد. این MonitorHub را ایجاد کرده و همچنین یک کلاینت جاوا اسکریپتی را نیز برای آن تهیه کنید تا بتوان اتصال و قطع اتصال کلیه کاربران سیستم را مانیتور و مشاهده کرد.
پیاده سازی کلاینت jQuery بدون استفاده از کلاس Proxy
در مثال قبل، از پروکسی پویای مهیای در آدرس signalr/hubs استفاده کردیم. در اینجا قصد داریم، بدون استفاده از آن نیز کار برپایی کلاینت را بررسی کنیم.
بنابراین یک فایل جدید html را مثلا به نام chat_np.html به پروژه دوم برنامه اضافه کنید. سپس محتویات آنرا به نحو زیر تغییر دهید:
<!DOCTYPE> <html> <head> <title></title> <script src="Scripts/jquery-1.6.4.min.js" type="text/javascript"></script> <script src="Scripts/jquery.signalR-1.0.1.min.js" type="text/javascript"></script> </head> <body> <div> <input id="txtMsg" type="text" /><input id="send" type="button" value="send msg" /> <ul id="messages"> </ul> </div> <script type="text/javascript"> $(function () { $.connection.hub.logging = true; //اطلاعات بیشتری را در جاوا اسکریپت کنسول مرورگر لاگ میکند var connection = $.hubConnection(); connection.url = 'http://localhost:1072/signalr'; //چون در یک پروژه دیگر قرار داریم var proxy = connection.createHubProxy('chat'); proxy.on('hello', function (message) { //متدی که در اینجا تعریف شده دقیقا مطابق نام متد پویایی است که در هاب تعریف شده است //به این ترتیب سرور میتواند کلاینت را فراخوانی کند $("#messages").append("<li>" + message + "</li>"); }); $("#send").click(function () { // Hub's `SendMessage` should be camel case here proxy.invoke('sendMessage', $("#txtMsg").val()); }); connection.start(); }); </script> </body> </html>
کلاینتهای دات نتی SignalR
تا کنون Solution ما حاوی یک پروژه Hub و یک پروژه وب کلاینت جیکوئری است. به همین Solution، یک پروژه کلاینت کنسول ویندوزی را نیز اضافه کنید.
سپس در خط فرمان پاور شل نوگت دستور زیر را صادر نمائید تا فایلهای مورد نیاز به پروژه کنسول اضافه شوند:
PM> Install-Package Microsoft.AspNet.SignalR.Client
پس از نصب آن اگر به پوشه packages مراجعه کنید، نگارشهای مختلف آنرا مخصوص سیلورلایت، دات نتهای 4 و 4.5، WinRT و ویندوز فون8 نیز میتوانید در پوشه Microsoft.AspNet.SignalR.Client ملاحظه نمائید. البته در ابتدای نصب، انتخاب نگارش مناسب، بر اساس نوع پروژه جاری به صورت خودکار صورت میگیرد.
مدل برنامه نویسی آن نیز بسیار شبیه است به حالت عدم استفاده از پروکسی در حین استفاده از jQuery که در قسمت قبل بررسی گردید و شامل این مراحل است:
1) یک وهله از شیء HubConnection را ایجاد کنید.
2) پروکسی مورد نیاز را جهت اتصال به Hub از طریق متد CreateProxy تهیه کنید.
3) رویدادگردانها را همانند نمونه کدهای جاوا اسکریپتی قسمت قبل، توسط متد On تعریف کنید.
4) به کمک متد Start، اتصال را آغاز نمائید.
5) متدها را به کمک متد Invoke فراخوانی نمائید.
using System; using Microsoft.AspNet.SignalR.Client.Hubs; namespace SignalR02.WinClient { class Program { static void Main(string[] args) { var hubConnection = new HubConnection(url: "http://localhost:1072/signalr"); var chat = hubConnection.CreateHubProxy(hubName: "chat"); chat.On<string>("hello", msg => { Console.WriteLine(msg); }); hubConnection.Start().Wait(); chat.Invoke<string>("sendMessage", "Hello!"); Console.WriteLine("Press a key to terminate the client..."); Console.Read(); } } }
نکته مهم
کلیه فراخوانیهایی که در اینجا ملاحظه میکنید غیرهمزمان هستند.
به همین جهت پس از متد Start، متد Wait ذکر شدهاست تا در این برنامه ساده، پس از برقراری کامل اتصال، کار invoke صورت گیرد و یا زمانیکه callback تعریف شده توسط متد chat.On فراخوانی میشود نیز این فراخوانی غیرهمزمان است و خصوصا اگر نیاز است رابط کاربری برنامه را در این بین به روز کنید باید به نکات به روز رسانی رابط کاربری از طریق یک ترد دیگر دقت داشت.
- ViewUsers
- CreateUser
- EditUser
- DeleteUser
همانطور که مشاهده میکنید، المنتهایی در صفحه وجود دارند که کاربر X نباید آنها را مشاهده کند. از جمله دکمه حذف کاربر و دکمه ایجاد کاربر. برای مخفی کردن آنها چه راهحلی را میتوان ارائه داد؟ شاید بخواهید برای اینکار از ngIf* استفاده کنید. برای اینکار کافی است دست بکار شوید تا مشکلاتی را که در این روش به آنها بر میخورید، متوجه شوید. از جمله این مشکلات میتوان به پیچیدگی بسیار زیاد و وجود کدهای تکراری در هر کامپوننت اشاره کرد (در بهترین حالت هر کامپوننت باید سرویس حاوی دسترسیها را در خود تزریق کرده و با استفاده از توابعی، وجود یا عدم وجود دسترسی را بررسی کند).
راهحل بهتر، استفاده از یک Directive سفارشی است. همچنین ماژول Ng2Permission علاوه بر فراهم کردن Directive جهت مدیریت المنتهای روی صفحه، امکاناتی را جهت نگهداری و تعریف دسترسیهای جدید و همچنین محافظت از Routeها فراهم کرده است. این ماژول الهام گرفته از ماژول angular-permission میباشد.
کافی است با استفاده از دستور زیر این ماژول را نصب کنید:
npm install angular2-permission --save
بعد از نصب، ماژول Ng2Permission را در قسمت imports در ماژول اصلی برنامه، اضافه کنید.
import { Ng2Permission } from 'angular2-permission'; @NgModule({ imports: [ Ng2Permission ] })
مدیریت دسترسیها
توضیحات | امضاء |
تعریف دسترسیهای جدید | define(permissions: Array<string>): void |
افزودن دسترسی جدید | add(permission: string ) : void |
حذف دسترسی مشخص شده | remove(permission: string ) : void |
برسی اینکه دسترسی قبلا تعریف شده است؟ | hasDefined( permission : string ) : boolean |
برسی اینکه حداقل یکی از دسترسیهای ورودی قبلا تعریف شده است؟ | hasOneDefined(permissions: Array < string > ) : boolean |
حذف تمامی دسترسیها | clearStore( ) : void |
دریافت تمامی دسترسیهای تعریف شده | get store ( ) : Array < string> |
Emitter جهت تغییر در دسترسیها | get permissionStoreChangeEmitter ( ) : EventEmitter< an y> |
برای مثال جهت تعریف دسترسیهای جدید، کافی است سرویس PermissionService را تزریق کرده و با استفاده از متدهای define اقدام به اینکار کنید:
import { PermissionService } from 'angular2-permission'; @Component({ […] }) export class LoginComponent implements OnInit { constructor(private _permissionService: PermissionService) { this._permissionService.define(['ViewUsers', 'CreateUser', 'EditUser', 'DeleteUser']); } }
آنچه که واضح است، این است که لیست دسترسیها میتوانند از سمت سرور تامین شوند.
محافظت از مسیرهای تعریف شده
import { PermissionGuard, IPermissionGuardModel } from 'angular2-permission'; […] const routes: Routes = [ { path: 'login', component: LoginComponent, children: [] }, { path: 'users', component: UserListComponent, canActivate: [PermissionGuard], data: { Permission: { Only: ['ViewUsers'], RedirectTo: '403' } as IPermissionGuardModel }, children: [] }, { path: 'users/create', component: UserCreateComponent, canActivate: [PermissionGuard], data: { Permission: { Only: ['CreateUser'], RedirectTo: '403' } as IPermissionGuardModel }, children: [] }, { path: '403', component: AccessDeniedComponent, children: [] } ]; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AppRoutingModule { }
توضیحات | خصوصیت |
فقط دسترسیهای تعریف شده در این قسمت، امکان پیمایش به این مسیر را خواهند داشت. | Only |
تمامی دسترسیهای تعریف شده، به جز دسترسیهای تعریف شده در این قسمت، امکان پیمایش به این مسیر را خواهند داشت. | Except |
در صورتیکه تقاضای غیر مجازی جهت پیمایش به این مسیر صادر شد، کاربر را به این مسیر هدایت میکند. | RedirectTo |
{ path: 'users/create', component: UserCreateComponent, canActivate: [PermissionGuard], data: { Permission: { Only: ['Admin', 'CreateUser'], RedirectTo: '403' } as IPermissionGuardModel }, children: [] }
محافظت از المنتهای صفحه
توضیحات | Input type | Directive |
فقط دسترسیهای تعریف شده در این دایرکتیو امکان مشاهده (به صورت پیش فرض) المنت را دارند. | Arrayy<string> | hasPermission |
تمامی دسترسیهای موجود، به جز دسترسیهای تعریف شده در این دایرکتیو امکان مشاهده (به صورت پیش فرض) المنت را دارند. | Array<string> | exceptPermission |
استراتژی برخورد با المنت، هنگامیکه کاربر دسترسی به المنت دارد. | string | Function | onAuthorizedPermission |
استراتژی برخورد با المنت، هنگامیکه کاربر دسترسی به المنت را ندارد. | string | Function | onUnauthorizedPermission |
<button type="button" [hasPermission]="['DeleteUser']"> <span aria-hidden="true"></span> Delete </button>
در صورتیکه بیش از یک دسترسی مد نظر باشد، با کاما از هم جدا خواهند شد.
<button type="button" [hasPermission]="[ 'Admin', 'DeleteUser']"> <span aria-hidden="true"></span> Delete </button>
<button type="button" [exceptPermission]="['GeustUser']"> <span aria-hidden="true"></span> Delete </button>
<button type="button" [hasPermission]="['GeustUser']" onAuthorizedPermission="enable" onUnauthorizedPermission="disable"> <span aria-hidden="true"></span> Delete </button>
رفتار | مقدار |
حذف خصوصیت disabled از المنت | enable |
افزودن خصوصیت disabled به المنت | disable |
تنظیم استایل display به inherit | show |
تنظیم استایل display به none | hide |
@Component({ selector: 'app-user-list', templateUrl: './user-list.component.html', styleUrls: ['./user-list.component.css'] }) export class UserListComponent { constructor() { } OnAuthorizedPermission(element: ElementRef) { element.nativeElement.style.visibility ="inherit"; } OnUnauthorizedPermission(element: ElementRef) { element.nativeElement.style.visibility = "hidden"; } }
<button [hasPermission]="['CreateUser']" [onAuthorizedPermission]="OnAuthorizedPermission" [onUnauthorizedPermission]="OnUnauthorizedPermission"> <span aria-hidden="true"></span> Add New User </button>