HTML按钮将输入文本数据发送到ASP端 [英] HTML button sending input text data to ASP side
问题描述
我正在开发一个团队项目，并试图弄清楚ASP.net（我的团队中几乎没有人知道它，包括我）。我的工作是创建一些文本框和按钮，以便当单击该按钮时，文本框中的文本将被处理并发布，如果它具有<= 140个字符。
我试着编写一些jQuery来检查文本框中的文本，然后将它发送到服务器进行处理。服务器将其保存到数据库，并将其发布到页面，如果它不超过140个字符（将再次检查）。
不幸的是，我遇到了这个错误。我试图联系我的团队成员，但他们忙于处理其他问题。这里是我的代码：
Feed.aspx：
< ％@ Page Title =Language =C＃MasterPageFile =〜/ MasterPage.masterAutoEventWireup =trueCodeFile =Feed.aspx.csInherits =Feed_Feed％>
< asp：Content ID =Content1ContentPlaceHolderID =headRunat =Server>
< / asp：Content>
<！ - 这里用于测试目的 - >
< script src =https://code.jquery.com/jquery-1.9.1.min.js>< / script>
< script type =text / javascriptlanguage =javascript>
$（document）.ready（
function（）
{
$（'＃TweetButton'）。click（
function（）
{
//从TweetBox获取文本
var status = $（'＃TweetBox'）。val（）;
//如果为140个字符或更少
if（status .length< = 140）
{
var data = JSON.stringify（status）;
//发送到服务器页面
$ .ajax（{
url：'/Feed.aspx.cs'，
type：'POST'，
dataType：'json'，
data：data，
success：function（myStatus）
{
$（'＃MyStatus'）。html（myStatus）;
}
}）;
}
else
{
alert（Tweet不应包含超过140个字符）;
}
}）;
}）;
< / script>
< asp：Content ID =Content2ContentPlaceHolderID =MainContentRunat =Server>
< h1>用户资讯提供< / h1>
< p>
< input id =TweetBoxtype =text/>< input id =TweetButtontype =buttonvalue =button/>
< / p>
< div id =MyStatus>< / div>
< / asp：Content>
< asp：Content ID =Content3ContentPlaceHolderID =LeftContentRunat =Server>
< / asp：Content>
Feed.aspx.cs
使用System;
使用System.Collections.Generic;
使用System.Linq;
使用System.Web;
使用System.Web.UI;
使用System.Web.UI.WebControls;
public partial class Feed_Feed：System.Web.UI.Page
{
protected void Page_Load（object sender，EventArgs e）
{
$ b C＃文件实际上是空的，因为我不不知道如何处理发布到页面的数据（它应该在 Page_Load 中？）我不知道该怎么做......
代码不会将数据发布到asp.net服务器，因为您只是使用常规的HTML元素。为了将html元素转换为asp.net元素，您需要使用属性 runat =server，以便您的标记变为：
< input id =TweetBoxtype =textrunat =server/>< input id =TweetButtontype =button value =buttonrunat =server/>
另外，为了使工作更简单并且对asp.net控件具有更大的灵活性（比如访问额外的属性），你应该严格使用asp.net核心控件。因此，您的新标记将如下所示：
< asp：TextBox id =TweetBoxrunat =server><<< ; / ASP：文本框>
< asp：Button id =TweetButtonrunat =server>< / asp：Button>
为了触发点击事件将数据发布到服务器上（代码隐藏），您需要添加属性 OnClick 到您的按钮。
< asp：按钮ID =TweetButtonrunat =serverOnClick =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）
{
//保存数据库中的数据。
$ b 更新：
要使用ajax，您需要使用asp.net控件，因此您的标记将为
.ASPX =>
< input id =TweetBoxtype =text/>
< input id =TweetButtontype =buttonvalue =button/>
< script>
$（）。ready（function（）
{
$（'＃TweetButton'）。click（function（）{
// if it is 140 characters or less
if（status.length< = 140）
{
//发送到服务器页面
$ .ajax（{
url：'/Feed.aspx/ SubmitTweet'，
type：'POST'，
dataType：'json'，
data：{'tweet'：'+ $（'＃TweetBox'）。val（）+ '}，
成功：函数（myStatus）
{
$（'＃MyStatus'）。html（myStatus.d）;
}，
错误：函数（er）
{
}
}）;
}
else
{
alert（Tweet不应包含超过140个字符）;
}
}）;
}）;
< / script>
.ASPX.CS（代码隐藏）=>
[WebMethod]
public static string SubmitTweet（string tweet）
{
// dummy函数：
return DataSubmit tweet）？ 数据已提交：提交数据时出错;
}
public bool DataSubmit（字符串数据）
{
//调用db连接并保存鸣叫
//如果成功，返回true else假
}
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 the button is clicked, the text in the text box is processed and posted iff it has <= 140 characters.
I tried to write some jQuery that checks the text in the text box, and then sends it to the server for processing. The server is to save it to database, and post it to page, if it is no more than 140 characters long (this will be checked again).
Unfortunately, I run into this error. I tried to contact my team members, but they are super busy with other issues. Here is my code:
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)
{
}
}
The C# file is practically empty because I don't know how to handle the data being posted to the page (should it be in Page_Load?) I don't know what to do here...
解决方案 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 :
<input id="TweetBox" type="text" runat="server" /><input id="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.
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 :
To work with ajax, you would need asp.net controls, so your markup would be
.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
}
这篇关于HTML按钮将输入文本数据发送到ASP端的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
