おぼえがきＩＴブログ: 2016

2016年12月6日火曜日

[ASP.NET]RegularExpressionValidatorやCompareValidatorを使って日付のチェックを行う。

Validatorシリーズを使って
日付のエラーチェックをする方法です。

イメージはこんな感じ。

①存在する日付をチェックするにはCompareValidator を使います。

<asp:TextBox runat="server" ID="txtNyukoHi" TextMode="Date" Width="150px" CssClass="form-control" />
<asp:CompareValidator runat="server" ControlToValidate ="txtNyukoHi" Type="Date" 
 ValueToCompare="2999/12/31" Operator="LessThan"
    CssClass="text-danger" Display="Dynamic" ErrorMessage="存在しない日付です" />

②これだけだと、MM/DD/YYYYとかでもOKになってしまうみたいです。
ということで、RegularExpressionValidatorを追加します。


<asp:TextBox runat="server" ID="txtNyukoHi" TextMode="Date" Width="150px" CssClass="form-control" />
<asp:RegularExpressionValidator runat="server" ControlToValidate="txtNyukoHi" 
ValidationExpression="(19|20|21)\d{2}/(0?[1-9]|1[0-2])/(0?[1-9]$|[1-2][0-9]$|3[0-1]$)"
 CssClass="text-danger" Display="Dynamic"  ErrorMessage="[年/月/日]ではありません<br/>" />
<asp:CompareValidator runat="server" ControlToValidate ="txtNyukoHi" Type="Date" 
 ValueToCompare="2999/12/31" Operator="LessThan"

  CssClass="text-danger" Display="Dynamic" ErrorMessage="存在しない日付です" />

追記：ただしこれだと、[年/月/日]ではない場合、２つエラーが表示されるんですよね…

なので、RegularExpressionValidatorはゆるーくチェックをするだけでもいいかなと思っています。
正規表現をゆるくしました。ガチガチにしたい方は上記の正規表現がいいかなと思います。

<asp:TextBox runat="server" ID="txtNyukoHi" TextMode="Date" Width="150px" CssClass="form-control" />
<asp:RegularExpressionValidator runat="server" ControlToValidate="txtNyukoHi" 
ValidationExpression="\d{4}/\d{1,2}/\d{1,2}$"
 CssClass="text-danger" Display="Dynamic"  ErrorMessage="[年/月/日]ではありません<br/>" />
<asp:CompareValidator runat="server" ControlToValidate ="txtNyukoHi" Type="Date"  
 ValueToCompare="2999/12/31" Operator="LessThan"
 CssClass="text-danger" Display="Dynamic" ErrorMessage="存在しない日付です" />

もうちょっと正規表現緩くした方がいいかな…

2016年11月29日火曜日

[CSS]必須のマークをCSSでつける（線を引いてみる）

入力フォームで必須の場合に
CSSで指定して"*"マークを後ろにつけるのはちらほら見かけるが、
今回は以下の様に線の色を変えるバージョンをCSSで作ってみる。

HTMLはこんな感じ。[Requied]を指定します。
-----------------------------------------------------------
<td class="Requied" style="background-color:Gray;">部数</td>
------------------------------------------------------------

[Requied]は以下の様に指定すればOK。

-----------------------------------------------------------

td.Requied::before {
content: "";
position: absolute;
height: 36px;
box-shadow: 0px 0px 0px 1px red;
-webkit-box-shadow: 0px 0px 0px 1px red;
-moz-box-shadow: 0px 0px 0px 1px red;
-o-box-shadow: 0px 0px 0px 1px red;
margin-left: -5px;
margin-top: -6px;
margin-bottom: -8px;
margin-right: 6px;

}

------------------------------------------------------------

2016年11月22日火曜日

[Bootstrap]Bootstrap既存のボタンの色を変える。

おなじみのBootstrap既存のボタンの色違いバージョンを作りたい場合。

変えたい色１つにつき以下のようなCSSを作る。(例:btn-ccolor_g1という名前で)

/*-----------------------------------------------*/

/*カスタムカラーグラデ１（赤グラデ）*/

