Я работаю над «игрой», в которую я хочу играть со своими друзьями на моей веб-странице. Поэтому мне нужно перемещать изображения, сохранять позицию и показывать последнюю позицию всем, кто посещает веб-сайт с той же самой позиции. чтобы добиться этого, я использую этот код:
aspx:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Prototyp.aspx.cs" Inherits="Login_Website_Neu.Prototyp" %>
<!DOCTYPE html>
<meta http-equiv="refresh" content="5">
<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.intellisense.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) {
saveCoords(ui.position.left, ui.position.top, $('#d1').attr('id'));
$("#d1").css("opacity", "1.0"); // Full opacity when stopped
},
cursor: "move"
});
$("#d2").draggable(
{
drag: function (event, ui) {
$("#d2").css("opacity", "0.6"); // Semi-transparent when dragging
},
stop: function (event, ui) {
saveCoords(ui.position.left, ui.position.top, $('#d2').attr('id'));
$("#d2").css("opacity", "1.0"); // Full opacity when stopped
},
cursor: "move"
});
$("#d3").draggable(
{
drag: function (event, ui) {
$("#d3").css("opacity", "0.6"); // Semi-transparent when dragging
},
stop: function (event, ui) {
saveCoords(ui.position.left, ui.position.top, $('#d3').attr('id'));
$("#d3").css("opacity", "1.0"); // Full opacity when stopped
},
cursor: "move"
});
$("#d4").draggable(
{
drag: function (event, ui) {
$("#d4").css("opacity", "0.6"); // Semi-transparent when dragging
},
stop: function (event, ui) {
saveCoords(ui.position.left, ui.position.top, $('#d4').attr('id'));
$("#d4").css("opacity", "1.0"); // Full opacity when stopped
},
cursor: "move"
});
$("#d5").draggable(
{
drag: function (event, ui) {
$("#d5").css("opacity", "0.6"); // Semi-transparent when dragging
},
stop: function (event, ui) {
saveCoords(ui.position.left, ui.position.top, $('#d5').attr('id'));
$("#d5").css("opacity", "1.0"); // Full opacity when stopped
},
cursor: "move"
});
});
function saveCoords(x, y, el, userid) {
$.ajax({
type: "POST",
url: "Prototyp.aspx/SaveCoords",
data: "{x: '" + x + "', y: '" + y + "', element: '" + el + "', userid: '1'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
// if '1', it means that the insert is successful.
console.log(response);
},
error: function (response) {
alert(response.responseText);
}
});
}
window.setInterval(function(){
/// call your function here
}, 5000);
</script>
<body>
<form id="form1" runat="server">
<p> </p>
<p> </p>
<p><img id="Spielbrett" src="Bilder/tablegame2.png" width="1440" height="800"> </p>
<div>
<img src="Bilder/felix.png" alt="" id="d1" width="130" height="110" runat="server" />
<img src="Bilder/pascal.png" alt="" id="d2" width="97" height="82" runat="server" />
<img src="Bilder/philip.png" alt="" id="d3" width="97" height="82" runat="server" />
<img src="Bilder/robin.png" alt="" id="d4" width="97" height="82" runat="server" />
<img src="Bilder/simon.png" alt="" id="d5" width="130" height="110" runat="server" />
</div>
</form>
</body>
<style>
</style>
код позади:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
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;
using System.Web.UI;
using System.Diagnostics;
namespace Login_Website_Neu
{
public partial class Prototyp : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
SetCoordsForElement();
}
[WebMethod]
public static int SaveCoords(int x, int y, string element, int userid)
{
string sql = "UPDATE [Benutzerdefinierte_Kader].[dbo].[Coords_] SET xPos = @xPos, yPos = @yPos WHERE element = @Element AND UserID = @UserID";
SqlParameter[] parameters = {
new SqlParameter("@xPos", x),
new SqlParameter("@yPos",y),
new SqlParameter("@element", element),
new SqlParameter("@userid", userid)
};
return ExecuteNonQuery(sql, parameters);
}
public void SetCoordsForElement()
{
string sql = "SELECT xPos, yPos, Element FROM [Benutzerdefinierte_Kader].[dbo].[Coords_] WHERE UserID = @UserID ORDER BY UserID DESC";
SqlParameter[] parameters = { new SqlParameter("@UserID", 1) };
DataTable dt = SelectFromDatabase(sql, parameters);
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");
}
}
}
public static DataTable SelectFromDatabase(string sql, SqlParameter[] parameters)
{
string constr = ConfigurationManager.ConnectionStrings["DarfAlles"].ConnectionString;
using (SqlConnection con = new SqlConnection(constr))
{
using (SqlCommand cmd = new SqlCommand(sql, con))
{
if (parameters != null)
{
cmd.Parameters.AddRange(parameters);
}
using (SqlDataAdapter sda = new SqlDataAdapter(cmd))
{
DataTable dt = new DataTable();
sda.Fill(dt);
return dt;
}
}
}
}
public static int ExecuteNonQuery(string sql, SqlParameter[] parameters)
{
// -1 means the query is not successful
int result = -1;
string constr = ConfigurationManager.ConnectionStrings["DarfAlles"].ConnectionString;
using (SqlConnection conn = new SqlConnection(constr))
{
try
{
conn.Open();
using (SqlCommand cmd = new SqlCommand(sql, conn))
{
if (null != parameters)
{
cmd.Parameters.AddRange(parameters);
}
result = cmd.ExecuteNonQuery();
}
}
catch (SqlException ex)
{
Debug.WriteLine(ex.ToString());
}
finally
{
conn.Close();
}
}
return result;
}
}
}
Работает нормально, но для просмотра последней позиции перетаскиваемого Пункты d1-d5 Мне нужно перезагрузить страницу, сейчас я делаю это в метаданных. Итак, мой вопрос, есть ли решение, как этого добиться без необходимости каждый раз перезагружать страницу? И как? Я читал некоторые статьи об updatepanel или запускал веб-метод каждый раз, когда меняются данные в базе данных sql. как бы ты это сделал? Я довольно новичок во всем этом, пожалуйста, будьте вежливы: ie: -)
Спасибо!
С наилучшими пожеланиями, Саймон