میخواهیم با تغییر jQuery Image Annotation این پلاگین و برای asp.net استفاده کنیم
ایجاد دیتابیس
ابتدا یک دیتابیس به نام Coordinates ایجاد کنید و سپس جدول زیر رو ایجاد کنید
ایجاد کلاس Coords برای خواندن و ذخیره اطلاعات
فرم اصلی برنامه شامل 3 وب سرویس به شرح زیر میباشد
1-GetDynamicContext
این متد در زمان لود اطلاعات از دیتابیس استفاده میشود (وقتی که postback صورت میگیرد)
2,3 -SaveCoordsو DeleteCoords
این دو متد هم واسه ذخیره و حذف میباشند که نکته خاصی ندارند و خودتون بهینه اش کنید(در فایل ضمیمه موجودند)
تغییر فایل jquery.annotate.js جهت فراخوانی وب سرویس ها
فقط لازمه که سه قسمت زیر رو در فایل اصلی تغییر بدید
این پروژه شامل یه سری فایل css هم هست که میتونید کل پروژه رو از اینجا دانلود کنید
ایجاد دیتابیس
ابتدا یک دیتابیس به نام 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);
}
};