Question

我是ASP.NET新手

我想实现关于..的网站

绘制（添加）一些点。（分数：取决于用户★）
用户在灰色框内移动这些点
将这些点的位置（顶部，左侧）上传到数据库中。

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

我想知道..

如何在没有重新加载页面的情况下将一些值传递给代码隐藏部分。
如何传递值并使用它们而不知道它有多少值。

你能就我的问题给我一些建议或一些联系吗？

提前谢谢。

这是我的代码。

您可以在此处查看此内容（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>

Answer 1

你可以使用AJAX进行部分回发，即不刷新整个页面

e.g。使用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页面进行reequest并传递您可以访问的数据，如下面的代码隐藏

string value1 = Request["data1"].ToString();

Answer 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 examples for the beginner

Answer 3

在没有任何服务器控件帮助的情况下，无法从代码隐藏中访问js变量。您可以将页面重定向到自身并将该值作为URL参数传递（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

将值从javascript传递给Code Behind

3 个答案: