值傳遞從JavaScript到代碼隱藏

我新的ASP.NET值傳遞從JavaScript到代碼隱藏

我想要實現對網站..

平局（添加），一些要點。（點數：取決於用戶★）
用戶將這些點移動到灰色框內
將這些點的位置（頂部，左邊）上傳到數據庫中。

我明白如何添加拖動點並獲得這些點的協調。

而且我想知道..

如何通過一些值，而不重新加載頁面以代碼隱藏的部分。
如何傳遞值並在不知道有多少值的情況下使用這些值。

你能給我一些建議或關於我的問題的鏈接嗎？

預先感謝您。

這是我的代碼。

您可以在這裏（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>

來源

2013-10-18 user2423434

發送內容到代碼後面需要回發。閱讀他們asp是所有關於這個想法（例如http://stackoverflow.com/questions/183254/what-is-a-postback） – megawac

你聽說過AJAX？使用jquery ajax或類似的 – Patel

我使用jQuery ajax方法。將我的數據轉換爲JSON格式併發送代碼隱藏的WebMethod。並使用List <> Type獲取參數。 – user2423434

您需要使用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

來源

2013-10-20 10:06:48

我非常感謝你的幫助。 – user2423434

它不可能看看這個訪問來自代碼隱藏一個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以及

來源

2013-10-18 06:43:03

我感謝您的幫助。 – user2423434

你可以使用AJAX的部分回發即不刷新整個頁面

例如使用上面的代碼jQuery的AJAX

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

會讓reequest你的Default.aspx頁面，並通過它您可以訪問代碼隱藏

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

來源

2013-10-18 06:48:16 Patel

非常感謝你。我還有一個問題。在代碼隱藏頁面中，我不知道傳遞了多少數據。在這種情況下，如何將值保存在變量中？ – user2423434

什麼意思是「我不知道有多少數據通過」？ – Patel

用戶可以動態添加點數。點數不設置。 – user2423434

值傳遞從JavaScript到代碼隱藏

回答

相關問題