【JQuery】セレクタ指定

  • 指定方法
構文 内容 使用例
$('*') 全ての要素を指定 $('*')
$('{要素名}') 一致する要素(a, divなど)を指定 $('input') inputタグを指定
$('.{class名}') class属性に指定したクラス名が含まれる要素を指定 $(.content) class="content"を指定
$('#{id}') id属性が指定したidに一致する要素を指定 $('#apple') id="apple"を指定
$('[{属性}]') 特定の属性を持つ要素を指定 $('[data-hoge]') data-hoge属性を指定
$('[{属性}="{値}"]') 特定の属性(値)を持つ要素を指定 ※ワイルドカード検索も可能 $('[type="checkbox"]') チェックボックスを指定
  • 組み合わせ指定
構文 内容 使用例
$('EF') EかつFに一致する要素を指定 $('div.content') 下記test1を指定
$('E, F') E または Fに一致する要素を指定 $('[name="test1"], [name="test2"]') 下記test1とtest2を指定
$('E F') E配下のFに一致する要素を指定 $('div.content p') 下記test2とtest3直下のpタグを指定
$('E > F') E直下のFに一致する要素を指定 $('div.content > p') 下記test2を指定
$('E + F') Eの一つ後ろにある要素を指定 $('[name="test2"] + div') 下記test3を指定
$('E ~ F') Eの後ろにある全ての要素を指定 $('[name="test2"] ~ div') 下記test3,4を指定
$(':checked') 選択中のラジオボタンチェックボックスを指定 $("input[name='hoge']:checked") 下記のid="one"のラジオボタンを指定
<div name="test1" class="content">
    <p name="test2">
        test1の直下・配下
    </p>
    <div name="test3">
        test1の直下・配下
        test2に隣接
        test2の後ろ
        <p >
            test1の配下
            test3の直下・配下
        </p>
    </div>
    <div name="test4">
        test1の直下・配下
        test2の後ろ
    </div>
</div>
<div name="test5">
    <input type="radio" id="one" name="hoge" value="1" checked>チェックされてる方</input>
    <input type="radio" id="two" name="hoge" value="2">チェックされてない方</input>
</div>

【JQuery】ajax呼び出し共通化

ajaxの呼び出し部分を共通化して、成功・失敗時の動きとかを統一する用
deferred使わないと非同期で処理が実行されるので、共通化したときにdataが受け取れなかったので忘れないようにメモ

// ajax呼び出し共通
function ajaxAction({実行URL}, {パラメータ}) {
    var deferred = new $.Deferred();    // ※1
    $.ajax({
        url: { 実行URL },
        type: 'POST',
        data: { パラメータ },
        cache: false,    // ※2
    }).then(
        //成功処理
        function (data) {
            console.log('ajax成功:共通部分');  // 成功時の共通処理とか書く
            deferred.resolve();     // こうすると呼び出し側で個別の処理ができる
        },
        //失敗処理
        function (data) {
            console.log('ajax失敗:共通部分');  // 失敗時の共通処理とか書く
            deferred.rejected();    // こうすると呼び出し側で個別の処理ができる
        },
    );
    return deferred;
}

// ajax呼び出し例
function hogeAction () {
    console.log('ajax呼び出し前');

    var hostUrl = '/hogeURL/hogeAction';    // URL
    var param = { aaa: "123" };    // パラメータ
    var deferred = ajaxAction(hostUrl, param);    // 実行
    deferred.done(function (data) {
            // 成功時の個別処理とか書く
            console.log('ajax成功:個別部分');
            console.log(data);
    });
    deferred.fail(function (data) {
            // 失敗時の個別処理とか書く
            console.log('ajax失敗:個別部分');
            console.log(data);
    });

    // ajax処理を待たずに実行する場合の処理
    console.log('ajax呼び出し後(実行結果を待たない)');
};

※1
ajaxの処理が完了してから行いたい作業がある場合に使用するオブジェクト
非同期で問題ない場合はdeferredの処理を除外する
※2
一度ajaxに成功するとクライアントにcacheを生成してしまう。
次回以降にcacheを読まないようにする

検証テスト

C# MVC

MVCルーティングでフォルダ階層を分けるときの方法

  1. エリアを定義する。

エリアを作成後、下記のようにnamespaceを追記

public class RouteConfig
{
    public static void RegisterRoutes(RouteCollection routes)
    {
        routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

        routes.MapRoute(
            name: "Default",
            url: "{controller}/{action}/{id}",
            defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional },
            namespaces: new[] {"{ソリューション名}.Controllers"}
        );
    }
}

※web.configがエリアごとに分かれる

  1. ルート情報を追加する。

Global.asax Application_Start()
自由に階層を作れるがファイル名を一意にする必要がある。

IList<String> locationFormats = new List<String>();
RazorViewEngine razorViewEngine = new RazorViewEngine();

//サンプル
locationFormats.Add("~/Views/Master/{0}.cshtml");
locationFormats.Add("~/Views/Master/{1}/{0}.cshtml");
locationFormats.Add("~/Views/Master/MasterEmployee/{0}.cshtml");
locationFormats.Add("~/Views/Master/MasterEmployee/{1}/{0}.cshtml");
locationFormats.Add("~/Views/Master/MasterSalary/{0}.cshtml");
locationFormats.Add("~/Views/Master/MasterSalary/{1}/{0}.cshtml");

// ビュー
razorViewEngine.ViewLocationFormats = razorViewEngine.ViewLocationFormats.Union(locationFormats).ToArray();
// 部分ビュー
razorViewEngine.PartialViewLocationFormats = razorViewEngine.PartialViewLocationFormats.Union(locationFormats).ToArray();

ViewEngines.Engines.Clear();
ViewEngines.Engines.Add(razorViewEngine);