Error with creating data driven jquery dropdown menu in asp.net consuming web services
I have gone through the following article and implementing the same i am using webservices instead of wcf services ,`when i run the following html file , the dynamic menu does not display .May i please know where exactly i am going wrong. This is my html file.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Sample Test Application</title>
<style type="text/css">
.Menu
{
width:200px;
text-align:center;
border:solid 2px gray;
padding:0px;
background-color:Silver;
cursor:hand;
font-weight:bold;
}
.MenuItem
{
width:192px;
text-align:center;
border:solid 1px silver;
padding:2px;
background-color:whitesmoke;
}
</style>
<script type="text/javascript" src="Scripts\jquery-1.4.1.js">
$(document).ready(function() {
$.ajax(
{
type: "GET",
url: "http://localhost:50542/MenuItems.asmx/GetMenus",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: CreateMenus,
error: function(err) {
alert(err.status + " - " + err.statusText);
}
}
);
});
function CreateMenus(results) {
for (var i = 0; i < results.length; i++) {
$("<div class='Menu'>" + results[i].Text + "</div>")
.click({ MenuId: results[i].MenuId }, OnMenuClick)
.appendTo("#accordionContainer");
}
}
function OnMenuClick(event)
{
$("div[id ^= 'menuItemGroup']").slideUp(500);
$.ajax(
{
type: "GET",
url: "http://localhost:50542/MenuItems.asmx/GetMenuItems",
开发者_运维技巧data: '{"menuId":"' + event.data.MenuId + '"}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(items) {
$(event.target).children().remove();
var html = "<div id='menuItemGroup" + event.data.MenuId + "' style='display:none'>";
for (var j = 0; j < items.length; j++) {
html += "<div class='MenuItem'> <a href='" + items[j].NavigateUrl + "'>" +
items[j].Text + "</a></div>";
}
html += "</div>";
$(event.target).append(html);
$("#menuItemGroup" + event.data.MenuId).slideDown(500);
},
error: function(err) {
alert(err.status + " - " + err.statusText);
}
}
)
}
</script>
</head>
<body>
<div id="accordionContainer" ></div>
<div class="Menu"></div>
<div class="MenuItem"></div>
</body>
</html>
This is my webservice file
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Web.Script.Services;
namespace ServiceMahe
{
/// <summary>
/// Summary description for MenuItems
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.ComponentModel.ToolboxItem(false)]
// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
// [System.Web.Script.Services.ScriptService]
public class MenuItems : System.Web.Services.WebService
{
[WebMethod]
public string HelloWorld()
{
return "Hello World";
}
[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public Menu[] GetMenus()
{
SampleDataClassesDataContext db = new SampleDataClassesDataContext();
List<Menu> menus = new List<Menu>();
var temp = from item in db.Menus
select item;
foreach (var obj in temp)
{
Menu m = new Menu();
m.MenuId = obj.MenuId;
m.Text = obj.Text;
menus.Add(m);
}
return menus.ToArray();
}
[WebMethod]
[ScriptMethod(ResponseFormat=ResponseFormat.Json)]
public MenuItems1[] GetMenuItems(int menuId)
{
SampleDataClassesDataContext db = new SampleDataClassesDataContext();
List<MenuItems1> items = new List<MenuItems1>();
var temp = from item in db.MenuItems
where item.MenuId == menuId
select item;
foreach (var obj in temp)
{
MenuItems1 mi = new MenuItems1();
mi.MenuId = (int)obj.MenuId;
mi.MenuItemId = obj.MenuItemId;
mi.Text = obj.Text;
mi.NavigateUrl = obj.NavigateUrl;
items.Add(mi);
}
return items.ToArray();
}
}
}
Uncomment this line...
[System.Web.Script.Services.ScriptService]
Explanation is in your code itself.
To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
加载中,请稍侯......
精彩评论