Request URL: http://localhost:5000/api/ChangePassword Request Method: POST Status Code: 400 Bad Request Remote Address: [::1]:5000 Referrer Policy: no-referrer-when-downgrade
که طبق نکاتی که در لینک پایین تصویر وجود داشت :
<%@ 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>
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;
}
}
}
$.ajaxSetup({async: false}) ;
<input id="btnSubmit" type="button" onclick="if(!validate()){ return false;};__doPostBack('btnSubmit','')" value="Submit" name="btnSubmit"/>
یک نام کاربری انتخاب کرده و به مرحله بعد بروید.
نام کاربری را وارد کنید و نقش Global Administrator را به آن اختصاص دهید. مدیران کلی به یک آدرس ایمیل متناوب هم نیاز دارند. به مرحله بعد بروید.
بر روی Create کلیک کنید و کلمه‌ی عبور موقتی را کپی کنید. پس از اولین ورود باید کلمه عبور را تغییر دهید.
یک اپلیکیشن ASP.NET بسازید
گزینه Organizational Accounts را انتخاب کنید. نام دامنه خود را وارد کنید و سپس گزینه Single Sign On, Read directory data را انتخاب کنید. به مرحله بعد بروید.
نکته: در قسمت More Options می توانید قلمرو اپلیکیشن (Application ID URI) را تنظیم کنید. تنظیمات پیش فرض برای اکثر کاربران مناسب است اما در صورت لزوم می‌توانید آنها را ویرایش کنید، مثلا از طریق Windows Azure Portal دامنه‌های سفارشی خودتان را تنظیم کنید.
اگر گزینه Overwrite را انتخاب کنید اپلیکیشن جدیدی در Windows Azure برای شما ساخته خواهد شد. در غیر اینصورت فریم ورک سعی می‌کند اپلیکیشنی با شناسه یکسان پیدا کند (در پست متدهای احراز هویت در VS 2013 به تنظیمات این قسمت پرداخته شده).
اطلاعات مدیر کلی دامنه در Active Directory خود را وارد کنید (Credentials) و پروژه را با کلیک کردن بر روی Create Project بسازید.
با کلیدهای ترکیبی Ctrl + F5، اپلیکیشن را اجرا کنید. مرورگر شما باید یک اخطار SSL Certificate به شما بدهد. این بدین دلیل است که مدرک استفاده شده توسط IIS Express مورد اعتماد (trusted) نیست. این اخطار را بپذیرید و اجازه اجرا را به آن بدهید. پس از آنکه اپلیکیشن خود را روی Windows Azure منتشر کردید، این پیغام دیگر تولید نمی‌شود؛ چرا که Certificateهای استفاده شده trusted هستند.
با حساب کاربری سازمانی (organizational account) که ایجاد کرده‌اید، وارد شوید.
همانطور که مشاهده می‌کنید هم اکنون به سایت وارد شده اید.
اپلیکیشن را روی Windows Azure منتشر کنید. روی پروژه کلیک راست کرده و Publish را انتخاب کنید. در مرحله تنظیمات (Settings) مشاهده می‌کنید که احراز هویت حساب‌های سازمانی (organizational accounts) فعال است. همچنین سطح دسترسی به خواندن تنظیم شده است. در قسمت Database رشته اتصال دیتابیس را تنظیم کنید.
حال به وب سایت Windows Azure خود بروید و توسط حساب کاربری ایجاد شده وارد سایت شوید. در این مرحله دیگر نباید خطای امنیتی SSL را دریافت کنید.
[Authorize]
public async Task<ActionResult> UserProfile()
{
string tenantId = ClaimsPrincipal.Current.FindFirst(TenantSchema).Value;
// Get a token for calling the Windows Azure Active Directory Graph
AuthenticationContext authContext = new AuthenticationContext(String.Format(CultureInfo.InvariantCulture, LoginUrl, tenantId));
ClientCredential credential = new ClientCredential(AppPrincipalId, AppKey);
AuthenticationResult assertionCredential = authContext.AcquireToken(GraphUrl, credential);
string authHeader = assertionCredential.CreateAuthorizationHeader();
string requestUrl = String.Format(
CultureInfo.InvariantCulture,
GraphUserUrl,
HttpUtility.UrlEncode(tenantId),
HttpUtility.UrlEncode(User.Identity.Name));
HttpClient client = new HttpClient();
HttpRequestMessage request = new HttpRequestMessage(HttpMethod.Get, requestUrl);
request.Headers.TryAddWithoutValidation("Authorization", authHeader);
HttpResponseMessage response = await client.SendAsync(request);
string responseString = await response.Content.ReadAsStringAsync();
UserProfile profile = JsonConvert.DeserializeObject<UserProfile>(responseString);
return View(profile);
} کلیک کردن لینک UserProfile اطلاعات پروفایل کاربر جاری را نمایش می‌دهد.
که اینجا دکمه‌ها از سمت راست به چپ، عملیات افزودن، عدم انتخاب، ویرایش و حذف را انجام می‌دهند. کدهای HTML این پنل را در ادامه مشاهده می‌کنید:
<div id="CrudPanel" class="row treeview-panel" >
<div class="col-lg-7 pull-right">
<input type="text" id="txtLocationTitle" class="form-control" />
</div>
<div class="col-lg-5 pull-left" style="text-align: left;">
<button data-toggle="tooltip" data-placement="left" title="افزودن" id="btnAddLocation" class="btn btn-sm btn-success">
<i class="fa fa-plus"></i>
</button>
<button data-toggle="tooltip" data-placement="left" title="عدم انتخاب" id="btnUnSelect" class="btn btn-sm btn-info">
<i class="fa fa-square-o"></i>
</button>
<button data-toggle="tooltip" data-placement="left" title="ویرایش" id="btnEditLocation" class="btn btn-sm btn-warning">
<i class="fa fa-pencil"></i>
</button>
<button data-toggle="tooltip" data-placement="left" title="حذف" id="btnDeleteLocation" class="btn btn-sm btn-danger">
<i class="fa fa-times"></i>
</button>
</div>
</div>
و قطعه کد ذیل مربوط به پنل ویرایش است که در ابتدای کار کلاس hide به آن انتساب داده شده و پنهان می‌شود:
<div id="EditPanel" class="row edit hide treeview-panel">
<div class="col-lg-7 pull-right">
<input type="text" id="txtLocationEditTitle" class="form-control" />
</div>
<div class="col-lg-5 pull-left" style="text-align: left">
<input type="button" value="ویرایش" id="btnEditPanelLocation" data-code="" data-parentId="" class="btn btn-sm btn-success" />
<input type="button" value="انصراف" id="btnCancle" class="btn btn-sm btn-info" />
</div>
</div>
در آخر این تکه کد نیز مربوط به KendoUI TreeView است:
<div class="col-lg-6 k-rtl treeview-style">
@(Html.Kendo()
.TreeView()
.Name("treeview")
.DataTextField("Title")
.DragAndDrop(false)
.DataSource(dataSource => dataSource
.Model(model => model.Id("Id"))
.Read(read => read.Action(MVC.Admin.Location.ActionNames.GetAllAssetGroupTree, MVC.Admin.Location.Name)))
)
</div>
یک نکته
- کلاس k-rtl مربوط به خود treeview می‌باشد و با این کلاس، درخت ما راست به چپ می‌شود.
در ادامه cssهای مربوط به کلاس‌های treeview-style ،hide و treeview-panel بررسی خواهند شد:
.treeview-style {
min-height: 86px;
max-height: 300px;
overflow: scroll;
overflow-x: hidden;
position: relative;
}
.treeview-panel {
background-color: #eee;
padding: 25px 0 25px 0;
}
.hide {
display: none;
}
تا اینجای مقاله، کدهای Html و Css موجود را بررسی کردیم. حالا سراغ قسمت اصلی خواهیم رفت. یعنی عملیات CRUD.
لازم به ذکر است در ابتدای قسمت script باید این چند خط کد نوشته شود:
var treeview = null;
$(window).load(function () {
treeview = $("#treeview").data("kendoTreeView");
}); در اینجا بعد از بارگذاری کامل صفحه، درخت مورد نظر ما ساخته خواهد شد و می‌توان به متغیر treeview در تمام قسمت script دسترسی داشت.
پیاده سازی عملیات افزودن:
$(document).on('click', '#btnAddLocation', function () {
var title = $('#txtLocationTitle').val();
var selectedNodeId = null;
var selectedNode = treeview.select();
if (selectedNode.length == 0) {
selectedNode = null;
}
else {
selectedNodeId = treeview.dataItem(selectedNode).id;// گرفتن آی دی گره انتخاب شده
}
$.ajax({
url: '@Url.Action(MVC.Admin.Location.CreateByAjax())',
type: 'POST',
data: { Title: title, ParentId: selectedNodeId },
success: function (data) {
debugger;
showMessage(data.message, data.notificationType);
if (data.result)
treeview.dataSource.read();
},
error: function () {
showMessage('لطفا مجددا تلاش نمایید', 'warning');
}
});
}); توضیحات: مقدار گره جدید را خوانده و در متغیر title قرار می‌دهیم. گره انتخاب شده را توسط این خط
var selectedNode = treeview.select();
می گیریم و سپس در ادامه بررسی خواهیم کرد تا اگر گره‌ای انتخاب نشده باشد، به کاربر پیغامی را نشان دهد؛ در غیر این صورت توسط ajax، مقادیر مورد نظر، به اکشن ما در LocationController ارسال می‌شوند:
[HttpPost]
public virtual ActionResult CreateByAjax(AddLocationViewModel locationViewModel)
{
if (ModelState.IsNotValid())
return JsonResult(false, "عنوان نباید خالی و یا کمتر از دو کاراکتر باشد.", NotificationType.Error);
var result = _locationService.Add(locationViewModel);//سرویس مورد نظر برای اضافه کردن به دیتابیس
switch (result)
{
case AddStatus.AddSuccessful:
_uow.SaveChanges();
return JsonResult(true, Messages.SaveSuccessfull, NotificationType.Success);
case AddStatus.Faild:
return JsonResult(false, Messages.SaveFailed, NotificationType.Error);
case AddStatus.Exists:
return JsonResult(false, Messages.DataExists, NotificationType.Warning);
default:
return JsonResult(false, Messages.SaveFailed, NotificationType.Error);
}
}
public virtual JsonResult JsonResult(bool result, string message, string notificationType)
{
return Json(new { result = result, message = message, notificationType = notificationType }, JsonRequestBehavior.AllowGet);
} اکشن JsonResult که مقادیر نتیجه، پیغام و نوع اطلاع رسانی را می‌گیرد و یک آبجکت از نوع json را به تابع success ای‌جکس، ارسال می‌کند.
public class AddLocationViewModel
{
[DisplayName("عنوان")]
[Required(ErrorMessage ="لطفا عنوان گروه را وارد نمایید"),MinLength(2,ErrorMessage ="طول عنوان خیلی کوتاه می‌باشد ")]
public string Title { get; set; }
[DisplayName("گروه پدر")]
public Guid? ParentId { get; set; }
} این کلاس viewModel ما می‌باشد.
public enum AddStatus
{
AddSuccessful,
Faild,
Exists
} و این مورد هم کلاس AddStatus از نوع enum.
public class Messages
{
#region Fields
public const string SaveSuccessfull = "اطلاعات با موفقیت ذخیره شد";
public const string SaveFailed = "خطا در ثبت اطلاعات";
public const string DeleteMessage = "کابر گرامی ، آیا از حذف کردن این رکورد مطمئن هستید ؟";
public const string DeleteSuccessfull = "اطلاعات با موفقیت حذف شد";
public const string DeleteFailed = "خطا در حذف اطلاعات ، لطفا مجددا تلاش نمایید";
public const string DeleteHasInclude = "کاربر گرامی ، رکورد مورد نظر هم اکنون در بانک اطلاعاتی سیستم در حال استفاده توسط منابع دیگر می‌باشد";
public const string NotFoundData = "اطلاعات یافت نشد";
public const string NoAttachmentSelect = "تصویری انتخاب نشده است";
public const string DataExists = "اطلاعات وارد شده در بانک اطلاعاتی موجود می‌باشد";
public const string DeletedRowHasIncluded = "کاربر گرامی ، رکوردی که قصد حذف آن را دارید هم اکنون در بانک اطلاعاتی سیستم ، توسط سایر بخش‌ها در حال استفاده می‌باشد";
#endregion
} و این موارد هم مقادیر ثابت فیلدهای مورد استفاده‌ی ما در کلاس Message.
پیاده سازی عملیات حذف
به طور اختصار، عملیات حذف را توضیح می‌دهم تا به قسمت اصلی مقاله یعنی ویرایش بپردازیم:
$(document).on('click', '#btnDeleteLocation', function () {
var selectedNode = treeview.select();
var currentNode = treeview.dataItem(selectedNode);
if (selectedNode.length == 0) {
showMessage('گزینه ای انتخاب نشده است. لطفا یک گزینه انتخاب نمایید', 'warning');
} else {
var selectedNodeId = treeview.dataItem(selectedNode).id;
if (currentNode.hasChildren) {
var title = 'کاربر گرامی ، با حذف شدن این گره، تمام زیر شاخه‌های آن حذف می‌شود. آیا مطمئن هستید ؟ ';
DeleteConfirm(selectedNodeId, '@Url.Action(MVC.Admin.Location.DeleteByAjax())', title);
} else {
$.ajax({
url: '@Url.Action(MVC.Admin.Location.DeleteByAjax())',
type: 'POST',
data: { id: selectedNodeId },
success: function (data) {
debugger;
showMessage(data.message, data.notificationType);
if (data.result)
treeview.remove(selectedNode);
},
error: function () {
showMessage('لطفا مجددا تلاش نمایید', 'warning');
}
});
}
}
}); این مورد نیز همانند عملیات افزودن عمل می‌کند. یعنی ابتدا چک می‌کند که آیا گره‌ای انتخاب شده است یا خیر؟ و اگر گره انتخابی ما دارای فرزند باشد، به کاربر پیغامی را نشان می‌دهد و می‌گوید «گره مورد نظر، دارای فرزند است. آیا مایل به حذف تمام فرزندان آن هستید؟» مانند تصویر زیر:
در نهایت چه گره انتخابی دارای فرزند باشد و چه نباشد، به یک مسیر مشترک ارسال می‌شوند:
public virtual ActionResult DeleteByAjax(Guid id)
{
var result = _locationService.Delete(id);
switch (result)
{
case DeleteStatus.Successfull:
_uow.SaveChanges();
return DeleteJsonResult(true, Messages.DeleteSuccessfull, NotificationType.Success);
case DeleteStatus.NotFound:
return DeleteJsonResult(false, Messages.NotFoundData, NotificationType.Error);
case DeleteStatus.Failed:
return DeleteJsonResult(false, Messages.DeleteFailed, NotificationType.Error);
case DeleteStatus.ThisRowHasIncluded:
return DeleteJsonResult(false, Messages.DeletedRowHasIncluded, NotificationType.Warning);
default:
return DeleteJsonResult(false, Messages.DeleteFailed, NotificationType.Error);
}
}
در سرویس مورد نظر ما یعنی Delete، اگه گره‌ای دارای فرزند باشد، تمام فرزندان آن را حذف می‌کند. حتی فرزندان فرزندان آن را:
public DeleteStatus Delete(Guid id)
{
var model = GetAsModel(id);
if (model == null) return DeleteStatus.NotFound;
if (!CanDelete(model)) return DeleteStatus.ThisRowHasIncluded;
_uow.MarkAsSoftDelete(model, _userManager.GetCurrentUserId());
if (model.Children.Any())
DeleteChildren(model);
return DeleteStatus.Successfull;
}
private void DeleteChildren(Location model)
{
foreach (var item in model.Children)
{
_uow.MarkAsSoftDelete(item, _userManager.GetCurrentUserId());
if (item.Children.Any())
DeleteChildren(item);
}
}
public class Location:BaseEntity,ISoftDelete
{
public string Title { get; set; }
public Location Parent { get; set; }
public Guid? ParentId { get; set; }
public bool IsDeleted { get; set; }
public virtual ICollection<Location> Children { get; set; }
} و این هم مدل Location که سمت سرور از مدل استفاده میکنیم.
پیاده سازی عملیات ویرایش
حالا به قسمت اصلی مقاله رسیدیم. در اینجا قرار است گره‌ای را انتخاب نماییم و با زدن دکمه ویرایش و باز شدن پنل آن، آن را ویرایش کنیم. با زدن دکمه ویرایش، کدهای زیر اجرا می‌شوند:
// Open Edit Panel
$(document).on('click', '#btnEditLocation', function () {
debugger;
var selectedNode = treeview.select();
var currentNode = treeview.dataItem(selectedNode);// با استفاده از این خط، گره انتخاب شده جاری را می‌گیریم.
if (selectedNode.length == 0) {
//این شرط به ما می‌گوید اگر گره ای انتخاب نشده بود پیغامی به کاربر نمایش بده
showMessage('گزینه ای انتخاب نشده است. لطفا یک گزینه انتخاب نمایید', 'warning');
} else {
var selectedNodeCode = treeview.dataItem(selectedNode).Code;
var selectedNodeTitle = treeview.dataItem(selectedNode).Title;
var selectedNodeParentId = treeview.dataItem(selectedNode).ParentId;
// آی دی یا کد، عنوان و آی دی پدر گره انتخاب شده را با استفاده از این سه خط در اختیار می‌گیریم
$('#CrudPanel').toggleClass('hide'); //المنت کرادپنل که در حال حاضر کاربر آن را می‌بیند، با این خط کد، پنهان می‌شود
$('#EditPanel').toggleClass('hide'); //المنت ادیت پنل که در حال حاضر از دید کاربر پنهان است، قابل نمایش می‌شود
$("#txtLocationEditTitle").val(selectedNodeTitle);
//عنوان گره ای که می‌خواهیم آن را ویرایش کنیم در تکست باکس مورد نظر قرار می‌گیرد
$("#txtLocationEditTitle").focusTextToEnd();
// با استفاده از این پلاگین، کرسر ماوس در انتهای مقدار دیفالت تکست باکس قرار می‌گیرد
$("#btnEditPanelLocation").attr('data-code', selectedNodeCode);
$("#btnEditPanelLocation").attr('data-parentId', selectedNodeParentId == null ? '' : selectedNodeParentId);
//مقادیر پرنت آی دی و کد را در دیتا اتریبیوت‌های موجود در المنت خودمان قرار می‌دهیم
// Disable clicking in treeview
$("#treeview").children().bind('click', function () { return false; });
}
});
(function ($) {
$.fn.focusTextToEnd = function () {
this.focus();
var $thisVal = this.val();
this.val('').val($thisVal);
return this;
}
}(jQuery)); کد زیر باعث می‌شود تا زمانیکه پنل ویرایش باز است، کاربر نتواند هیچ کلیکی را در عناصر داخل درخت ما، داشته باشد.
$("#treeview").children().bind('click', function () { return false; });
و در نهایت با زدن دکمه ویرایش، پنل ویرایش ما به صورت زیر باز می‌شود:
همانطور که در تصویر بالا مشاهده می‌کنید، با انتخاب ساختمان مرکزی و زدن دکمه ویرایش، پنل CRUD ما پنهان و پنل ویرایش ظاهر می‌گردد. همچنین عنوان گره انتخابی به عنوان پیش فرض تکست باکس ما تنظیم می‌شود و کاربر نمی‌تواند گره دیگری را انتخاب کند؛ به شرط آنکه این پنل ویرایش بسته شود.
با تغییر عنوان تکست باکس و زدن دکمه‌ی ویرایش، رویداد زیر رخ می‌دهد:
// Edit tree node
$(document).on('click', '#btnEditPanelLocation', function () {
debugger;
var code = $("#btnEditPanelLocation").attr('data-code');
var parentId = $("#btnEditPanelLocation").attr('data-parentId');
var title = $("#txtLocationEditTitle").val().trim();
$.ajax({
url: '@Url.Action(MVC.Admin.Location.EditByAjax())',
type: 'POST',
data: { Code: code, Title: title, ParentId: parentId.length === 0 ? null : parentId },
success: function (data) {
debugger;
showMessage(data.message, data.notificationType);
if (data.result) {
treeview.dataSource.read();
CloseEditPanel();
}
},
error: function () {
showMessage('لطفا مجددا تلاش نمایید', 'warning');
}
});
});
[HttpPost]
public virtual ActionResult EditByAjax(EditLocationViewModel editLocationViewModel)
{
if (ModelState.IsNotValid())
return JsonResult(false,"عنوان نباید خالی و یا کمتر از دو کاراکتر باشد.", NotificationType.Error);
var result = _locationService.Edit(editLocationViewModel);
switch (result)
{
case EditStatus.Successful:
_uow.SaveChanges();
return JsonResult(true, Messages.SaveSuccessfull, NotificationType.Success);
case EditStatus.NotFound:
return JsonResult(false, Messages.NotFoundData, NotificationType.Error);
case EditStatus.Faild:
return JsonResult(false, Messages.SaveFailed, NotificationType.Error);
case EditStatus.Exists:
return JsonResult(false, Messages.DataExists, NotificationType.Warning);
default:
return JsonResult(false, Messages.SaveFailed, NotificationType.Error);
}
}
تابع CloseEditPanel بعد از اتمام ویرایش هر گره و یا با زدن دکمه انصراف در شکل بالا، فراخوانی می‌شود که کد آن به شکل زیر است:
function CloseEditPanel() {
$('#CrudPanel').toggleClass('hide');
//پنل کراد ما که در حال حاضر از دید کاربر پنهان است با این خط ظاهر می‌گردد
$('#EditPanel').toggleClass('hide');
//پنل ویرایش ما که در حال حاضر کاربر آن را می‌بیند، پنهان می‌شود از دید کاربر
$("#txtLocationEditTitle").val('');
//مقدار تکست باکس خالی می‌شود
$("#btnEditPanelLocation").attr('data-code', '');
$("#btnEditPanelLocation").attr('data-parentId', '');
//دیتا اتریبیوت‌های ما که مقادیر کد و آی دی والد در آن قرار گرفته نیز خالی می‌شود
// Enable clicking in treeview
$("#treeview").children().unbind('click').bind('click', function () { return true; });
//اگر یادتان باشد با یک خط کد به کاربر اجازه ندادیم که با باز شدن پنل ویرایش، گره دیگری را انتخاب نمایی. حالا این خط کد عکس کد قبلیست و به کاربر اجازه می‌دهد در المنت مورد نظر کلیک کند
}
// Cancle edit Node tree
$(document).on('click', '#btnCancle', function () {
CloseEditPanel();
}); $(document).on('click', '#btnUnSelect', function () {
//رویداد عدم انتخاب
treeview.select(null);
}); 
[{"Id":1,"Name":"Tomato soup","Category":"Groceries","Price":1.39},{"Id":2,"Name":
"Yo-yo","Category":"Toys","Price":3.75},{"Id":3,"Name":"Hammer","Category":
"Hardware","Price":16.99}]
حال به آدرس‌های ذیل بروید:
http://localhost:xxxx/api/products/1
http://localhost:xxxx/api/products?category=hardware
اولین آدرس، باید محصولی با مشخصه‌ی 1 را برگشت دهد و دومین آدرس، لیستی از تمامی محصولاتی که در دسته‌ی hardware قرار دارند را برگشت می‌دهد (در مثال ما فقط یک آیتم این شرط را دارد).
نکته: در صورتی که در هنگام فراخوانی هر یک از متدهای Web API با خطای ذیل مواجه شدید، دستور [("AcceptVerbs("GET", "POST] را به ابتدای متدها اضافه کنید.
The requested resource does not support http method 'GET'
فراخوانی Web API با استفاده از کتابخانه‌ی jQuery
در قسمت قبل، متدهای Web API را مستقیماً از طریق وارد کردن آدرس آنها در نوار آدرس مرورگر فراخوانی کردیم. اما در اکثر اوقات، این متدها با روش‌های برنامه نویسی توسط یک Client فراخوانی می‌شوند. اجازه بدهید Clientیی ایجاد کنیم که با استفاده از jQuery، متدهای ما را فراخوانی می‌کند.
در Solution Explorer، از پوشه‌ی Views و سپس Home، فایل Index.cshtml را باز کنید.
تمامی محتویات این View را حذف و کدهای ذیل را در آن قرار دهید.
<!DOCTYPE html>
<html>
<head>
<title>ASP.NET Web API</title>
<script src="../../Scripts/jquery-1.7.2.min.js"
type="text/javascript"></script>
</head>
<body>
<div>
<h1>All Products</h1>
<ul id='products' />
</div>
<div>
<label for="prodId">ID:</label>
<input type="text" id="prodId" size="5"/>
<input type="button" value="Search" onclick="find();" />
<p id="product" />
</div>
</body>
</html>
بازیابی لیستی از محصولات
برای بازیابی لیستی از محصولات، فقط کافی است تا یک درخواست از نوع GET به آدرس "/api/products" بفرستید. این کار با jQuery به صورت ذیل انجام می‌شود.
<script type="text/javascript">
$(document).ready(function () {
// Send an AJAX request
$.getJSON("api/products/",
function (data) {
// On success, 'data' contains a list of products.
$.each(data, function (key, val) {
// Format the text to display.
var str = val.Name + ': $' + val.Price;
// Add a list item for the product.
$('<li/>', { html: str })
.appendTo($('#products'));
});
});
});
</script>
متد getJSON، یک درخواست AJAX از نوع GET را ارسال می‌کند و پاسخ دریافتی آن نیز با فرمت JSON خواهد بود. دومین پارامتر متد getJSON، یک callback است که پس از دریافت موفقیت آمیز پاسخ اجرا می‌شود.
بازیابی یک محصول با استفاده از مشخصه‌ی آن
برای بازیابی یک محصول با استفاده از مشخصه‌ی آن، یک درخواست از نوع GET به آدرس "api/products/id/" ارسال کنید. id، مشخصه‌ی محصول است. کد ذیل را در ادامه‌ی کد قبل و پیش از تگ <script/> قرار دهید.
function find() {
var id = $('#prodId').val();
$.getJSON("api/products/" + id,
function (data) {
var str = data.Name + ': $' + data.Price;
$('#product').html(str);
})
.fail(
function (jqXHR, textStatus, err) {
$('#product').html('Error: ' + err);
});
}
باز هم از متد getJSON استفاده کردیم، اما این بار مقدار id برای آدرس از یک Text Box خوانده و آدرس ایجاد می‌شود. پاسخ دریافتی، یک محصول در قالب JSON است.
اجرای پروژه
پروژه را با فشردن کلید F5 اجرا کنید. پس از نمایش فرم، تمامی محصولات بر روی صفحه نمایش داده می‌شوند. عدد 1 را وارد و بر روی دکمه‌ی Search کلیک کنید، محصولی که مشخصه‌ی آن 1 است نمایش داده می‌شود (شکل ذیل).
اگر مشخصه ای را وارد کنید که وجود ندارد، خطای 404 با مضمون "Error: Not Found" بر روی صفحه نمایش داده می‌شود و در صورتی که به جای عدد، عبارتی غیر عددی وارد کنید، خطای 400 با مضمون: "Error: Bad Request" نمایش داده می‌شود. در Web API، تمامی پاسخ‌ها باید در قالب کدهای وضعیت HTTP باشند (شکل ذیل). این یکی از اصول اساسی کار با وب سرویس‌ها است. وفادار ماندن به مفاهیم پایه‌ی وب، دید بهتری در مورد اتفاقاتی که می‌افتد به شما می‌دهد.
در قسمت بعد با مفهوم مسیریابی در ASP.NET Web API آشنا می‌شوید.
فرض کنید می‌خواهیم از سرویس‌های REST-based برای انجام عملیات CRUD روی یک Object graph استفاده کنیم. همچنین می‌خواهیم رویکردی در سمت کلاینت برای بروز رسانی کلاس موجودیت‌ها پیاده سازی کنیم که قابل استفاده مجدد (reusable) باشد. علاوه بر این دسترسی داده‌ها توسط مدل Code-First انجام می‌شود.
در مثال جاری یک اپلیکیشن کلاینت (برنامه کنسول) خواهیم داشت که سرویس‌های ارائه شده توسط پروژه Web API را فراخوانی می‌کند. هر پروژه در یک Solution مجزا قرار دارد، با این کار یک محیط n-Tier را شبیه سازی میکنیم.
مدل زیر را در نظر بگیرید.
همانطور که می‌بینید مدل مثال جاری مشتریان و شماره تماس آنها را ارائه می‌کند. می‌خواهیم مدل‌ها و کد دسترسی به داده‌ها را در یک سرویس Web API پیاده سازی کنیم تا هر کلاینتی که به HTTP دسترسی دارد بتواند از آن استفاده کند. برای ساخت سرویس مذکور مراحل زیر را دنبال کنید.
public abstract class BaseEntity
{
protected BaseEntity()
{
TrackingState = TrackingState.Nochange;
}
public TrackingState TrackingState { get; set; }
}
public enum TrackingState
{
Nochange,
Add,
Update,
Remove,
} public class Customer : BaseEntity
{
public int CustomerId { get; set; }
public string Name { get; set; }
public string Company { get; set; }
public virtual ICollection<Phone> Phones { get; set; }
}
public class Phone : BaseEntity
{
public int PhoneId { get; set; }
public string Number { get; set; }
public string PhoneType { get; set; }
public int CustomerId { get; set; }
public virtual Customer Customer { get; set; }
} public class Recipe4Context : DbContext
{
public Recipe4Context() : base("Recipe4ConnectionString") { }
public DbSet<Customer> Customers { get; set; }
public DbSet<Phone> Phones { get; set; }
protected override void OnModelCreating(DbModelBuilder modelBuilder)
{
// Do not persist TrackingState property to data store
// This property is used internally to track state of
// disconnected entities across service boundaries.
// Leverage the Custom Code First Conventions features from Entity Framework 6.
// Define a convention that performs a configuration for every entity
// that derives from a base entity class.
modelBuilder.Types<BaseEntity>().Configure(x => x.Ignore(y => y.TrackingState));
modelBuilder.Entity<Customer>().ToTable("Customers");
modelBuilder.Entity<Phone>().ToTable("Phones");
}
} <connectionStrings>
<add name="Recipe4ConnectionString"
connectionString="Data Source=.;
Initial Catalog=EFRecipes;
Integrated Security=True;
MultipleActiveResultSets=True"
providerName="System.Data.SqlClient" />
</connectionStrings> protected void Application_Start()
{
// Disable Entity Framework Model Compatibilty
Database.SetInitializer<Recipe1Context>(null);
// The bidirectional navigation properties between related entities
// create a self-referencing loop that breaks Web API's effort to
// serialize the objects as JSON. By default, Json.NET is configured
// to error when a reference loop is detected. To resolve problem,
// simply configure JSON serializer to ignore self-referencing loops.
GlobalConfiguration.Configuration.Formatters.JsonFormatter
.SerializerSettings.ReferenceLoopHandling =
Newtonsoft.Json.ReferenceLoopHandling.Ignore;
...
} public static EntityState Set(TrackingState trackingState)
{
switch (trackingState)
{
case TrackingState.Add:
return EntityState.Added;
case TrackingState.Update:
return EntityState.Modified;
case TrackingState.Remove:
return EntityState.Deleted;
default:
return EntityState.Unchanged;
}
} public class CustomerController : ApiController
{
// GET api/customer
public IEnumerable<Customer> Get()
{
using (var context = new Recipe4Context())
{
return context.Customers.Include(x => x.Phones).ToList();
}
}
// GET api/customer/5
public Customer Get(int id)
{
using (var context = new Recipe4Context())
{
return context.Customers.Include(x => x.Phones).FirstOrDefault(x => x.CustomerId == id);
}
}
[ActionName("Update")]
public HttpResponseMessage UpdateCustomer(Customer customer)
{
using (var context = new Recipe4Context())
{
// Add object graph to context setting default state of 'Added'.
// Adding parent to context automatically attaches entire graph
// (parent and child entities) to context and sets state to 'Added'
// for all entities.
context.Customers.Add(customer);
foreach (var entry in context.ChangeTracker.Entries<BaseEntity>())
{
entry.State = EntityStateFactory.Set(entry.Entity.TrackingState);
if (entry.State == EntityState.Modified)
{
// For entity updates, we fetch a current copy of the entity
// from the database and assign the values to the orginal values
// property from the Entry object. OriginalValues wrap a dictionary
// that represents the values of the entity before applying changes.
// The Entity Framework change tracker will detect
// differences between the current and original values and mark
// each property and the entity as modified. Start by setting
// the state for the entity as 'Unchanged'.
entry.State = EntityState.Unchanged;
var databaseValues = entry.GetDatabaseValues();
entry.OriginalValues.SetValues(databaseValues);
}
}
context.SaveChanges();
}
return Request.CreateResponse(HttpStatusCode.OK, customer);
}
[HttpDelete]
[ActionName("Cleanup")]
public HttpResponseMessage Cleanup()
{
using (var context = new Recipe4Context())
{
context.Database.ExecuteSqlCommand("delete from phones");
context.Database.ExecuteSqlCommand("delete from customers");
return Request.CreateResponse(HttpStatusCode.OK);
}
}
} internal class Program
{
private HttpClient _client;
private Customer _bush, _obama;
private Phone _whiteHousePhone, _bushMobilePhone, _obamaMobilePhone;
private HttpResponseMessage _response;
private static void Main()
{
Task t = Run();
t.Wait();
Console.WriteLine("\nPress <enter> to continue...");
Console.ReadLine();
}
private static async Task Run()
{
var program = new Program();
program.ServiceSetup();
// do not proceed until clean-up completes
await program.CleanupAsync();
program.CreateFirstCustomer();
// do not proceed until customer is added
await program.AddCustomerAsync();
program.CreateSecondCustomer();
// do not proceed until customer is added
await program.AddSecondCustomerAsync();
// do not proceed until customer is removed
await program.RemoveFirstCustomerAsync();
// do not proceed until customers are fetched
await program.FetchCustomersAsync();
}
private void ServiceSetup()
{
// set up infrastructure for Web API call
_client = new HttpClient { BaseAddress = new Uri("http://localhost:62799/") };
// add Accept Header to request Web API content negotiation to return resource in JSON format
_client.DefaultRequestHeaders.Accept.Add(new MediaTypeWithQualityHeaderValue
("application/json"));
}
private async Task CleanupAsync()
{
// call the cleanup method from the service
_response = await _client.DeleteAsync("api/customer/cleanup/");
}
private void CreateFirstCustomer()
{
// create customer #1 and two phone numbers
_bush = new Customer
{
Name = "George Bush",
Company = "Ex President",
// set tracking state to 'Add' to generate a SQL Insert statement
TrackingState = TrackingState.Add,
};
_whiteHousePhone = new Phone
{
Number = "212 222-2222",
PhoneType = "White House Red Phone",
// set tracking state to 'Add' to generate a SQL Insert statement
TrackingState = TrackingState.Add,
};
_bushMobilePhone = new Phone
{
Number = "212 333-3333",
PhoneType = "Bush Mobile Phone",
// set tracking state to 'Add' to generate a SQL Insert statement
TrackingState = TrackingState.Add,
};
_bush.Phones.Add(_whiteHousePhone);
_bush.Phones.Add(_bushMobilePhone);
}
private async Task AddCustomerAsync()
{
// construct call to invoke UpdateCustomer action method in Web API service
_response = await _client.PostAsync("api/customer/updatecustomer/", _bush, new JsonMediaTypeFormatter());
if (_response.IsSuccessStatusCode)
{
// capture newly created customer entity from service, which will include
// database-generated Ids for all entities
_bush = await _response.Content.ReadAsAsync<Customer>();
_whiteHousePhone = _bush.Phones.FirstOrDefault(x => x.CustomerId == _bush.CustomerId);
_bushMobilePhone = _bush.Phones.FirstOrDefault(x => x.CustomerId == _bush.CustomerId);
Console.WriteLine("Successfully created Customer {0} and {1} Phone Numbers(s)",
_bush.Name, _bush.Phones.Count);
foreach (var phoneType in _bush.Phones)
{
Console.WriteLine("Added Phone Type: {0}", phoneType.PhoneType);
}
}
else
Console.WriteLine("{0} ({1})", (int)_response.StatusCode, _response.ReasonPhrase);
}
private void CreateSecondCustomer()
{
// create customer #2 and phone numbers
_obama = new Customer
{
Name = "Barack Obama",
Company = "President",
// set tracking state to 'Add' to generate a SQL Insert statement
TrackingState = TrackingState.Add,
};
_obamaMobilePhone = new Phone
{
Number = "212 444-4444",
PhoneType = "Obama Mobile Phone",
// set tracking state to 'Add' to generate a SQL Insert statement
TrackingState = TrackingState.Add,
};
// set tracking state to 'Modifed' to generate a SQL Update statement
_whiteHousePhone.TrackingState = TrackingState.Update;
_obama.Phones.Add(_obamaMobilePhone);
_obama.Phones.Add(_whiteHousePhone);
}
private async Task AddSecondCustomerAsync()
{
// construct call to invoke UpdateCustomer action method in Web API service
_response = await _client.PostAsync("api/customer/updatecustomer/", _obama, new JsonMediaTypeFormatter());
if (_response.IsSuccessStatusCode)
{
// capture newly created customer entity from service, which will include
// database-generated Ids for all entities
_obama = await _response.Content.ReadAsAsync<Customer>();
_whiteHousePhone = _bush.Phones.FirstOrDefault(x => x.CustomerId == _obama.CustomerId);
_bushMobilePhone = _bush.Phones.FirstOrDefault(x => x.CustomerId == _obama.CustomerId);
Console.WriteLine("Successfully created Customer {0} and {1} Phone Numbers(s)",
_obama.Name, _obama.Phones.Count);
foreach (var phoneType in _obama.Phones)
{
Console.WriteLine("Added Phone Type: {0}", phoneType.PhoneType);
}
}
else
Console.WriteLine("{0} ({1})", (int)_response.StatusCode, _response.ReasonPhrase);
}
private async Task RemoveFirstCustomerAsync()
{
// remove George Bush from underlying data store.
// first, fetch George Bush entity, demonstrating a call to the
// get action method on the service while passing a parameter
var query = "api/customer/" + _bush.CustomerId;
_response = _client.GetAsync(query).Result;
if (_response.IsSuccessStatusCode)
{
_bush = await _response.Content.ReadAsAsync<Customer>();
// set tracking state to 'Remove' to generate a SQL Delete statement
_bush.TrackingState = TrackingState.Remove;
// must also remove bush's mobile number -- must delete child before removing parent
foreach (var phoneType in _bush.Phones)
{
// set tracking state to 'Remove' to generate a SQL Delete statement
phoneType.TrackingState = TrackingState.Remove;
}
// construct call to remove Bush from underlying database table
_response = await _client.PostAsync("api/customer/updatecustomer/", _bush, new JsonMediaTypeFormatter());
if (_response.IsSuccessStatusCode)
{
Console.WriteLine("Removed {0} from database", _bush.Name);
foreach (var phoneType in _bush.Phones)
{
Console.WriteLine("Remove {0} from data store", phoneType.PhoneType);
}
}
else
Console.WriteLine("{0} ({1})", (int)_response.StatusCode, _response.ReasonPhrase);
}
else
{
Console.WriteLine("{0} ({1})", (int)_response.StatusCode, _response.ReasonPhrase);
}
}
private async Task FetchCustomersAsync()
{
// finally, return remaining customers from underlying data store
_response = await _client.GetAsync("api/customer/");
if (_response.IsSuccessStatusCode)
{
var customers = await _response.Content.ReadAsAsync<IEnumerable<Customer>>();
foreach (var customer in customers)
{
Console.WriteLine("Customer {0} has {1} Phone Numbers(s)",
customer.Name, customer.Phones.Count());
foreach (var phoneType in customer.Phones)
{
Console.WriteLine("Phone Type: {0}", phoneType.PhoneType);
}
}
}
else
{
Console.WriteLine("{0} ({1})", (int)_response.StatusCode, _response.ReasonPhrase);
}
}
} اگر اپلیکیشن کلاینت را اجرا کنید با خروجی زیر مواجه خواهید شد.
با اجرای اپلیکیشن Web API شروع کنید. این اپلیکیشن یک MVC Web Controller دارد که پس از اجرا شما را به صفحه خانه هدایت می‌کند. در این مرحله سایت در حال اجرا است و سرویس‌ها قابل دسترسی هستند.
سپس اپلیکیشن کنسول را باز کنید و روی خط اول کد فایل program.cs یک breakpoint قرار داده و آن را اجرا کنید. ابتدا آدرس سرویس را نگاشت میکنیم و از سرویس درخواست میکنیم که اطلاعات را با فرمت JSON بازگرداند.
سپس توسط متد DeleteAsync که روی آبجکت HttpClient تعریف شده است اکشن متد Cleanup را روی سرویس فراخوانی میکنیم. این فراخوانی تمام داده‌های پیشین را حذف می‌کند.
در قدم بعدی یک مشتری بهمراه دو شماره تماس می‌سازیم. توجه کنید که برای هر موجودیت مشخصا خاصیت TrackingState را مقدار دهی میکنیم تا کامپوننت‌های Change-tracking در EF عملیات لازم SQL برای هر موجودیت را تولید کنند.
سپس توسط متد PostAsync که روی آبجکت HttpClient تعریف شده اکشن متد UpdateCustomer را روی سرویس فراخوانی میکنیم. اگر به این اکشن متد یک breakpoint اضافه کنید خواهید دید که موجودیت مشتری را بعنوان یک پارامتر دریافت می‌کند و آن را به context جاری اضافه می‌نماید. با اضافه کردن موجودیت به کانتکست جاری کل object graph اضافه می‌شود و EF شروع به ردیابی تغییرات آن می‌کند. دقت کنید که آبجکت موجودیت باید Add شود و نه Attach.
قدم بعدی جالب است، هنگامی که از خاصیت DbChangeTracker استفاده میکنیم. این خاصیت روی آبجکت context تعریف شده و یک <IEnumerable<DbEntityEntry را با نام Entries ارائه می‌کند. در اینجا بسادگی نوع پایه EntityType را تنظیم میکنیم. این کار به ما اجازه می‌دهد که در تمام موجودیت هایی که از نوع BaseEntity هستند پیمایش کنیم. اگر بیاد داشته باشید این کلاس، کلاس پایه تمام موجودیت‌ها است. در هر مرحله از پیمایش (iteration) با استفاده از کلاس EntityStateFactory مقدار خاصیت TrackingState را به مقدار متناظر در سیستم ردیابی EF تبدیل میکنیم. اگر کلاینت مقدار این فیلد را به Modified تنظیم کرده باشد پردازش بیشتری انجام می‌شود. ابتدا وضعیت موجودیت را از Modified به Unchanged تغییر می‌دهیم. سپس مقادیر اصلی را با فراخوانی متد GetDatabaseValues روی آبجکت Entry از دیتابیس دریافت میکنیم. فراخوانی این متد مقادیر موجود در دیتابیس را برای موجودیت جاری دریافت می‌کند. سپس مقادیر بدست آمده را به کلکسیون OriginalValues اختصاص می‌دهیم. پشت پرده، کامپوننت‌های EF Change-tracking بصورت خودکار تفاوت‌های مقادیر اصلی و مقادیر ارسالی را تشخیص می‌دهند و فیلدهای مربوطه را با وضعیت Modified علامت گذاری می‌کنند. فراخوانی‌های بعدی متد SaveChanges تنها فیلدهایی که در سمت کلاینت تغییر کرده اند را بروز رسانی خواهد کرد و نه تمام خواص موجودیت را.
در اپلیکیشن کلاینت عملیات افزودن، بروز رسانی و حذف موجودیت‌ها توسط مقداردهی خاصیت TrackingState را نمایش داده ایم.
متد UpdateCustomer در سرویس ما مقادیر TrackingState را به مقادیر متناظر EF تبدیل می‌کند و آبجکت‌ها را به موتور change-tracking ارسال می‌کند که نهایتا منجر به تولید دستورات لازم SQL می‌شود.
نکته: در اپلیکیشن‌های واقعی بهتر است کد دسترسی داده‌ها و مدل‌های دامنه را به لایه مجزایی منتقل کنید. همچنین پیاده سازی فعلی change-tracking در سمت کلاینت می‌تواند توسعه داده شود تا با انواع جنریک کار کند. در این صورت از نوشتن مقادیر زیادی کد تکراری جلوگیری خواهید کرد و از یک پیاده سازی می‌توانید برای تمام موجودیت‌ها استفاده کنید.
PowerShell For SQL Full Course
f you’re a SQL Data Pro, check out this demo-packed course to explore using PowerShell to manage SQL Server and Azure SQL Database. Hear about the background of PowerShell, and learn PowerShell basics, such as how to get help, use cmdlets, and load modules. Look at task automation and configuration, and learn how to provision, deploy, and manage SQL Server in Azure Virtual Machines and Azure SQL Database. Plus, see how to use the SQLPS module to administer SQL Server, both on-premises and in Azure Virtual Machines. Don’t miss this practical PowerShell training
