Analytics

2010年6月8日 星期二

[Javascript]Client Button控制項比較TextBox控制項的值是否相等,若相等則跳出對話方塊,選擇是的話則觸發ASP.NET Button控制項(Compare the value of Client Button controls TextBox controls are equal, if equal then jump dialog box, select Yes, then the trigger ASP.NET Button controls)


問題
Client Button控制項比較TextBox控制項的值是否相等,若相等則跳出對話方塊,選擇是的話則觸發ASP.NET Button控制項



解決方法
使用Server端的控制項,處理方式是將Client的整個網頁傳回Server,然後在Server端變更RadioButtonList的值以後,再回傳整個網頁回來Client端
使用Javascript配合html的input button,處理方式是直接由Javascript以id取得2個要比較的Textbox控制項的值以後,經由判斷是否想等,若相等以後,則可選擇是否要觸發Server端的Button控制項
而前後者不同的是一個再Server端執行,一個則由Client處理完成,若網頁上的控制項很多,使用Server端的方式執行將會造成網路流量的增加,使用上須小心!

.aspx如下:
<%@ Page Language="C#" AutoEventWireup="true" Codebehind="Default.aspx.cs" Inherits="WebApplication1._Default" %>
<!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 runat="server">
    <title>未命名頁面</title>
</head>
<script language="javascript">
   //比較兩值是否想等,若不相等,跳出Confirm視窗,若相等,觸發btnclick的事件
    function IsEqual()
    {
        if(document.getElementById("TextBox1").value==document.getElementById("TextBox2").value)
        {
            //當兩值相等後,判斷是否傳回Server端
            var r=confirm("是否執行回傳作業")
            if (r==true)
            {
                document.getElementById("btnServerCall").click();
            }
            else
            {
                alert("已放棄回傳!")
            }
        }
        else
        {
            alert("兩值不相等!!");
        }
    }
</script>
<body>
    <form id="form1" runat="server">
        <div>
            &nbsp;<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox><%--按下btnServerCall的時候去Postback候傳回變更後的Textbox值--%>
            <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
            <asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>&nbsp;
            <%--按下btnJavaScriptCall的時候去觸發javascript--%>
            <input id="btnJavaScriptCall" type="button" value="JavaScriptChoice1" onclick="IsEqual();" />
            </div>
    </form>
</body>
</html>
.cs如下:
namespace WebApplication1
{
    public partial class _Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
            }
        }
        protected void Button1_Click(object sender, EventArgs e)
        {
            this.TextBox3.Text = "Service call";
        }
    }
}

沒有留言:

熱門文章