• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1500
  • Last Modified:

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.
0
dipster307
Asked:
dipster307
  • 6
  • 5
4 Solutions
 
Julian HansenCommented:
// Here is one way of doing it.

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

Open in new window


Thenin your php file
$list = htmlentities($_POST['list']);
// Save to db here.

Open in new window

0
 
dipster307Author Commented:
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

0
 
Julian HansenCommented:
Not the second bit - sorry had my PHP hat on. Also there was an error in the script the .post should not be inside the .each loop.

what you can do is this
var list ;
$("#cart ol li").each(function() {
   list += '&list=' + $(this).html();
} 
$.post('theasppage.aspx?save=1'+list);

Open in new window


Then in your aspcode
...
  string[] list = Request.QueryString.GetValues("list");
...

Open in new window

0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
dipster307Author Commented:
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?????
0
 
Julian HansenCommented:
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

0
 
dipster307Author Commented:
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.
0
 
Julian HansenCommented:
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?
0
 
dipster307Author Commented:
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

0
 
Julian HansenCommented:
If you debug through the code to the

string[] list ....

Is list being assigned the values - if so then the solution is working.

lblOutput - I don't have the rest of your code but that is out of scope of thise request.

If list is being popuplated with the values from your page then the next step is to proceed and save those values to the DB.
0
 
dipster307Author Commented:
in the end, I thought about about was going on, basically storing the selected items in array, in jquery, so I did the lines below. At the same time I put all the values in the array into an input box on the html page. So I can see the selected list on the html page.

I can now access the selected items in C# (back page coding), to store the information into the database. or xml file. which can be used on the next tab page.

The C# coding reads the input box and collects the items as they are seperated by ",".


             var arrV2 = [];
                  arrV2.push(ui.draggable.text());
                    $('#postOrder').val(arrV2.join(','));

Open in new window

0
 
dipster307Author Commented:
The answer was not a clear solution, I had to do some work around. Also work some things out myself.
0

Featured Post

Become an Android App Developer

Ready to kick start your career in 2018? Learn how to build an Android app in January’s Course of the Month and open the door to new opportunities.

  • 6
  • 5
Tackle projects and never again get stuck behind a technical roadblock.
Join Now