Postback after drag and drop?

Question

I have the following aspx page:

<%@ 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>

taken from http://jqueryui.com/droppable/#shopping-cart

I'm using asp .net. I'm wondering how I could modify this so that I could notify the server everytime I add an item and to be able to have some aspx code that is ran after I drop an item into my shopping cart.

What would I need to do to be able to have something like:

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

     protected void Item_Dropped(String itemName)
    {
    }  
}

Essentially so that I could do something on the server like add this item to a database, without refreshing the page.

Are there any examples on how to do this sort of thing in asp .net?

Thanks

score 2 · Accepted Answer · edited May 23 '17 at 12:12

Take a look at this question - it will help you to understand how to implement javascript event when droping file on your page.

When you have such event, then you just bind ajax call on this event and each time when this event fire sending ajax call to the server.

It will not be asp.net request to server with all related stuff like transfering states, page reloading and so on, just a lightweight async call only with the data you need. If you want to have standard postback, call __doPostBack() javascript function which is generated by asp.net.

Postback after drag and drop?

1 Answers1