میخواهیم با تغییر jQuery Image Annotation این پلاگین و برای asp.net استفاده کنیمایجاد دیتابیس
ابتدا یک دیتابیس به نام Coordinates ایجاد کنید و سپس جدول زیر رو ایجاد کنید
USE [Coordinates] GO CREATE TABLE [dbo].[Coords2]( [top] [int] NULL, [left] [int] NULL, [width] [int] NULL, [height] [int] NULL, [text] [nvarchar](50) NULL, [id] [uniqueidentifier] NULL, [editable] [bit] NULL ) ON [PRIMARY] GO
ایجاد کلاس Coords برای خواندن و ذخیره اطلاعات
public class Coords
{
public string top;
public string left;
public string width;
public string height;
public string text;
public string id;
public string editable;
public Coords(string top, string left, string width, string height, string text, string id, string editable)
{
this.top = top;
this.left = left;
this.width = width;
this.height = height;
this.text = text;
this.id = id;
this.editable = editable;
}
}1-GetDynamicContext
این متد در زمان لود اطلاعات از دیتابیس استفاده میشود (وقتی که postback صورت میگیرد)
[WebMethod]
public static List<Coords> GetDynamicContext(string entryId, string entryName)
{
List<Coords> CoordsList = new List<Coords>();
string connect = "Connection String";
using (SqlConnection conn = new SqlConnection(connect))
{
string query = "SELECT [top], [left], width, height, text, id, editable FROM Coords2";
using (SqlCommand cmd = new SqlCommand(query, conn))
{
conn.Open();
using (SqlDataReader reader=cmd.ExecuteReader())
{
while (reader.Read())
{
CoordsList.Add(new Coords(reader["top"].ToString(), reader["left"].ToString(),
reader["width"].ToString(), reader["height"].ToString(),
reader["text"].ToString(), reader["id"].ToString(),
reader["editable"].ToString()));
}
}
conn.Close();
}
}
return CoordsList;
}2,3 -SaveCoordsو DeleteCoords
این دو متد هم واسه ذخیره و حذف می‌باشند که نکته خاصی ندارند و خودتون بهینه اش کنید(در فایل ضمیمه موجودند)
تغییر فایل jquery.annotate.js جهت فراخوانی وب سرویس ها
فقط لازمه که سه قسمت زیر رو در فایل اصلی تغییر بدید
$.fn.annotateImage.ajaxLoad = function (image) {
///<summary>
///Loads the annotations from the "getUrl" property passed in on the
/// options object.
///</summary>
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "Default.aspx/GetDynamicContext",
data: "{'entryId': '" + 1 + "','entryName': '" + 2 + "'}",
dataType: "json",
success: function (msg) {
image.notes = msg.d;
$.fn.annotateImage.load(image);
}
});
};
$.fn.SaveCoords = function (note) {
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "Default.aspx/SaveCoords",
data: "{'top': '" + note.top + "','left': '" + note.left + "','width': '" + note.width + "','height': '" + note.height + "','text': '" + note.text + "','id': '" + note.id + "','editable': '" + note.editable + "'}",
dataType: "json",
success: function (msg) {
note.id = msg.d;
}
});
};
$.fn.annotateView.prototype.edit = function () {
///<summary>
///Edits the annotation.
///</summary>
if (this.image.mode == 'view') {
this.image.mode = 'edit';
var annotation = this;
// Create/prepare the editable note elements
var editable = new $.fn.annotateEdit(this.image, this.note);
$.fn.annotateImage.createSaveButton(editable, this.image, annotation);
// Add the delete button
var del = $('<a>حذف</a>');
del.click(function () {
var form = $('#image-annotate-edit-form form');
$.fn.annotateImage.appendPosition(form, editable)
if (annotation.image.useAjax) {
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "Default.aspx/DeleteCoords",
// url: annotation.image.deleteUrl,
// data: form.serialize(),
data: "{'id': '" + editable.note.id + "'}",
dataType: "json",
success: function (msg) {
// image.notes = msg.d;
// $.fn.annotateImage.load(image);
},
error: function (e) { alert("An error occured deleting that note.") }
});
}
annotation.image.mode = 'view';
editable.destroy();
annotation.destroy();
});
editable.form.append(del);
$.fn.annotateImage.createCancelButton(editable, this.image);
}
};
به علاوه باید دقت داشت که این مورد ویژه را باید بر اساس آخرین Build کتابخانه MahApps.Metro که به‌روزتر است دریافت و استفاده کرد. در اینجا با پارامتر Pre ذکر شده است. 
