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

HTML button sending input text data to ASP side

本文关键字：ASP 数据 按钮 输入 文本 HTML      更新时间：2023-09-26

我正在进行一个团队项目，并试图了解ASP.net（我的团队中几乎没有人知道，包括我）。我的工作是制作一些文本框和按钮，这样，当单击按钮时，文本框中的文本将被处理并发布，前提是它具有<=140个字符。

我尝试编写一些jQuery，检查文本框中的文本，然后将其发送到服务器进行处理。如果长度不超过140个字符，则服务器将其保存到数据库中，并将其发布到页面（将再次检查）。

不幸的是，我遇到了这个错误。我试着联系我的团队成员，但他们忙于其他问题。这是我的代码：

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中吗？）我不知道在这里该怎么办。。。

代码不会将数据发布到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>

为了触发点击事件将数据发布到服务器上（codebehind），您需要将属性OnClick添加到按钮中。

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

在codeehind（*.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
    }
相关文章：