一个网站的诞生 MagicDict未来予想図2 [单页面多个submit的实现，高手绕路]

　　昨日のブッログに、”路過秋天”が”日本語でブッログを書きます、好いじゃないか”をコメントしたので、今日のブッログが日本語で書きます。

 　　普通のウェブページが、１つページ、1つサブミットはずですが、１つページに複数なサブミットが必要な場合よくあります。１つページに複数なサブミットの実装の方法はこのブッログで紹介させて頂きます。

…………

　　开个玩笑，昨天，路过秋天同志让我用日语来写博客，为了满足一下秋天同志的要求，就用日语来写一小段。。。让园子里面日语好的童鞋见笑了。。。

     昨天准备做一个让用户提交新的词汇的功能，提交了新的词汇的用户，作为奖励，这位用户将可以在网站的首页发一些文字广告。但是由于使用了MasterPage，MasterPage里面的【检索】按钮已经是Submit了，加上【添加词汇】按钮的话，一个页面将出现2个Submit了。

     要解决1个页面多个Submit，其实也不是很难的事情。

     1.要让前台页面知道是那个按钮提交了事件，这样的话能对其进行JS的检查。

     2.要让后台页面知道是那个按钮提交了事件，这样的话能对其进行数据处理。

一个比较常用的方法是在页面上放一个隐藏的Input，在点击提交按钮的时候，对这个按钮进行设置，这样的话，JS就知道到底是因为什么理由，页面做了提交的动作。

准备一个接受提交理由的控件

<input type="hidden" id="submitFlg" name="submitFlg"/>

提交的时候，设定提交的理由

<input type="submit" class="buttonNormal" id="btnAddDict" value="添加" onclick="submitFlg.value=1;"/>

页面提交前要求检查

<form id="form1" method='post' action='' defaultbutton='btnJP2CN' onsubmit='return checkSubmit()'>

检查的JS，根据提交理由做检查，通过document.getElementById("submitFlg").value 来感知提交理由

//提交检索
function checkSubmit() {
    if (document.getElementById("submitFlg").value == "0") {
        if (ItemSelected != -1) {
            return false;
            ItemSelected = -1;
        }
        if (document.getElementById("ctl00_txtSearchWord").value == "") {
            alert("请输入检索关键字，可以是汉字，假名，罗马字");
            return false;
        }
        return true;
    }
    if (document.getElementById("submitFlg").value == "1") {
        if (document.getElementById("txtDisplayText").value == "") {
            alert("请输入表示文本");
            return false;
        }
        if (document.getElementById("txtKana").value == "") {
            alert("请输入假名");
            return false;
        }
        if (document.getElementById("txtExplain").value == "") {
            alert("请输入解释");
            return false;
        }        
        return true;
    }
}

 检查没有问题的话，交给后台做进一步的处理：使用Request.Form["submitFlg"]来感知提交的理由

            if (Request.Form["submitFlg"] == "0")
            {
                //int proverbIndex = new Random().Next(WordInfoHelper.mProverbTable.Rows.Count);
                if (Request.HttpMethod.Equals("POST"))
                {
                    String SearchKey = (Request.Form["ctl00$txtSearchWord"]);
                    //検索仮名が平仮名に変換してから、検索を実行します
                    Response.Redirect("Result.aspx?SearchWord=" + SearchKey);
                }
            }

 基本上就是这样的一个流程了。。。。。。

依照这个逻辑，只要你控制好提交理由，多少个提交都没有什么问题了。。。。。当然单页面多个提交的实现方法还有很多，这里只是抛砖引玉。

当然，有一个地方请大家注意，一个页面元素的ID是给JS用的，一个页面元素的name是给后台程序用的，两个都需要设置，不然的话，可能前台或者后台会接受不到数据。

现在网站可以添加新的词汇了，添加了新词汇的用户，可以提交表单的最后输入一些文字，这些文字将会出现在网站的首页。

多谢大家捧场。。。。

网站地址 http://www.magicdict.com/

有兴趣的写信给我 root#magicdict.com   [convert # to @ ]

或者加MSN mynightelfplayer@hotmail.com