.btn-ccolor_g1 {

/*置換するもの*/

/*ccolor_g1　　　　　　　　　←CSS名*/

/*D11217～851818 　　　←ボタングラデ色*/

/*721717 ←フォーカス時の色*/

/*edc5fb ←disable時の色*/

background-color: #D11217;

　　　　color: white;

border-color: #851818;

}

.btn-ccolor_g1:hover,

.btn-ccolor_g1:focus {

background-color: #721717;

background-position: 0 -15px;

color:white;

}

.btn-ccolor_g1:active,

.btn-ccolor_g1.active {

background-color: #721717;

border-color: #721717;

color:white;

}

.btn-ccolor_g1.disabled,

fieldset[disabled] .btn-ccolor_g1,

.btn-ccolor_g1.disabled:hover,

fieldset[disabled] .btn-ccolor_g1:hover,

.btn-ccolor_g1.disabled:focus,

fieldset[disabled] .btn-ccolor_g1:focus,

.btn-ccolor_g1.disabled.focus,

fieldset[disabled] .btn-ccolor_g1.focus,

.btn-ccolor_g1.disabled:active,

fieldset[disabled] .btn-ccolor_g1:active,

.btn-ccolor_g1.disabled.active,

fieldset[disabled] .btn-ccolor_g1.active {

background-color: #edc5fb;

border-color: #edc5fb;

color:white;

}

/*-----------------------------------------------*/

ポイント…

①基本ボタン色・フォーカスの時の色・disableの時の色３つ用意する。

　基本ボタン色はグラデにする気がないのなら開始色も終わり色も同じ色にすればOk

　フォーカスの時の色は基本ボタン色を濃くしたもの、

　disableの時の色は基本ボタン色をかなり明るくしたもの、を用意する。

②/*置換するもの*/にあるCSS名とデフォの色を
　　①で用意した色に一斉置換でマルっと置き換える。

HTMLでの使い方は以下。btn-defaultに重ねること。

/*-----------------------------------------------*/

class="btn btn-default btn-ccolor_g1"

/*-----------------------------------------------*/

2016年8月31日水曜日

[javascript]JQueryで一覧内の特定のボタンを押した際に行を把握する。

JQueryにて一覧内の特定のボタンを押した際に行を把握します。

①HTML側は以下のようにボタンを配置します。
--------------------------------------------

<table>

…

<tr>
<td>
　<button id="btnJump_0">詳細</button>
</td>
<td>
  <input id="KEYNO_0" type="hidden" value="111" />
</td>
<td>
  １行目です。
</td>
</tr>

…

</table>

--------------------------------------------

②Javascriptは以下の様に書けばOK。
【^】は前方一致で探す、というJQuery上の意味なので
ここを後方一致などに変更して使用してもOKですし
連番を振っていなくても動くと思います。
---------------------------------------------
//ボタンを押された時
    $(document).ready(function () {
        $("[id^='btnJump']").click(function () {

            //ここでボタンを押された行が把握できます。
            var row = $(this).parent().parent();

            //以降はこれを用いてそれぞれの値をゲットしたりできます。
            var KEYNO = row.find($("[id^='KEYNO']")).val();
            alert("押された行のキーNOは" +　KEYNO + "です");
        });
    });
---------------------------------------------

2016年8月30日火曜日

[ASP.NET MVC]Javascript動作も込みのヘルパーを作成（コードベース）。

以下の様に

コードを入力すると名前が表示される…といった

よくある動きを込み込みにしたヘルパー（コードベース）を作成してみる。

