сортируемый div с использованием jquery и сохранение его позиции в базе данных - PullRequest
Новая
       3

сортируемый div с использованием jquery и сохранение его позиции в базе данных

0 голосов
/ 09 марта 2012

У меня есть несколько тегов div, и я хочу перетаскивать div на странице, используя jquery, а также хочу сохранить все позиции div в базе данных, которая является sql server.in короче говоря, я хочу создать страницу, такую ​​как igoogle (http://www.google.com/ig).Please helpмне за это.

Вот мой код

.aspx page 

 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="SavePosition.aspx.cs"      Inherits="Position_SavePosition" %>

<!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>
</head>
<body>
<script src="../Jquery/jquery-1.3.2.js" type="text/javascript"></script>
     <%--<script src="../Jq%2002-03-2012/jquery-1.7.1.js" type="text/javascript">      </script>--%>
<script src="../AllJquery-1.8/jquery.ui.core.js" type="text/javascript"></script>
<script src="../AllJquery-1.8/jquery.ui.widget.js" type="text/javascript"></script>
<script src="../AllJquery-1.8/jquery.ui.mouse.js" type="text/javascript"></script>
<script src="../AllJquery-1.8/jquery.ui.draggable.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function () {
        $("#d1").draggable(
{
    drag: function (event, ui) {
        $("#d1").css("opacity", "0.6"); // Semi-transparent when dragging
    },
    stop: function (event, ui) {
        //saveCoords(ui.absolutePosition.left, ui.absolutePosition.top, '', ui.helper.attr('id'));
        saveCoords(300, 500, '', 1);
        $("#d1").css("opacity", "1.0"); // Full opacity when stopped
    },
    cursor: "move"
});
    });

    function saveCoords(x, y, el, id) {
        $.ajax({
            type: "POST",
            url: "C:/Users/Poly2/Desktop/Jqueydemo/Coordinates.asmx/SaveCoords",
            data: "{x: '" + x + "', y: '" + y + "', element: '" + el + "', userid: '1'}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (response) {
                if (response.d != '1') {
                    alert('Not Saved!');
                }
            },
            error: function (response) {
                alert(response.responseText);
            }
        });
    }
</script>
<form id="form1" runat="server">
<div id="d1" style="border: 1px solid blue; text-align: center; width: 100px; height: 20px;">
    Move this text
</div>
<%--<img src="submenu-bottom.gif" runat="server" id="d1" />--%>
</form>

.cs page

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data.SqlClient;
using System.Data;
using System.Web.UI.HtmlControls;
public partial class Position_SavePosition : System.Web.UI.Page
{
 protected void Page_Load(object sender, EventArgs e)
{
    Coordinates coords = new Coordinates();
    DataTable dt = new DataTable();
    foreach (DataRow row in dt.Rows)
    {
        HtmlControl ctl = (HtmlControl)this.FindControl(row["element"].ToString());
        if (ctl != null)
        {
            ctl.Style.Add("left", row["xPos"].ToString() + "px");
            ctl.Style.Add("top", row["yPos"].ToString() + "px");
        }
    }
  }
}

Класс веб-службы (Coordinates.cs) 

using System;
using System.Collections.Generic;
using System.Linq;   
using System.Web;
using System.Web.Services;
using System.Data.SqlClient;
using System.Data;

/// <summary>
/// Summary description for Coordinates
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment      the following line. 
// [System.Web.Script.Services.ScriptService]
public class Coordinates : System.Web.Services.WebService
{

//public Coordinates()
//{

//    //Uncomment the following line if using designed components 
//    //InitializeComponent(); 
//}

[WebMethod]
public int SaveCoords(int x, int y, string element, int userid)
{
    string connect = "Data Source=POLY2-PC;Initial Catalog=Test;User ID=sa;Password=sa123";
    int result = 0;
    using (SqlConnection conn = new SqlConnection(connect))
    {
        string query = "UPDATE Coords SET xPos = @xPos, yPos = @yPos WHERE Element = @Element AND UserID = @UserID";
        using (SqlCommand cmd = new SqlCommand(query, conn))
        {
            cmd.Parameters.AddWithValue("xPos", x);
            cmd.Parameters.AddWithValue("yPos", y);
            cmd.Parameters.AddWithValue("Element", element);
            cmd.Parameters.AddWithValue("UserID", userid);
            conn.Open();
            result = (int)cmd.ExecuteNonQuery();
        }
    }
    return result;
}


[WebMethod]

public DataTable GetSavedCoords(int userid)
{
    DataTable dt = new DataTable();
    string connect = "Data Source=POLY2-PC;Initial Catalog=Test;User ID=sa;Password=sa123";
    using (SqlConnection conn = new SqlConnection(connect))
    {
        string query = "SELECT xPos, yPos, Element FROM Coords WHERE UserID = @UserID";
        using (SqlCommand cmd = new SqlCommand(query, conn))
        {
            cmd.Parameters.AddWithValue("UserID", userid);
            SqlDataAdapter da = new SqlDataAdapter(cmd);
            da.Fill(dt);
            return dt;
        }
    }
}

}

Спасибо.

1 Ответ

0 голосов
/ 09 марта 2012

В настоящее время я работаю над CMS в PHP, которая имеет функцию сортировки порядка страниц путем перетаскивания. Следующий код работает с PHP, но я уверен, что вы можете легко переписать его на C # или ASP.net.

JQuery: 

$("#sidebar ul").sortable({
    // When user stop sorting (ie. drops the element in place)
    stop: function(event, ui) {
        // First go through your list to build a array of 
        // your items, in their new order
        var pages = [];
        $(this).children().each(function(index) {
            pages.push({
                'id': $(this).find("a").attr("rel"),
                'order': index
            });
        });
        // Make a PHP call, passing a JSON string of the array we created above
        // I'm using GET but you can use POST too
        $.get("/cms/ajax/set-order.php", {'a': JSON.stringify(pages)}, "json");
    }
});

И PHP: 

[...]
// Fetch the passed JSON string
$pages = @$_GET['a'] or $pages = "a:{}";
// Decode the JSON string into array
$pages = json_decode($pages);
// Loop through each of the pages in the array and update their position
// to their new position passed in the array
foreach($pages as $index=>$page) {
    $database->update(array('order' => $page->order), "id = {$page->id}");
}
[...]

Еще раз, этот пример для сортировки страниц в CMS, но из того, что я могу почерпнуть, ваши не будут отличаться.

Дайте мне знать, если вы хотите, чтобы я объяснил это более подробно.

Удачи.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...