Call C# method from javascript drag and drop event

Question

I have the following jQuery which does drag and drop -

<script>
    $(function () {
        $(".draggable").draggable({
            helper: "clone"
        });
        $(".drag-div").droppable({
            accept: ".draggable",
            tolerance: "pointer",
            activeClass: "drop-here",
            hoverClass: "drop-here-hover",
            drop: function (event, ui) {
                $.fancybox({
                    href: '#add-quantity'                            
                });
            }
        });
    });
</script>

I need to be able to get the text value of what I have just dragged and dropped, then call a C# method which requires that parameter to alter a database table. How can I do this?

Thanks.

Answer 1

You need to create a web service method, you can do this in your same page and then use ajax to call this method. Here is a sample of this:

• Web Method Sample
• calling asmx web service method with jquery ajax

Answer 2

您需要使用Jquery Ajax，然后创建一个asmx或WebApi。

Answer 3

Are you using asp.net mvc? I think you could look for SignalR to do that.

So, if you think is to much, the simplest way could be to create one like ondrop.aspx and call it by some ajax method:

<script>
    $(function () {
        $(".draggable").draggable({
            helper: "clone"
        });
        $(".drag-div").droppable({
            accept: ".draggable",
            tolerance: "pointer",
            activeClass: "drop-here",
            hoverClass: "drop-here-hover",
            drop: function (event, ui) {

                var $div = $(ui.draggable); // here access the dragging div
                var param = $div.text();
                $.post('ondrop.aspx', { someparam: param }).done(function (e) {
                    console.log(e);
                });

                $.fancybox({
                    href: '#add-quantity'                            
                });
            }
        });
    });
</script>

See? In that point you have access to the dragging element, and you just have to select wich attribute you will need and then make a ajax call to some .aspx page. So you treat that page using Request.Form["someparam"]; and result a clean json from that.