将输入文本数据发送到 ASP 端的 HTML 按钮

Question

我正在从事一个小组项目，并试图弄清楚 ASP.net（我小组中几乎没有人知道它，包括我在内）。我的工作是制作一些文本框和按钮，这样，当单击按钮时，如果文本框中的文本

我尝试编写一些 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 元素。为了将 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.
       }
    }

}

更新：

要使用 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（代码隐藏）=>

[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
    }