Javascript上下文菜单到c#
本文关键字:菜单 上下文 Javascript | 更新日期: 2023-09-27 18:17:09
我使用Jquery创建了一个完美的javascript上下文菜单。但有两种选择。第一个是在c#中创建这个上下文菜单(如果可能的话)。第二种方法是在单击菜单中的按钮时运行c#函数。哪个选项是最好的,我该如何开始?亲切的问候
Javascript:function Menu($div){
var that = this,
ts = null;
this.$div = $div;
this.items = [];
// create an item using a new closure
this.create = function(item){
var $item = $('<div class="item '+item.cl+'">'+item.label+'</div>');
$item
// bind click on item
.click(function(){
if (typeof(item.fnc) === 'function'){
item.fnc.apply($(this), []);
}
})
// manage mouse over coloration
.hover(
function(){$(this).addClass('hover');},
function(){$(this).removeClass('hover');}
);
return $item;
};
this.clearTs = function(){
if (ts){
clearTimeout(ts);
ts = null;
}
};
this.initTs = function(t){
ts = setTimeout(function(){that.close()}, t);
};
}
// add item
Menu.prototype.add = function(label, cl, fnc){
this.items.push({
label:label,
fnc:fnc,
cl:cl
});
}
// close previous and open a new menu
Menu.prototype.open = function(event){
this.close();
var k,
that = this,
offset = {
x:0,
y:0
},
$menu = $('<div id="menu"></div>');
// add items in menu
for(k in this.items){
$menu.append(this.create(this.items[k]));
}
// manage auto-close menu on mouse hover / out
$menu.hover(
function(){that.clearTs();},
function(){that.initTs(3000);}
);
// change the offset to get the menu visible (#menu width & height must be defined in CSS to use this simple code)
if ( event.pixel.y + $menu.height() > this.$div.height()){
offset.y = -$menu.height();
}
if ( event.pixel.x + $menu.width() > this.$div.width()){
offset.x = -$menu.width();
}
// use menu as overlay
this.$div.gmap3({
action:'addOverlay',
latLng: event.latLng,
content: $menu,
offset: offset
});
// start auto-close
this.initTs(5000);
}
// close the menu
Menu.prototype.close = function(){
this.clearTs();
this.$div.gmap3({action:'clear', name:'overlay'});
}
你可以在c#中创建一个服务器控件并从中发出菜单,但是既然你已经有了一个工作菜单,那么调用服务器端方法来响应点击就更容易了。如果你使用的是jQuery,就像这样简单:
$.ajax({
url: "/Path/To/MyMethod",
type: "POST",
dataType: "JSON",
data: <some POST data>,
contentType: "application/json; charset=utf-8",
success: function (result) {
// Do your stuff here
},
error: function (jqXHR, textStatus, errorThrown) {
// Report error
}
});
服务器端部分的实现可以是ASPX页面中的静态[WebMethod],或者如果你使用MVC,那么它可以是直接调用控制器方法。
我假设你要做的是在上下文菜单上选择一个项目时调用c#方法。如果您使用的是MVC模型,这很容易做到。使用如下调用,以JSON格式传递参数。我只是使用骨架方法从我的代码作为一个例子,你会调用LibraryRead方法当你点击上下文菜单链接
Client Side
function LibraryRead() {
$.ajax({
url : 'Library/ReadLibrary',
type : "POST",
data : JSON.stringify(idLibrary),
dataType : "json",
contentType : "application/json; charset=utf-8",
success : function(result) {
$(result).each(function() {
....Process Results
});
},
error : function() {
.....If something goes wrong, if you use a try catch in your code
which does not handle the exception correctly and something goes wrong
this will not be triggered. Use propper exception handling.
}
});
}
Server Side
// Post: /Library/ReadLibrary
[HttpPost]
public JsonResult ReadLibrary(int idLibrary)
{
try
{
var library = READ your library here from your data source
return this.Json(library);
}
else
{
return null;
}
}
catch (Exception ex)
{
//Exception handling omitted for simplicity
}
}
在谷歌上搜索MVC3和JQuery/Javascript调用JSON,有大量的资源可用。
如果你不使用MVC模式,你可以在代码中使用web服务或方法。您需要在方法上添加适当的属性,例如[Ajax.AjaxMethod()]或[WebMethod]