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

最新推荐文章于 2021-09-18 16:58:23 发布

置顶你个佬六

最新推荐文章于 2021-09-18 16:58:23 发布

阅读量1.5w

点赞数 5

文章标签： asp.net html 控件博客

本文链接：https://blog.csdn.net/kisscatforever/article/details/55270925

版权

------【Asp.Net】同时被 3 个专栏收录

18 篇文章

订阅专栏

------【HTML】

9 篇文章

订阅专栏

------【ADO.NET】

7 篇文章

订阅专栏

一、前言

前一段的时候，同事有个项目是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>");
        }
    }
}