ورود

View Full Version : آموزش: ایجاد یک Helper برای باز کردن پنجره ها بصورت popup



mehdin69
پنج شنبه 26 تیر 1393, 15:55 عصر
سلام دوستان
یه کمی امروز توی اوقات بیکاری خودم گفتم یه چیزی برای سایت قرار بدم اونم چیزی نیست جز همین Helper ای که توی عنوان گذاشتم
خیلی وقتا پیش اومده که گفتید ای بابا کاش این پنجره من بصورت Popup باز میشد و این همه کد نمی خواست بنویسم
یا اصاً کاش چندتا popup روی هم باز میشد و حجم کد نویسی من اینقدر بالا نمیرفت
من امروز این 2 تا Helper رو واستون میذارم
اول اینکه از JqueryUI داریم استفاده میکنیم
پس برید توی فایل layout پروژه این فایل ها رو اضافه کنید
فایل ها رو میتونید از سایت Jquery UI بگیرید


<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/jquery-ui-1.10.4.custom/js/jquery-ui-1.10.4.custom.js"></script>
<link href="~/Scripts/jquery-ui-1.10.4.custom/css/overcast/jquery-ui-1.10.4.custom.css" rel="stylesheet" />


حالا یه فایل js باید بنویسیم که خودتون بخونیدش تا بفهمید چیکار کردم و این فایل رو با هر اسمی که می خواید Save کنید و زیر فایل های بالا توی صفحه Layout قرار بدید


//نوشته شده توسط سید مهدی ناظم السادات
//ایمیل : MehdiNazemosadat@gmail.com

function CMIS_showDialog(idselector) {
var item = jQuery(idselector);
var gridid = item.attr('data-i-gridid');
var gridfield = item.attr('data-i-gridfield');
var data2 = "";
if (gridfield != "") {
var grid = jQuery("#" + gridid);
if (grid.length == 0) {
alertbox("grid not found");
return;
}
var dataItem = grid.data("kendoGrid").dataItem(item.closest("tr"));
var rowid = dataItem[gridfield];
//$('#divid').load(jQuery(e.currentTarget).attr("myclass") + dataItem[id]);
data2 = {id:rowid};
}
jQuery.ajax({
type: item.attr('data-i-Method'),
url: item.attr('data-i-Target'),
data: /*item.attr('data-i-Data')*/data2
}).done(function (data) {
var dialogid = "dialog" + Math.floor((Math.random() * 100000) + 1);
jQuery("body").append("<div id='" + dialogid + "' title='Basic dialog'>" + data + "</div>");
jQuery("#" + dialogid).dialog({
width: item.attr('data-i-Width'),
height: item.attr('data-i-Height'),
ShowEffect: item.attr('data-i-ShowEffect'),
ShowDir: item.attr('data-i-ShowDir'),
HideEffect: item.attr('data-i-HideEffect'),
HideDir: item.attr('data-i-HideDir'),
position: { my: "center top", at: "center bottom", of: 'nav' },
modal: true,/* item.attr('data-i-IsModal')*/
title: item.attr('data-i-Title'),
close: function (event, ui) {
//onClose();
//jQuery("#" + dialogid).location.reload();
if (gridid != '') {
jQuery("#" + item.attr('data-i-gridid')).data("kendoGrid").dataSource.read();
}
jQuery("#" + dialogid).remove();
}
}).keypress(function (e) {
if (e.keyCode == jQuery.ui.keyCode.ENTER) {
e.preventDefault();
}
});
});

}


function alertbox(message) {
jQuery('#alertbox').empty().append(message);
jQuery("#alertboxparent").show();
jQuery('#alertboxparent').delay(5000).fadeOut('slo w');
}

function DialogSubmit_click(idSelector, target) {
//var idSelector = "#" + id;

var form = jQuery(idSelector).closest("form");

jQuery.ajax({
type: form.attr("method"),
url: target,
data: form.serialize()
}).done(function (data) {
var obj = jQuery.parseJSON(data);
if (obj.ok == "true") {
alertbox(obj.message);
//console.log(obj.message);
//

//jQuery("#" + dialogid).location.reload();
jQuery(idSelector).closest(".ui-dialog-content").dialog("close");
} else {
//console.log(obj.message);
alertbox(obj.message);
var errors = obj.errors;
if (errors != null) {
for (var i = 0; i < errors.length; i++) {
var field = errors[i];
i++;
var error = errors[i];

//jQuery("[data-valmsg-for=" + field + "]").text(error);
if (error != "") {
jQuery('#' + field + '').addClass("error_cims").attr("title", error).tooltip('show');
jQuery('#s2id_' + field + '').addClass("error_cims").attr("title", error).tooltip('show');

} else {
jQuery('#' + field + '').addClass("valid_cims").attr("title", '');
jQuery('#s2id_' + field + '').addClass("valid_cims").attr("title", '');
}
}
}
}
}).fail(function (jqXHR, textStatus) {
alertbox("Error in accessing Service");
});

}

