【Asp.net】前台的Html控件向后台传值以及前台的html的input按钮如何调用后台的方法

妖狐艹你老母 2022-07-12 07:42 700阅读 0赞

# 一、前言 #

前一段的时候，同事有个项目是Asp.net的，自己有一段的时间没有接触了，反过来找个时间研究了一下她的项目，功能其实很简单，就是一个简单的登录页面，前面用到的是html控件，两个input，一个button。功能就是登录，但由于是Asp.net涉及到了前后台的传值，这篇博客就重点介绍一下：Asp.net的前后台如何传值，后台如何接收html的值，以及前台的html的input按钮如何调用后台的方法。

# 二、后台与html控件前提 #

学过html的人，都知道html是一个静态的页面，所以一般情况下是不能把数据传到后台的，如果想要和后台交互的话，就需要添加一个“runat=“server””的属性。更重要的是在表单的位置也要添加上runat=“server”，这样才能在后台接收到前台的html控件的值。

# 三、代码示例 #

## 3.1 技术要点 ##

*  form表单要添加runat=”server”
 *  后台要获得前台控件的值，前台控件必须要添加runat=”server”

## 3.2 关于按钮的总结： ##

我们知道在Asp.net中我们有两种按钮，一个是asp控件的，一个是html的。但是他们调用方法的时候是不一样的。总结一下有以下三种样式：onclick ，onserverclick，onclientclick；

（1）HTML控件，如input还有a标签，只有onclick ( 客户端）和onserverclick（服务端）事件，而没有onclientclick事件。

此处的onclick 先于onserverclick执行。

<%--提交按钮，要添加runat="server" type="submit"--%>
    <input name="btnLogin" value="" onclick="CheckLogin();" onserverclick="test" id="btnLogin" style="height: 40px; width: 108px; background-image: url('/images/btnlogin.gif');" runat="server" type="submit">

（2）WEB控件，如等，只有onclientclick( 客户端）和onclick （服务端）事件，而没有onserverclick事件。

此处的onclientclick先于onclick 执行。

<asp:Button ID="btnDelete" Text="删除" runat="server" OnClientClick="return ifDelete(this);" OnClick="btnDelete_Click" />

总之，客户端点击事件先于服务器端点击事件执行。也就是说，先执行客户端的JavaScript，然后到服务器端执行服务器的相关代码。

## 3.3 代码示例 ##

前台：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="idnex.aspx.cs" Inherits="test.idnex" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1">
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <title>思政课调查问卷</title>
    
        <script language="javascript" type="text/javascript"> if (window != top) top.location.href = location.href; //检查登录的前提条件 function CheckLogin() { var txtStudentCode = document.getElementById("txtStudentCode").value; //用户名 var txtUserPassword = document.getElementById("txtUserPassword").value; //密码 if (txtStudentCode == "") { alert("请输入学号!"); txtStudentCode.focus(); return false; } if (txtUserPassword == "") { alert("请输入密码!"); txtUserPassword.focus(); return false; } return true; } </script>
    </head>
    <body style="background-color: #04090d; background-image: url(images/login_bg01.png); background-repeat: no-repeat; background-position: center top; overflow: hidden;">
        <%-- 这里要注意，我们的form要添加runat="server" --%>
        <form runat="server" id="form">
            <%--输入用户名框，要添加runat="server"--%>
            <input id="txtStudentCode" required="" name="username" type="text" runat="server">
            <label alt="请输入您的用户名" placeholder="Username"></label>
            <%--输入密码框，要添加runat="server"--%>
            <input id="txtUserPassword" required="" name="password" type="password" runat="server">
            <label alt="请输入您的密码" placeholder="Password"></label>
            <%--提交按钮，要添加runat="server" type="submit"--%>
            <input name="btnLogin" value="" onclick="CheckLogin();" onserverclick="test" id="btnLogin" style="height: 40px; width: 108px; background-image: url('/images/btnlogin.gif');" runat="server" type="submit">
        </form> 
    </body>
    </html>

后台：

using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    
    namespace test
    {
        public partial class idnex : System.Web.UI.Page
        {
            protected void Page_Load(object sender, EventArgs e)
            {
    
            }
    
            //前台点击按钮调用
            protected void test(object sender, EventArgs e)
            {
                Response.Write("ahogdhgodsngosujlsj");
                Page.ClientScript.RegisterStartupScript(Page.GetType(), "message", "<script language='javascript' defer>alert('文件类型不正确，请选择扩展名为.xls的文件！');</script>");
            }
        }
    }

# 四、思考 #

通过这次的深入学习，总算是把html和Web的控件又一次分析了一下，深刻的理解。 以后学习就是要是这样的，没毛病！多多总结！加油！总有一天我会成为很牛的程序猿的。