Html Button Sending Input Text Data To Asp Side

I am working on a group project, and am trying to figure out ASP.net (hardly anyone in my group knows it, including me). My job is to make some text box and button such that, when

Solution 1:

The code is not going to post data to the asp.net server because you are just using regular HTML elements. In order to convert an html element to asp.net element, you need to use attribute runat="server", so your markup would become :

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

Alternately, to make the job simpler and have more flexibility on the asp.net controls ( like accessing additional properties ), you should strictly use asp.net core controls. So your new markup would look like :

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

In order to trigger a click event to post data onto the server ( codebehind ), you need to add the attributes OnClick to your button.

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

In the codebehind (*.aspx.cs), you need to handle the event triggered by the button and check for the length of the text.

publicpartialclassFeed_Feed : System.Web.UI.Page
{
    protectedvoidPage_Load(object sender, EventArgs e)
    {

    }

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

}

UPDATE :

To work with ajax, you would need asp.net controls, so your markup would be

.ASPX =>

<inputid="TweetBox"type="text" /><inputid="TweetButton"type="button"value="button" /><script>
    $().ready(function()
    {
    $('#TweetButton').click(function(){
                        // if it is 140 characters or lessif (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]
    publicstaticstringSubmitTweet(string tweet)
    {
        // dummy function :return DataSubmit(tweet) ? "Data Was submitted" : "Error while submitting data";
    }

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