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

时间:2019-01-31 10:43:33

标签: html asp.net onclick

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

由于页面上已经有一种表单,因此无法将asat:button与runat =“ server”一起使用

使用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>

1 个答案:

答案 0 :(得分:0)

您可以使用下面概述的方法在单击第二个客户端窗体中的按钮时触发代码隐藏方法。

  • 确保在第一个表单标签之后紧跟着asp:ScriptManager(这很重要,否则此方法将无效)
  • 在页面中包含以下给出的JavaScript代码。在此脚本中,将调用__doPostBack方法,这是asp.net框架使用的标准JavaScript函数,用于发布控件事件(如单击按钮时)。仅当您在页面中包含asp:ScriptManager时,此功能才可用。
  • 以客户端形式更改按钮的标记,以便设置onclick属性
  • 在您的Page_Load事件代码中,检查参数__EVENTTARGET__EVENTARGUMENT并调用方法requestSong_Click为其两个参数传递空值(注意:您不得使用发件人或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