3

我是 ASP.NET 的新手

我想实施关于..

  1. 绘制（添加）一些点。（点数：因用户而异★）
  2. 用户在灰色框中移动这些点
  3. 将这些点的位置（顶部，左侧）上传到数据库中。

我了解如何添加可拖动点并协调这些点。

我想知道..

  1. 如何在不重新加载页面的情况下将一些值传递给代码隐藏部分。

  2. 如何在不知道有多少价值的情况下传递和使用这些价值。

你能给我一些建议或一些关于我的问题的链接吗？

先感谢您。

这是我的代码。

你可以在这里查看（http://jsfiddle.net/crisply/mQYVY/21/）

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="jQueryDraggable.aspx.cs" Inherits="WebPage.Tests.jQueryDraggable" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script type="text/javascript" src="../Scripts/jquery-1.8.2.js"></script>
    <script type="text/javascript" src="../Scripts/jquery-ui-1.8.24.js"></script>

    <style type="text/css">
        .draggable {
            position: absolute;
            width: 10px;
            height: 10px;
            background: green;
            cursor: move;
        }
        .canvas {
            width: 500px;
            height: 400px;
            background: #ccc;
            position: relative;
            margin: 2em auto;
        }
        #results {
            text-align: center;
        }
    </style>

<script type='text/javascript'>
    //<![CDATA[ 
    $(function () {
        var index = 1;

        $(".draggable").draggable({
            containment: "parent",
        });

        $('#btn_add').click(function () {
            var pointID = "Point" + (index++);
            var top = Math.floor(Math.random() * 501);
            var left = Math.floor(Math.random() * 401);
            drawPoint(pointID, top, left);
        });

        $('#btn_getCoord').click(function () {
            writeCoordination();
        });

        $('#btn_erase').click(function () {
            eraseAllPoint();
            writeCoordination();
        });

        function drawPoint(pointId, top, left) {
            var htmlData = $('<div class="draggable" id=' + pointId + '>' + pointId + '</div>');
            htmlData.css({ 'left': top + 'px', 'top': left + 'px' });
            $('.canvas').append(htmlData);
            $(".draggable").draggable({ containment: "parent" });
        }

        function writeCoordination() {
            var output = '-Coordination-';
            $('.draggable').each(function () {
                output += '<br />' + $(this).attr("id") + ' => x: ' + $(this).position().left + ', y: ' + $(this).position().top;
            });
            $('#results').html(output);
        }

        function eraseAllPoint() {
            $('.canvas').html('');
        }
    });
    //]]>  
</script>

</head>

<body>
    <form id="form1" runat="server">
        <div class="canvas">
            <div class="draggable" id="Point0">Point0</div>
        </div>
        <div id="results">coordination</div>
        <input type='button' id="btn_add" value='Add box' />
        <input type='button' id="btn_getCoord" value="Get Coornination" />
        <input type='button' id="btn_erase" value='Erase All' />

        <asp:Button ID="btn_submit" runat="server" Text="Upload" />
    </form>
</body>
</html>
4

3 回答 3

3

您可以使用 AJAX 进行部分回发，即无需刷新整个页面

例如使用 jquery ajax

$.ajax({
        url: 'default.aspx',
        data: 'data1=value1&data2=value2&data3=value3',
        type: 'POST',
        success: function (resp) {
//request sent and response received.
        }
      });

上面的代码将对您的 default.aspx 页面进行重新请求，并传递您可以在代码隐藏中访问的数据，如下所示

string value1 = Request["data1"].ToString();
于 2013-10-18T06:48:16.413 回答
2

为此，您需要使用 AJAX。

这是最简单的可行示例，但这只是为了让您入门。为了演示的目的，我把它过分简化了，它的质量并不高。

Javascript代码

发送数据的更好方法是通过 POST，因为 GET 限制为大约 2000 个字符。

此外，格式化数据点的更好方法是通过 JSON。我在下面展示的并不是最佳实践；）

<script type="text/javascript">
    var xmlHttpRequest;

    function PostData() {            

        //create XMLHttpRequest object
        xmlHttpRequest = (window.XMLHttpRequest) ?  new XMLHttpRequest() : new ActiveXObject("Msxml2.XMLHTTP");

        //If the browser doesn't support Ajax, exit now
        if (xmlHttpRequest == null)
            return;

        //Prepare your data points so they are in the format X1-Y1-X2-Y2-X3-Y3
        pointData = "21-12-51-23-54-125-154-315-245-21"

        //Initiate the XMLHttpRequest object
        xmlHttpRequest.open("GET", "http://foo.com/Page.aspx?Points=" + pointData, true);                       

        //Send the Ajax request to the server with the GET data
        xmlHttpRequest.send(null);
    }
</script>

C# code on the server

protected void Page_Load(object sender, EventArgs e)
{
    if (Request.QueryString["Points"] != null)
    {
        string rawData = Request.QueryString["Points"];

        string []points = rawData.Split(new string[] { "-" }, StringSplitOptions.None);

        //continue parsing these to Ints and more...
    }
}

这里有一些教程和资源，可以帮助您进一步完善它

http://www.codeproject.com/Articles/31155/Ajax-Tutorial-for-Beginners-Part-1

面向初学者的 ASP .NET Ajax 示例

于 2013-10-20T10:06:48.307 回答
0

如果没有服务器控件的任何帮助，就无法从代码隐藏中访问 js 变量。您可以将页面重定向到自身并将该值作为 URL-Parameter(window.location.href = window.location.href + "?value=test";) 传递。但我认为这不是你想要的，因为它会强制回发。所以最好的方法是使用隐藏字段：

一个建议是使用 hiddenfiled，如下所示。

<script type="text/javascript">
    function Foo(){
        var hidden=document.getElementById('hidValue');
        hidden.value="test";
    }
</script>

在 aspx 上：

在后面的代码中

protected HtmlControls.HtmlInputHidden hidValue;

protected void Page_Load(object sender, System.EventArgs e)
{
    dynamic hiddenValue = hidValue.Value;
}

注意：您也可以使用asp :HiddenField

于 2013-10-18T06:43:03.677 回答