2

次の aspx ページがあります。

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs" Inherits="KezberProjectManager.WebForm2" %>

<!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></title>
     <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<style>
h1 { padding: .2em; margin: 0; }
#products { float:left; width: 500px; margin-right: 2em; }
#cart { width: 200px; float: left; margin-top: 1em; }
/* style the list to maximize the droppable hitarea */
#cart ol { margin: 0; padding: 1em 0 1em 3em; }
</style>
<script>
    $(function () {
        $("#catalog").accordion();
        $("#catalog li").draggable({
            appendTo: "body",
            helper: "clone"
        });
        $("#cart ol").droppable({
            activeClass: "ui-state-default",
            hoverClass: "ui-state-hover",
            accept: ":not(.ui-sortable-helper)",
            drop: function (event, ui) {
                $(this).find(".placeholder").remove();
                $("<li></li>").text(ui.draggable.text()).appendTo(this);
            }
        }).sortable({
            items: "li:not(.placeholder)",
            sort: function () {
                // gets added unintentionally by droppable interacting with sortable
                // using connectWithSortable fixes this, but doesn't allow you to customize active/hoverClass options
                $(this).removeClass("ui-state-default");
            }
        });
    });
</script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <div id="products">
                <h1 class="ui-widget-header">Products</h1>
                <div id="catalog">
                    <h2><a href="#">T-Shirts</a></h2>
                    <div>
                        <ul>
                            <li>Lolcat Shirt</li>
                            <li>Cheezeburger Shirt</li>
                            <li>Buckit Shirt</li>
                        </ul>
                    </div>
                    <h2><a href="#">Bags</a></h2>
                    <div>
                        <ul>
                            <li>Zebra Striped</li>
                            <li>Black Leather</li>
                            <li>Alligator Leather</li>
                        </ul>
                    </div>
                    <h2><a href="#">Gadgets</a></h2>
                    <div>
                        <ul>
                            <li>iPhone</li>
                            <li>iPod</li>
                            <li>iPad</li>
                        </ul>
                    </div>
                </div>
            </div>
            <div id="cart">
                <h1 class="ui-widget-header">Shopping Cart</h1>
                <div class="ui-widget-content">
                    <ol>
                        <li class="placeholder">Add your items here</li>
                    </ol>
                </div>
            </div>

        </div>
    </form>
</body>
</html>

http://jqueryui.com/droppable/#shopping-cartから取得

私はasp.netを使用しています。アイテムを追加するたびにサーバーに通知し、アイテムをショッピング カートにドロップした後に実行される aspx コードを使用できるように、これを変更する方法を考えています。

次のようなことができるようにするには、どうすればよいですか。

public partial class WebForm1 : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
    }  

     protected void Item_Dropped(String itemName)
    {
    }  
}

基本的に、ページを更新せずに、このアイテムをデータベースに追加するなど、サーバー上で何かを実行できるようにするためです。

asp .netでこの種のことを行う方法の例はありますか?

ありがとう

4

1 に答える 1

2

この質問を見てください-ページにファイルをドロップするときにjavascriptイベントを実装する方法を理解するのに役立ちます。

このようなイベントがある場合は、このイベントでajax呼び出しをバインドし、このイベントが発生するたびにajax呼び出しをサーバーに送信します。

状態の転送、ページの再読み込みなど、関連するすべてのものを含むサーバーへのasp.net要求ではなく、必要なデータのみを使用した軽量の非同期呼び出しです。標準のポストバックが必要な場合__doPostBack()は、asp.netによって生成されるjavascript関数を呼び出します。

于 2013-01-24T22:34:28.403 に答える