如何使用onclick而不是asp:button onclick激发代码隐藏方法

Question

我在asp.net中，我已经有了一个使用runat="server"的表单。我在页面上创建了另一个表单，代码背后有一个方法，需要在onclick事件上运行。

由于我已经在页面上有一个表单，我不能使用带有runat="server"的asp:按钮

让我的方法用onclick开火的最好方法是什么？

下面是我的代码：

protected void requestSong_Click (object sender, EventArgs e)
{
var artist = Request.Form["artist"].ToUpper();
var song = Request.Form["song"].ToUpper();
var song_Request = artist + " - " + song;
SqlConnection con2 = new SqlConnection(ConfigurationManager.ConnectionStrings["dbconnection"].ConnectionString);
con2.Open();
SqlCommand cmd2 = new SqlCommand("insert into SONGS values (@REQUESTED_SONGS)", con2);
cmd2.Parameters.AddWithValue("REQUESTED_SONGS", song_Request);
cmd2.ExecuteNonQuery();

这是我的aspx:

<form id ="songRequest">
<p style="color:greenyellow"> Request a song</p>
<input type="text" placeholder="Artist" name="artist" id="artist" />
<input type="text" placeholder="Song Title" name="song" id="song" />
<button class="button" onclick="" id="requestSongButton" name="Submit">Submit</button>
</form>

Answer 1

您可以使用下面列出的方法在点击第二个客户端表单中的按钮时激发代码隐藏方法。

• 请确保在第一个表单标记之后的页面中包含asp:ScriptManager(这一点非常重要，否则这种方法将不起作用)
• 在您的页面中包含下面给出的JavaScript代码。在这个脚本中，调用了__doPostBack方法，这是asp.net框架使用的一个标准JavaScript函数，用于发布控件上的事件，如按钮单击。只有在页面中包含asp:ScriptManager时，此功能才可用
• 更改客户端表单中按钮的标记，使其具有onclick属性集
• 在您的中，Page_Load事件中的代码隐藏检查参数__EVENTTARGET和__EVENTARGUMENT，并调用为其两个参数传递null的方法requestSong_Click(注意：您的按钮单击中不能使用sender或e，否则将不起作用)

要包含在页面中的JavaScript代码

<script type="text/javascript">
function postBack(btn) {
//get data you want to pass to code-behind
var artist = document.getElementById("artist").value;
var song = document.getElementById("song").value;
var arguments = "saveToDb" + "|" + artist + "|" + song;
__doPostBack('requestSongButton', arguments);
//you can pass more arguments using a comma-delimited or pipe-delimited list of values
//to the second parameter in above method
}
</script>

客户端表单中按钮所需的标记

<button class="button" onclick="" id="requestSongButton" name="Submit" 
onclick="doPostBack(this); return false;">Submit</button>

C#代码隐藏以通过客户端表单按钮处理提交

protected void Page_Load(object sender, EventArgs e)
{
if (Page.IsPostBack)
{
if (Request["__EVENTTARGET"] == "requestSongButton" && 
Request["__EVENTARGUMENT"].IndexOf("saveToDb") = 0)
{
//code that executes on click of requestSongButton in second form
requestSong_Click(null, null);
}
}
}

C#代码，用于获取客户端表单按钮回发的已发布值

protected void requestSong_Click(object sender, EventArgs e) {
string artist;
string song;
//you must always pass null for e and sender if posting from client-side form button
if (sender == null && e == null) {
var arguments = Request["__EVENTARGUMENT"];
if (arguments != null && arguments != String.Empty) {
//split the | delimited string to an array
Dim argumentsArray as String() = arguments.Split(New Char() {
"|"
c
});
//now get values of artist textbox and song textbox
//note that artist index is 1 and soung index is 2
//due to the sequence in which we populated arguments
//in client-side JavaScript doPostBack function
artist = argumentsArray[1];
song = argumwentsArray[2];
}
} else {
artist = Request.Form["artist"].ToUpper();
song = Request.Form["song"].ToUpper();
}
string song_Request = artist + " - " + song;
SqlConnection con2 = new SqlConnection(ConfigurationManager.ConnectionStrings["dbconnection"].ConnectionString);
con2.Open();
SqlCommand cmd2 = new SqlCommand("insert into SONGS values (@REQUESTED_SONGS)", con2);
cmd2.Parameters.AddWithValue("REQUESTED_SONGS", song_Request);
cmd2.ExecuteNonQuery();
//more of your code follows