asked on

How save my drag & drop list in in asp.net

I have the code below, I am using asp.net in c#. How do I save my selection after dragging and dropping.

<head>
<script type='text/javascript'>//<![CDATA[
    $(window).load(function () {
        $(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())
                .addClass("cart-item")
                .appendTo(this);
                }
            }).sortable({
                items: "li:not(.placeholder)",
                sort: function () {
                    $(this).removeClass("ui-state-default");
                }
            });
            $("#catalog ul").droppable({
                drop: function (event, ui) {
                    $(ui.draggable).remove();
                },
                hoverClass: "ui-state-hover",
                accept: '.cart-item'
            });
        });
    });//]]>  
</head>

<body>
<div id="divDragDropJQUERY" style="display:block;width:750px;height:400px;float:left;border:1px solid black;" runat="server">

<div id="products" style="float:left;">
	<h1 class="ui-widget-header">Products</h1>	
	<div id="catalog">
		<div>
			<ul>
				<li style="background-image:url('images/Pension.jpg');background-repeat: no-repeat;width:210px;height:50px;"><b style="visibility:hidden;">Pension</b></li>
				<li style="background-image:url('images/Life.jpg');background-repeat: no-repeat;width:210px;height:50px;"><b style="visibility:hidden;">Life Assurance</b></li>
				<li style="background-image:url('images/Life.jpg');background-repeat: no-repeat;width:210px;height:50px;"><b style="visibility:hidden;">Life Assurance</b></li>
			</ul>
		</div>
	</div>
</div>

<div id="cart" style="float:right;">
	<h1 class="ui-widget-header">Shopping Cart</h1>
	<div id="divListID" class="ui-widget-content" runat="server">
		<ol id="listID" style="height:375px;" runat="server" autopostback="true">
			<li class="placeholder">Add your items here</li>
		</ol>
	</div>
</div>

    <div style="float:right;">
        <asp:Button ID="btnLogin" runat="server" Text="Save" CssClass="btnStyle" OnClick="btnSave_OnClick" />
    </div>

</div>

</body>

Open in new window

So Basic after dragging the items, I want to click on save, which saves the new list in sql. I dont know how to get the elements and the values in order to save it in sql. I am using Jquery, and c#.

Can someone please help, I tried google so many things, but not getting anywhere.

ASKER CERTIFIED SOLUTION

Julian Hansen

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

dipster307

ASKER

Will this work for asp.net C#. So do I post to asp page?

var list ;
$("#cart ol li").each(function() {
   list += 'list[' + $(this).html() + ']&';
   $.post('theasppage.aspx '+list);
}

Open in new window

and then in the aspx page

$list = htmlentities($_POST['list']);

Open in new window

SOLUTION

Julian Hansen

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

dipster307

ASKER

So the page I am using is called "SelectBenefits.aspx". I have added the code below in the HEAD tag

<script type='text/javascript'>//<![CDATA[
    $(window).load(function () {
        $(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()).addClass("cart-item").appendTo(this);
                }
            }).sortable({
                items: "li:not(.placeholder)",
                sort: function () {
                    $(this).removeClass("ui-state-default");
                }
            });
            $("#catalog ul").droppable({
                drop: function (event, ui) {
                    $(ui.draggable).remove();
                },
                hoverClass: "ui-state-hover",
                accept: '.cart-item'
            });
            var list;
            $("#cart ol li").each(function () {
                list += '&list=' + $(this).html();
                $.post('SelectBenefits.aspx?save=1 ' + list);
            });
        });
    });//]]>  

</script>

Open in new window

Then in the same coding ie "SelectBenefits.aspx.cs", on the c# page I have done the following:

        protected void Page_Load(object sender, EventArgs e)
        {
               string[] list = Request.QueryString.GetValues("list");

               for (int i=0; i<list.Length; i++)
               {
                  lblOutput2.text = list[i] ;
                }
        }

Open in new window

The coding above I am posting it back to the same page, can this be done??

I tried but it doesnt work?????

Julian Hansen

try putting your code inside a

if (!IsPostBack) {
 ....
// Check here for a post from your AJAX call - check if the save param exists with a value 1
// if it does then process your list
}

Open in new window

dipster307

ASKER

I try the Ispostback, didnt work.

Any other ideas.

I want a drap and drop and saiving the drop list in sql database.

Can anyone provide good ideas on how or some how fit my coding.

Julian Hansen

When you say it does not work - do you get an error?

I knocked up a simple app with the code I posted before - it comes through correctly.

Have you tried using Firebug with Firefox to see what is being sent to the server and what is being returned?

dipster307

ASKER

i get the following error

Object reference not set to an instance of an object. :lblOutput2 FAILED:

I have done this:

            if (!IsPostBack)
            {

                try
                {
                    string[] list = Request.QueryString.GetValues("list");

                    for (int i = 0; i < list.Length; i++)
                    {
                        lblOutput2.Text = list[i];
                    }
                }
                catch (Exception ex)
                {
                    lblOutput2.Text = "<br/>" + ex.Message + " :lblOutput2 FAILED: <br/>";
                }
}

Open in new window

SOLUTION

Julian Hansen

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

SOLUTION

dipster307

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.