如何在使用jQuery拖放时获取表单控件值

时间:2014-02-04 10:35:16

标签: c# javascript jquery asp.net drag-and-drop

我正在使用jQuery创建一个asp.net拖放应用程序。我有拖放工作和与Windows服务通信。现在,我需要的是能够将我作为参数拖动的文本值传递给Web服务。我出错的任何想法?

我有一个带有文字的转发器控件,名为lbName。 ClientIDMode = Inherit,可见性为false。我需要获取lbName的文本值并将其传递给下面显示的Javascript以传递给Web服务。

由于

<li class="col-xs-5 ingredient draggable"><span>
                                                <asp:Literal ID="lbName" Text='<%# Eval("Name") %>' runat="server"></asp:Literal></span></li>

<script>
    $(function () {
        var webMethod = "http://localhost:53809/WebServices/DragDrop.asmx/GetFoodByName";

        $(".draggable").draggable({ helper: "clone" });

        $(".drag-div").droppable({
            accept: ".draggable",
            tolerance: "pointer",
            activeClass: "drop-here",
            hoverClass: "drop-here-hover",

            drop: function (event, ui) {

                $.ajax({
                        type: "POST",
                        url: webMethod,
                        data: "{'FoodName': '" + $(".draggable").find("lbFoodID").val() + "'}",
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        success: onSuccess,
                        error: onError
                });
            }
        });

        function onSuccess(data, status) {
            $("#lbFoodNamePopup").html(data.d);

            $.fancybox({
                href: '#add-quantity'
            });
        }
        function onError(request, data, status) {
            alert(request.status);
        }

    });
</script>

1 个答案:

答案 0 :(得分:1)

请参阅此fiddle

drop函数中使用:

 var text = $(ui.draggable).find("#lblID").text();
 alert(text);