發送輸入文本數據到ASP端的HTML按鈕

Question

我正在開發一個組項目，並試圖找出ASP.net（很少有人在我的組中知道它，包括我）。我的工作是創建一些文本框和按鈕，以便當點擊該按鈕時，文本框中的文本將被處理併發布，如果它有< = 140個字符。

我試着編寫一些jQuery來檢查文本框中的文本，然後將它發送到服務器進行處理。服務器將其保存到數據庫，並將其發佈到頁面，如果它不超過140個字符（將再次檢查）。

不幸的是，我遇到了this錯誤。我試圖聯繫我的團隊成員，但他們忙於處理其他問題。這裏是我的代碼：

Feed.aspx：

<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Feed.aspx.cs" Inherits="Feed_Feed" %> 

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server"> 
</asp:Content> 
<!-- This is here for test purpose --> 
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script> 
<script type="text/javascript" language="javascript"> 
    $(document).ready(
     function() 
     { 
      $('#TweetButton').click(
       function() 
       { 
        // get the text from the TweetBox 
        var status = $('#TweetBox').val(); 
        // if it is 140 characters or less 
        if (status.length <= 140) 
        { 
         var data = JSON.stringify(status); 
         // send to the server page 
         $.ajax({ 
          url: '/Feed.aspx.cs', 
          type: 'POST', 
          dataType: 'json', 
          data: data, 
          success: function(myStatus) 
          { 
           $('#MyStatus').html(myStatus); 
          } 
         }); 
        } 
        else 
        { 
         alert("Tweet should contain no more than 140 characters"); 
        } 
       }); 
     }); 
</script> 
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server"> 
    <h1>User Feed</h1> 
    <p> 
     <input id="TweetBox" type="text" /><input id="TweetButton" type="button" value="button" /> 

    </p> 
    <div id="MyStatus"></div> 
</asp:Content> 
<asp:Content ID="Content3" ContentPlaceHolderID="LeftContent" Runat="Server"> 
</asp:Content> 

Feed.aspx.cs

using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Web; 
using System.Web.UI; 
using System.Web.UI.WebControls; 

public partial class Feed_Feed : System.Web.UI.Page 
{ 
    protected void Page_Load(object sender, EventArgs e) 
    { 

    } 

} 

C＃的文件實際上是空的，因爲我不知道如何處理的數據是張貼到頁面（應該在Page_Load？）我不知道該怎麼辦...

Answer 1

該代碼不會發布數據到asp.net服務器，因爲您只是使用普通的HTML元素NTS。爲了一個HTML元素轉換爲asp.net元素，你需要使用屬性runat="server"，使您的標記將成爲：

<input id="TweetBox" type="text" runat="server" /><input id="TweetButton" type="button" value="button" runat="server" /> 

或者，使工作更簡單，對asp.net控制更多的靈活性（如訪問其他屬性），您應該嚴格使用asp.net核心控件。所以，你的新的標記將如下所示：

<asp:TextBox id="TweetBox" runat="server"></asp:TextBox> 
<asp:Button id="TweetButton" runat="server"></asp:Button> 

爲了觸發點擊事件發佈數據到服務器（代碼隱藏），你需要的屬性OnClick添加到您的按鈕。

<asp:Button id="TweetButton" runat="server" OnClick="TweetButton_Click"></asp:Button> 

在代碼隱藏（* .aspx.cs），你需要處理由按鈕觸發事件，並檢查該文本的長度。

public partial class Feed_Feed : System.Web.UI.Page 
{ 
    protected void Page_Load(object sender, EventArgs e) 
    { 

    } 

    protected void TweetButton_Click(object sender, EventArgs e) 
    { 
     if(TweetBox.Text.Length <= 140) 
     { 
     // Save data in the database. 
     } 
    } 

} 

UPDATE：

要使用Ajax的工作，你需要asp.net控制，所以您的標記將

.ASPX =>

<input id="TweetBox" type="text" /> 
<input id="TweetButton" type="button" value="button" /> 



<script> 
    $().ready(function() 
    { 
    $('#TweetButton').click(function(){ 
         // if it is 140 characters or less 
         if (status.length <= 140) 
         { 
          // send to the server page 
          $.ajax({ 
           url: '/Feed.aspx/SubmitTweet', 
           type: 'POST', 
           dataType: 'json', 
            data: "{'tweet':'" + $('#TweetBox').val() + "'}", 
           success: function(myStatus) 
           { 
            $('#MyStatus').html(myStatus.d); 
           }, 
           error : function(er) 
           { 

           } 
          }); 
         } 
         else 
         { 
          alert("Tweet should contain no more than 140 characters"); 
         } 
        }); 

    }); 
</script> 

.ASPX .CS（code-behind）=>

[WebMethod] 
    public static string SubmitTweet(string tweet) 
    { 
     // dummy function : 
     return DataSubmit(tweet) ? "Data Was submitted" : "Error while submitting data"; 
    } 

    public bool DataSubmit(string data) 
    {   
     //call db connection and save the tweet 
     // if successful , return true else false 
    }