如何使用 onclick 而不是 asp:button OnClick 触发方法背后的代码

Question

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

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

使用 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 方法被调用，这是一个标准的 JavaScript 函数，被 asp.net 框架用于回发控制事件，如按钮单击。仅当您在页面中包含 asp:ScriptManager 时，此功能才可用。
• 更改客户端表单中按钮的标记，使其具有 onclick 属性集
• 在您的 Page_Load 事件中的代码隐藏中检查参数 __EVENTTARGET 和 __EVENTARGUMENT 并调用方法 requestSong_Click 为它的两个参数传递 null （注意：您不能在按钮中使用 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