ایجاد دیتابیس
ابتدا یک دیتابیس به نام 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);
}
};