2013-01-24 67 views
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中做這種事情的例子?

感謝

回答

2

看看this question - 它會幫助你瞭解如何在網頁上滴速文件時執行JavaScript事件。

當你有這樣的事件,那麼你只需綁定一個Ajax調用這個事件,每當這個事件發生火災發送Ajax調用服務器。

它不會是asp.net請求服務器與所有相關的東西,如傳輸狀態,頁面重新加載等,只是一個輕量級的異步調用只有你需要的數據。如果您想要標準回發,請撥打__doPostBack()由asp.net生成的javascript函數。