function DialogSubmit_click_navigate(idSelector, target) {
//var idSelector = "#" + id;

var form = jQuery(idSelector).closest("form");

jQuery.ajax({
type: form.attr("method"),
url: target,
data: form.serialize()
}).done(function (data) {
var obj = jQuery.parseJSON(data);
if (obj.ok == "true") {
alertbox(obj.message);
CMIS_showDialog(idSelector);
//
//jQuery("#" + dialogid).location.reload();
jQuery(idSelector).closest(".ui-dialog-content").dialog("close");
} else {
alertbox(obj.message);
var errors = obj.errors;
if (errors != null) {
for (var i = 0; i < errors.length; i++) {
var field = errors[i];
i++;
var error = errors[i];

//jQuery("[data-valmsg-for=" + field + "]").text(error);
if (error != "") {
jQuery('#' + field + '').addClass("error_cims").attr("title", error).tooltip('show');
jQuery('#s2id_' + field + '').addClass("error_cims").attr("title", error).tooltip('show');

} else {
jQuery('#' + field + '').addClass("valid_cims").attr("title", '');
jQuery('#s2id_' + field + '').addClass("valid_cims").attr("title", '');
}
}
}
}
}).fail(function (jqXHR, textStatus) {
alertbox("Error in accessing Service");
});

}


حالا فقط کافیه بریم و کد Helper خودمون رو بنویسیم
یه کلاس بنام Submit ایجاد کنین و دستورات زیر را توی اون قرار بدید


public static class Submit
{

public static MvcHtmlString DialogOpener(this AjaxHelper ajaxHelper, DialogOpenerOption option)
{
/*
* {"data-i-gridid",this.gridid },
{"data-i-gridfield", this.gridField}
* */

string id = option.id;
var tag = new TagBuilder("a");
tag.InnerHtml = option.Text;
tag.MergeAttribute("id", id);
tag.MergeAttribute("href", "javascript:;");
tag.MergeAttribute("data-i-Width", option.Width);
tag.MergeAttribute("data-i-Height", option.Height);
tag.MergeAttribute("data-i-ShowEffect", option.ShowEffect);
tag.MergeAttribute("data-i-ShowDir", option.ShowDir);
tag.MergeAttribute("data-i-HideEffect", option.HideEffect);
tag.MergeAttribute("data-i-HideDir", option.HideDir);
tag.MergeAttribute("data-i-IsModal", option.IsModal);
tag.MergeAttribute("data-i-Title", option.Title);
tag.MergeAttribute("data-i-Text", option.Text);
tag.MergeAttribute("data-i-Target", option.Target);
tag.MergeAttribute("data-i-Method", option.Method);
tag.MergeAttribute("data-i-Data", option.Data);
tag.MergeAttribute("data-i-gridid", option.gridid);
tag.MergeAttribute("data-i-gridfield", option.gridField);
tag.MergeAttribute("class", option.CLASS);
string functioncallstring = string.Format("CMIS_showDialog(this)");
tag.MergeAttribute("onclick", functioncallstring);
return MvcHtmlString.Create(tag.ToString());
}

public static MvcHtmlString DialogSubmit(this AjaxHelper ajaxHelper, string Text,string target)
{
string id = "random_" + GRandom.Next();
var tag = new TagBuilder("input");
//tag.InnerHtml = Text;
tag.MergeAttribute("id", id);
tag.MergeAttribute("type","button");
tag.MergeAttribute("value", Text);
string functioncallstring = string.Format("DialogSubmit_click(this, '{0}')",target);
tag.MergeAttribute("onclick", functioncallstring);
//tag.MergeAttribute("onclick", string.Format("DialogSubmit_click('{0}', '{1}')",id, target));

return MvcHtmlString.Create(tag.ToString());
}

public static MvcHtmlString DialogSubmitNavigator(this AjaxHelper ajaxHelper, DialogOpenerNavigatorOption option)
{

string id = "random_" + GRandom.Next();
var tag = new TagBuilder("input");
//tag.InnerHtml = Text;
tag.MergeAttribute("id", id);
tag.MergeAttribute("type", "button");
tag.MergeAttribute("id", id);
tag.MergeAttribute("href", "javascript:;");
tag.MergeAttribute("data-i-Width", option.Width);
tag.MergeAttribute("data-i-Height", option.Height);
tag.MergeAttribute("data-i-ShowEffect", option.ShowEffect);
tag.MergeAttribute("data-i-ShowDir", option.ShowDir);
tag.MergeAttribute("data-i-HideEffect", option.HideEffect);
tag.MergeAttribute("data-i-HideDir", option.HideDir);
tag.MergeAttribute("data-i-IsModal", option.IsModal);
tag.MergeAttribute("data-i-Title", option.Title);
tag.MergeAttribute("data-i-Text", option.Text);
tag.MergeAttribute("value", option.Text);
tag.MergeAttribute("data-i-Target", option.Target2);
tag.MergeAttribute("data-i-Method", option.Method);
tag.MergeAttribute("data-i-Data", option.Data);
tag.MergeAttribute("data-i-gridid", option.gridid);
tag.MergeAttribute("data-i-gridfield", option.gridField);
tag.MergeAttribute("class", option.CLASS);
string functioncallstring = string.Format("DialogSubmit_click_navigate(this, '{0}' )", option.Target);
tag.MergeAttribute("onclick", functioncallstring);
//tag.MergeAttribute("onclick", string.Format("DialogSubmit_click('{0}', '{1}')",id, target));

return MvcHtmlString.Create(tag.ToString());
}

}


