Ajax Data Controls:DataListを利用する２

最新の投稿は、投稿日時: 2008/02/07 16:28 投稿者: ASANO です。スレッドには 2 件の返答があります。

ページ 1 / 1 (3 アイテム)
	投稿の並べ替え: 前へ次へ

2008/02/07 16:26

ASANO
登録日 : 2005/07/27
投稿数 1,272

Ajax Data Controls:DataListを利用する２

回答連絡

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<%@ Register assembly="AjaxDataControls" namespace="AjaxDataControls" tagprefix="AjaxData" %>

<!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 runat="server">
    <title>Ajax Data Controls:DataListを利用する２</title>
    <script type="text/javascript" src="JScript.js"></script>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
            <Services>
                <asp:ServiceReference Path="~/WebService.asmx" />
            </Services>
        </asp:ScriptManager>

        <select id="Select1">
        </select>

        <AjaxData:DataList ID="DataList1" runat="server"
            RepeatColumns="5"
            CellSpacing="10"
            CellPadding="10"
            ItemDataBoundEvent="onItemDataBound">
            <ItemTemplate>
                <div>
                    ID:<div id="ProductId"></div>
                    Name:<div id="ProductName"></div>
                    Price:<div id="ProductPrice"></div>
                </div>
            </ItemTemplate>
            <SeparatorTemplate>
                <hr />
            </SeparatorTemplate>
        </AjaxData:DataList>
    </form>
</body>
</html>

タグ: DataList, Data, Ajax, Controls

2008/02/07 16:27 回答元:

ASANO
登録日 : 2005/07/27
投稿数 1,272

Re: Ajax Data Controls:DataListを利用する２

回答連絡

using System;
using System.Collections;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Web.Services.Protocols;
using System.Xml.Linq;
using System.Data.SqlClient;
using System.Collections.Generic;

/// <summary>
/// WebService の概要の説明です
/// </summary>
[WebService(Namespace = "http://momotchi.net/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.Web.Script.Services.ScriptService]
public class WebService : System.Web.Services.WebService {

public WebService () {
}

    [WebMethod]
    public List<Table_1> GetTable1()
    {
        DataClassesDataContext context = new DataClassesDataContext();
        IEnumerable<Table_1> result = from t in context.Table_1 select t;

return result.ToList();
}

    [WebMethod]
    public List<Product> GetProductId()
    {
        DataClassesDataContext context = new DataClassesDataContext();
        IEnumerable<Product> result = from t in context.Product select t;

return result.ToList();
}

    [WebMethod]
    public List<Product> GetProduct(int id)
    {

        DataClassesDataContext context = new DataClassesDataContext();
        IEnumerable<Product> result = from t in context.Product
                                      where t.ID == id
                                      select t;
        return result.ToList();
    }
}

タグ: ScriptService, WebService

2008/02/07 16:28 回答元:

ASANO
登録日 : 2005/07/27
投稿数 1,272

Re: Ajax Data Controls:DataListを利用する２

回答連絡

var productList;
var divId;
var divName;
var divPrice;

function pageLoad(sender, e)
{
WebService.GetProductId(onGetProductSuccess, onGetProductFailed);
}

function onGetProductSuccess(result)
{
    productList = $get('Select1');

    createSelectItem(productList, "[ALL]", "-1");

    for(var index = 0; index < result.length; index++)
        createSelectItem(productList, result[index].Name, result[index].ID);

    $addHandler(productList, 'change', onProductChange);
}

function onGetProductFailed(arg) {
alert(arg);
}

function createSelectItem(listBox, text, value) {
    var opt = document.createElement('option');

    setText(opt, text);
    opt.value = value;

    listBox.appendChild(opt);
}

function onProductChange() {
    if (productList.options[productList.selectedIndex].value > -1) {
        WebService.GetProduct(parseInt(productList.options[productList.selectedIndex].value), onLoadSuccess);
    }
    else {
        WebService.GetProductId(onLoadSuccess);
    }
}

function onLoadSuccess(products)
{
var dataList = $find('DataList1');

dataList.set_dataSource(products);
dataList.dataBind();
}

function onItemDataBound(sender, e)
{
var item = e.get_item();

    if (item.get_isDataItemType())
    {
        var product = item.get_dataItem();

        divId = item.findControl('ProductId');
        divName = item.findControl('ProductName');
        divPrice = item.findControl('ProductPrice');

        setText(divId, product.ID);
        setText(divName, product.Name);
        setText(divPrice, addFigure(product.Price));
    }
}

// 参照：GAC なぜなにGAC -> JavaScript
// http://www.gac.jp/article/index.php?stats=question&category=9&id=4207&command=msg
function addFigure(str) {
    var num = new String(str).replace(/,/g, "");
    while(num != (num = num.replace(/^(-?\d+)(\d{3})/, "$1,$2")));
    return num;
}

function setText(element, text)
{
    if (typeof element.textContent != 'undefined')
    {
        element.textContent = text;
    }
    else if (typeof element.innerText != 'undefined')
    {
        element.innerText = text;
    }
}

タグ: javascript

ページ 1 / 1 (3 アイテム)

@Prog! - ASP.NET(C#) AJAX -