【发布时间】：2020-03-26 15:27:17
【问题描述】：
由于新冠危机，我和我的朋友们不能见面，所以我想和他们玩个小游戏。每个人都可以在我的网站上移动一个对象，当页面重新加载时，将显示该对象的最新位置。
我正在我的服务器上使用 asp.net c#。使用 JQuery，我制作了一个可拖动的 img，现在我想将该对象的位置保存到我的 mssql 服务器。我阅读了一些博客并尽我所能使其工作，但不知何故我被卡住了......这是我的代码：
在 .aspx 网络表单上：
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Prototyp.aspx.cs" Inherits="Login_Website_Neu.Prototyp" %>
<!DOCTYPE html>
<script src="Scripts/modernizr-2.8.3.js" type="text/javascript">></script>
<script src="Scripts/jquery-ui.js" type="text/javascript">></script>
<script src="Scripts/jquery-3.3.1.slim.min.js" type="text/javascript">></script>
<script src="Scripts/jquery-3.3.1.slim.js" type="text/javascript">></script>
<script src="Scripts/jquery-3.3.1.min.js" type="text/javascript">></script>
<script src="Scripts/jquery-3.3.1.js" type="text/javascript">></script>
<script src="Scripts/jquery-3.3.1.intellisense.js" type="text/javascript">></script>
<script src="Scripts/jquery-ui-1.12.1.js" type="text/javascript">></script>
<script src="Scripts/jquery-ui-1.12.1.min.js" type="text/javascript">></script>
<script src="Scripts/bootstrap.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) {
//nachricht(ui.offset.left, ui.offset.top, $('#d1').attr('id'));
saveCoords(ui.absolutePosition.left, ui.absolutePosition.top, $('#test').attr('id'));
$("#d1").css("opacity", "1.0"); // Full opacity when stopped
},
cursor: "move"
});
});
//function nachricht(x, y, i) {
// alert(x + ' test ' + y + i)
//}
function saveCoords(x, y, el, id) {
$.ajax({
type: "POST",
url: "Prototyp.aspx.cs/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>
<body>
<form id="form1" runat="server">
<div>
<img src="Bilder/Mustard.png" alt="" id="d1" width="30" height="30" runat="server" />
</div>
</form>
</body>
在 aspx.cs 代码隐藏中
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.Services;
using System.Web.Script.Services;
using System.Data.SqlClient;
using System.Data;
using System.Web.UI.HtmlControls;
using System.Configuration;
namespace Login_Website_Neu
{
public partial class Prototyp : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
}
/// <summary>
/// Summary description for SaveCoords
/// </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.
[ScriptService]
public class Coordinates : WebService
{
[WebMethod]
public int SaveCoords(int x, int y, string element, int userid)
{
string connect = ConfigurationManager.ConnectionStrings["DarfAlles"].ConnectionString;
int result = 0;
using (SqlConnection conn = new SqlConnection(connect))
{
string query = "UPDATE [Benutzerdefinierte_Kader].[dbo].[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 = ConfigurationManager.ConnectionStrings["DarfAlles"].ConnectionString;
using (SqlConnection conn = new SqlConnection(connect))
{
string query = "SELECT xPos, yPos, Element FROM [Benutzerdefinierte_Kader].[dbo].[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;
}
}
}
public partial class PersistDraggable : Page
{
protected void Page_Load(object sender, EventArgs e)
{
Coordinates coords = new Coordinates();
DataTable dt = coords.GetSavedCoords(1);
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");
}
}
}
}
}
}
【问题讨论】：
-
您不应同时添加
.min.js和.js文件，它们包含相同的javascript 函数。您可以查看developers.google.com/speed/docs/insights/MinifyResources -
非常感谢您的回答！我将删除其中一个！不知何故，我拖动的对象在第一滴停止。所以我认为 saveCoords 中一定有其他问题。您有什么想法或建议吗？
-
我认为将变量从 AJAX 传递到 Code Behind 时一定有问题。有人可以同意吗？谢谢！
标签： javascript c# jquery html asp.net