و حالا یک کلاس بنام DialogOpenerOption درست کنید و دستورات زیر را هم توی اون اضافه کنید


public class DialogOpenerOption
{
public DialogOpenerOption()
{
Width = "auto";
Height = "auto";
ShowEffect = "clip";
ShowDir = "left";
HideEffect = "clip";
HideDir = "right";
IsModal = "true";
Title = "Dialog Title";
Text = "";
Target = "Target";
id = "random_" + GRandom.Next();
Method = "POST";
CLASS = string.Empty;
gridField = "";
gridid = "";
Data = "";
}

public string CLASS { get; set; }

public string Width { get; set; }
public string Height { get; set; }
public string ShowEffect { get; set; }
public string ShowDir { get; set; }
public string HideEffect { get; set; }
public string HideDir { get; set; }
public string IsModal { get; set; }
public string Title { get; set; }
public string Text { get; set; }
public string Target { get; set; }
public string id { get; set; }
public string Method { get; set; }

public string Data { get; set; }

public string gridid { get; set; }

public string gridField { get; set; }

public Dictionary<string, object> Dic()
{
string functioncallstring = string.Format("CMIS_showDialog(this)");
Dictionary<string, object> dic = new Dictionary<string, object>()
{
{"id", this.id},
{"href", "javascript:;"},
{"data-i-Width", this.Width},
{"data-i-Height", this.Height},
{"data-i-ShowEffect", this.ShowEffect},
{"data-i-ShowDir", this.ShowDir},
{"data-i-HideEffect", this.HideEffect},
{"data-i-HideDir", this.HideDir},
{"data-i-IsModal", this.IsModal},
{"data-i-Title", this.Title},
{"data-i-Text", this.Text},
{"data-i-Target", this.Target},
{"data-i-Method", this.Method},
{"data-i-Data", this.Data},
{"class", this.CLASS},
{"onclick", functioncallstring},
{"data-i-gridid",this.gridid },
{"data-i-gridfield", this.gridField}
};

return dic;

}

}



در آخر یه کلاس هم بنام DialogOpenerNavigatorOption اضافه کنید و دستورات زیر را توی اون قرار بدید


public class DialogOpenerNavigatorOption : DialogOpenerOption
{

public DialogOpenerNavigatorOption()
{
Target2 = "Target2";
}

public string Target2 { get; set; }

}


اوکی حالا هرجا نیاز داشتید استفاده کنید مثلاً می خوام پنجره ثبت مشخصات یک مکان رو بصورت popup نمایش بدم از دستور زیر استفاده میکنم


@Ajax.DialogOpener(new DialogOpenerOption { gridid = "grid_Location", CLASS = "new_button", Target = Url.Action("Create", "Location"), Method = "GET", Title = "Create Location" })

واسه دکمه Save و ارسال پارامتر ها به سرور از دستور زیر


@Ajax.DialogSubmit("Insert", Url.Action("CreateSave", "Location"))

واسه ذخیره هدر فاکتور و رفتن به یک پنجره دیگر برایثبت مشخصات زیر فاکتور از دستور زیر


@Ajax.DialogSubmitNavigator(new DialogOpenerNavigatorOption {Width = "800", Height = "600", Text = "Save", Target = Url.Action("CreateSave", "controller1"), Target2 = Url.Action("Index", "controller2"), Method = "GET" })


امیدوارم اگر کم و کاستی داره به کمک هم اینو کامل کنیم و واسه همیشه از این popup باز شدنا راحت شیم