①ヘルパーは以下の様な感じ。
-----------------------------------------
namespace TESTHelpers
{
public static IHtmlString MemberCodeFor<TModel, TProperty>(
           this HtmlHelper<TModel> helper,
           Expression<Func<TModel, TProperty>> Codeexpression,
           Expression<Func<TModel, TProperty>> Nameexpression,
           String CustomCDid = "Member_Cd",
           String CustomNameid = "Member_Name")
{
           //TextboxFor
           HtmlString htmlTextBox = helper.TextBoxFor(Codeexpression,
                            new
                            {                               @id = CustomCDid
                            });

           //Display用TextBox
       HtmlString htmlTextBox2 = helper.TextBoxFor(Nameexpression,
                            new
                             {
                           　　@id = CustomNameid,
                           　　@readonly = "readonly"
                           　});

           //div1
　　　　　var myTag = new TagBuilder("div");
　　　　　myTag.MergeAttribute("style", "width:120px");
　　　　　myTag.InnerHtml = "担当者";
　　　　　//div2
　　　　　var myTag2 = new TagBuilder("div");
　　　　　myTag2.InnerHtml = htmlTextBox.ToHtmlString();
　　　　　//div3
　　　　　var myTag3 = new TagBuilder("div");
　　　　　myTag.MergeAttribute("style", "width:240px");
　　　　　myTag3.InnerHtml = htmlTextBox2.ToHtmlString();
　　　　　//改行
　　　　　var Enter = new StringBuilder();
　　　　　Enter.AppendLine("");
　　　　　　//外出ししたScript部
　　　　　String strScript = helper.MemberJavascript(CustomCDid ,CustomNameid ).ToString();
　　　　　//連結してreturn
　　　　　var ReturnHTML = myTag.ToString() + myTag2.ToString() + myTag3.ToString() + Enter.ToString() + strScript;　　　　　return new HtmlString(ReturnHTML.ToString());
}
public static IHtmlString MemberJavascript(string fromid, string toid)
{
            //Script部生成----------------------------------------
            var sb = new StringBuilder();
               sb.AppendLine(" $(function () {");
            sb.AppendLine("   $('#" + fromid + "').change(function () {");
            sb.AppendLine("    var Member_Cd = $('#" + fromid + "').value;");
            sb.AppendLine("    alert(\"ここにWebサービス等を使用して名前を取得するスクリプトを記載\");");
             sb.AppendLine("   });");
            sb.AppendLine(" });");
            //----------------------------------------------------
             var ScriptTag = new TagBuilder("script");
            ScriptTag.MergeAttribute("type", "text/javascript");
            ScriptTag.InnerHtml = sb.ToString();

            return new HtmlString(ScriptTag.ToString());
}
}
------------------------------------------
(readonlyはbootstrap独自だったかな…）

②View側は以下の様書くだけでOK。
------------------------------------
@using HelpersTest

@Html.MemberCodeFor(m => m.Member_Cd, m => m.Member_Name, "Member_Cd", "Member_Name")
------------------------------------

2016年3月4日金曜日

[SQL]SQLServerにて一時保存テーブルを扱う。

一瞬だけ取り込んで加工したい場合…
一時保存テーブルですが
きちんと消えているかはちゃんと確認したほうがいいです。
（念の為一応前後にDROP句をつけています）


---------------------------------------------

BEGIN TRAN TEST;

--ワークの事前削除
IF OBJECT_ID('tempdb..#TMP_取込ワーク') IS NOT NULL DROP TABLE #TMP_取込ワーク;

   --ワークの生成
CREATE TABLE #TMP_取込ワーク
(Folder1 varchar(100),
Folder2 varchar(100),
Folder3 varchar(100),
Folder4 varchar(100),
Folder5 varchar(100),
Folder6 varchar(100),
Level varchar(100),
Size varchar(100),
Percentage varchar(100));

   --ここを取り込みプログラムにしてみたり
INSERT INTO #TMP_取込ワーク VALUES
( '24245' ,'1503AK1502D','仕様書.xls' , NULL, NULL, NULL,NULL,'1',NULL );
INSERT INTO #TMP_取込ワーク VALUES
( '24245' ,'1403A44674D','お見積り.xls' , NULL, NULL, NULL,NULL,'1',NULL );

--できたデータをここで加工したり
  SELECT *
FROM #TMP_取込ワーク

--一応終わったら消す
DROP TABLE #TMP_取込ワーク

--ROLLBACK TRAN TEST;
COMMIT TRAN TEST;

---------------------------------------------

登録: 投稿 (Atom)