アーカイブ

Posts Tagged ‘ASP.NET’

ついにこの時が、、、No More WebForms, No More Visual Basic

Top 10 Changes in ASP.NET 5 and MVC 6

いや、わかってたんですよ。わかってはいましたが、、、

No More Web Forms

You can continue to build Web Forms apps in Visual Studio 2015 by targeting the .NET 4.6 framework. However, Web Forms apps cannot take advantage of any of the cool new features of ASP.NET 5 described in this list. If you don’t want to be left behind as history marches forward then it is finally time for you to rewrite your Web Forms app into ASP.NET MVC.

超意訳

引き続きVisual Studio 2015でも.NET 4.6を選択すればWebFormsのビルドを行うことができます。しかし、ASP.NET WebFormsではASP.NET 5の新機能を利用することはできません。これはASP.NETの進化に取り残されたくない場合ASP.NET WebFormsアプリをASP.NET MVCアプリに書き換えるための猶予期間なのです。

広告
カテゴリー:ASP.NET, Visual Basic タグ:

kproj と KRuntimeってなに??

ASP.NETのソースコードがGitHubで公開されたというので、とりあえずさらっと眺めようかとソースを取り寄せてVisual Studioでソリューションファイルを読み込んでみると、各プロジェクトは 「kproj」 という拡張子を持つプロジェクトファイルで構成されているようでVisual Studioで読み込むことができませんでした。

kprojってなんだろう。

ASP.NET vNext HomeをみるとGetting StartedにK Version Managerへのリンクが貼られています。どうもASP.NET vNextの開発はK Runtimeという開発時と実行時のランタイムの溝を埋める環境で開発されているようです。kprojはこのK Runtimeで動作するプロジェクトを作成するためのプロジェクトファイルみたいです。

でもって、今のところkprojを理解するためのVisual Studioの拡張機能はなさそう。そのうち出てくるんだろうけれど、ソースを見たいならテキストエディターやらで確認するしか無いのかな?

カテゴリー:ASP.NET タグ:

何故かクッキーレスセッションになってしまった

IE11が電撃的に自動配布されたわけですが、皆様いかがお過ごしでしょうか?

IE11が自動配布されたクライアントで、何故かASP.NETのセッション情報がクッキーレスセッションで運用される状況になったので対応をメモ。現在現象発生まち。。。

IE11の自動配布について

今回は開始されまでが早かったですね。去年このブログのエントリーは確認していたんですが、自分の環境のIE11では問題なく動いていたので、今週の配布で問題が出るとは思っていませんでした。

2014 年 1 月第 2 週目から順次、Windows 7 向けInternet Explorer 11 の自動アップグレードを開始します

ブラウザー定義ファイルの更新

ASP.NETでブラウザーの更新における問題というと、ブラウザー定義ファイルの更新漏れが考えられるのでまずはこちら。_doPostbackが定義されていないとか言ったJavascriptのエラーが出るならまずは確認してみましょう。

セッション情報と認証情報は無条件にクッキーへ

いや、いまさらクッキー使えない端末とか無いから気にしないでクッキーへ書こうよということなら、web.configのforms要素とsessionState要素の設定をUserCookiesで指定してあげます。

カテゴリー:ASP.NET, プログラミング, Windows タグ: ,

IE10 関連リソース

先日、Windows 7 対応のInternet Explorer 10がリリースされました。

普段使っていく文には、高速化、リッチコンテンツへの対応というメリットがありますが、提供する側としては検証ブラウザー対象のブラウザーが増えるのでちょっと大変ですね。とりあえず検証用のリンクをメモしておきます。

まずは代表的な2つのURL

上記の中でリンクされている中で、特に気にしておいたほうがよさそうなもの

で、更にASP.NETがInternet Explorer 10の検出に失敗するに関しては、サーバー側の設定ファイルの変更が必要なので、ココも合わせてみたい。

Bug and Fix: ASP.NET fails to detect IE10 causing _doPostBack is undefined JavaScript error or maintain FF5 scrollbar position

カテゴリー:ASP.NET, Windows タグ: ,

ASP.NET 4 WebFormでモバイルサイトを作成する場合のスクリプト結合

これはOne ASP.NET Advent Calendar 2012の12/17日分の記事となります。前回の記事はnobuhisaさんの「知っている人は知っている、知らない人は知らない『NDjango』」です。次回の記事はnakamura_toさんです。

。。。やべっす。書くネタが無いです。ASP.NETといっても、いろいろありますが基本WebFormしか触っていないので、ちょうど都合よく発生した、お仕事で困ったことで逃げるとします。

スクリプトがいっぱい

少し前ですがWebFormとjQueryMobile、knockoutを基盤に使ったシステムの開発方針を決めたことがあります。もともと単純な機能しか利用しないし画面もそう多くないのででさらっと作れればいいよーという話だったので、メンテナンス性を考え、ページはViewModel毎に1つのJavascriptファイルと、ViewModelが利用するサービスクラスが名前空間毎にファイルを分けて作成することにしました。

開発が終盤になり、なんとなくソリューションを覗いてみたら、画面や機能はどんどん追加され、Javascriptだけでも40以上がマスターページに登録されていました。

スクリプトのロードを早くしたい

ASP.NETでjQueryMobileなページを作成する場合、どのページからランディングされても動くように、マスターページ側でそのサイトで利用する全てのスクリプトをロードさせます。このため、初めてのそのサイトにアクセスの場合は、数十のスクリプトがロードされることになり、場合によってはそれなりにロード時間がかかります。

Fiddlerでネットワーク帯域のエミュレートをしながらダウンロードを調査してみました。Fiddlerでのネットワーク帯域の制限方法はココが参考になります(→Android開発で3G回線速度を再現する)。近頃のモバイルネットワークは高速ですが、今回は下りが大体512kbpsぐらいに制限して調査してみます。

image image

タイムラインは下のほうが切れてしまっていますが、ページ全体で758KBの読み込みで、2.8秒の時間がかかっています。

ASP.NET 4 WebFormでの解決案

ASP.NET 4.5では、System.Web.Optimization名前空間を使った便利な仕組みがあるようなのですが、ASP.NET 4な環境では使えません。チャックさんのJavaScript / CSS ファイルの自動縮小・結合処理: ASP.NET MVC 4 新機能シリーズがわかりやすいです。

ASP.NETでは古くからのScriptMangerコントロールにも、スクリプトの結合機能(クライアント スクリプトを複合スクリプトに結合)があります。今回はScriptManagerのスクリプト結合機能を利用してjQueryやknockout, jQueryMobileのスクリプトを結合することでスクリプトのロードが早くなるかを検証します。

ScriptManagerのCompositeScript機能を利用したスクリプトの結合

まずはマスターページを開いて、ScriptManagerを追加します。

今回、ASP.NET AJAX関連JavaScriptは読み込む必要は無いのでAjaxFrameworkModeをDisabledに変更しています(あっ、ScriptManagerはrunat=”server”なformの中に置きましょうね。ココの記事ではformを消してしまいましたが、無いと上手く動いてくれません)。

<asp:ScriptManager runat="server" AjaxFrameworkMode="Disabled">
<CompositeScript>
    <Scripts>
        <asp:ScriptReference Path="~/Scripts/json2.min.js"/>
        <asp:ScriptReference Path="~/Scripts/jquery-1.7.2.min.js"/>
        <asp:ScriptReference Path="~/Scripts/jquery.validate.min.js"/>
        <asp:ScriptReference Path="~/Scripts/knockout-2.1.0.js"/>

        <asp:ScriptReference Path="~/Scripts/jquery.mobile-1.1.0.min.js"/>
        <asp:ScriptReference Path="~/Scripts/jquery.mobile.datebox.min.js"/>
        <asp:ScriptReference Path="~/Scripts/jquery.mobile.datebox.i8n.jp.js"/>
    </Scripts>
</CompositeScript>
</asp:ScriptManager>

さて実行するとどうなるかな?。。。。。。ありゃ、Javascriptのエラーが出ちゃいました。どうもjson2が上手く読み込めていない様子なので、外に出してあげます。

image

マスターページのコードはこうなりました。

<%@ Master Language="VB" AutoEventWireup="false" CodeBehind="Site1.master.vb" Inherits="WebApplication6.Site1" %>
<!DOCTYPE html>
<html>
<head runat="server">
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=5.0,user-scalable=yes"/>
    <link href='~/Content/jquery.mobile-1.1.0.min.css' rel="stylesheet" type="text/css"/>
    <script type="text/javascript" src='<%= ResolveClientUrl("~/Scripts/json2.min.js") %>'></script>
    <asp:ContentPlaceHolder ID="Head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form runat="server">
    <asp:ScriptManager runat="server" AjaxFrameworkMode="Disabled">
        <CompositeScript>
            <Scripts>
                <asp:ScriptReference Path="~/Scripts/jquery-1.7.2.min.js"/>
                <asp:ScriptReference Path="~/Scripts/knockout-2.1.0.js"/>

                ... 略 ...

                <asp:ScriptReference Path="~/Scripts/jquery.mobile-1.1.0.min.js"/>
                <asp:ScriptReference Path="~/Scripts/jquery.mobile.datebox.min.js"/>
                <asp:ScriptReference Path="~/Scripts/jquery.mobile.datebox.i8n.jp.js"/>
            </Scripts>
        </CompositeScript>
    </asp:ScriptManager>
    </form>                
    
    <asp:ContentPlaceHolder ID="Contents" runat="server">
    </asp:ContentPlaceHolder>
</body>
</html>

どかなー

とりあえず適当なページを作って実行すると、問題なく表示されましたね。

image

コンテンツのロード状況を見ると、ページ全体で239KBの読み込みで1.9秒の時間がかかっています。ページのサイズとしては500KBの軽量化、ページのロード時間としては1秒ぐらい早くなっています。ScriptManagerのComposit機能では、スクリプト自体の圧縮を行わないのでこんなものでしょうかね。

imageimage

Ajax Minifierでビルド時にスクリプトファイルを圧縮してあげると、スクリプト自体のサイズが小さくなるのでもう少し早くなるかもしれませんね。

カテゴリー:ASP.NET, インフラ, モバイル タグ:

開発中にHTTP Status 503でASP.NETのページが真っ白になっちゃった

ASP.NETの開発中に、デバック実行(F5)や実行(Ctrl+F5)でプログラムを実行したら、Webブラウザーが真っ白で何も表示されなくなっちゃいました。システムログには何もログがなかったのですが、F12開発者ツールで通信を確認したらHTTP Status 503(Service Unavailable)が発生していました。

image

他の既存プロジェクトや新しいプロジェクトでは問題無く実行ができるし、他のコンピューターで同じプロジェクトを実行することもできるので、自分のPC&このプロジェクトだけの問題なようです。もーこんな時に。

ASP.NET一時フォルダーの削除

開発機でHTTP Status 503が出る場合は、Webサーバーのキャッシュ状態なんかがおかしくなっていることが多いです、ASP.NETのプログラムはページを実行する際に下記のフォルダーにコンパイル結果を保存するのでこのあたりのフォルダーを綺麗にしてみるのがひとつの手です。

  • IIS: %SystemRoot%\Microsoft.NET\Framework\v(バージョン)\Temporary ASP.NET Files
  • Visual Studio: %TMP%\Temporary ASP.NET Files

Visual Studioで実行する場合に使うフォルダーはコンピューターの一時フォルダーなので、ディスクのクリーンアップできれいにしてもいいですね。あと、とりあえずフォルダーを全部消して最新ソースを取得しなおしてみるっていうのも手かもしれませんね。

僕はとりあえずこれで動くようになりました。

カテゴリー:ASP.NET, メモ, Visual Studio タグ:

Knockoutで取得したデータをjQueryMobileに反映する。

WebFormでJavascript主体なスマートフォン向けサイトを作ろう その5 #タイトルの付け方を変えました。

前回までで、サーバー側のWebServiceをJavascriptから呼び出し、結果を取得するところまで作成しました。

次に結果を画面に反映する部分を作成しましょう。

ViewModelの変更

前回取得したWebサービスの値をKnockout経由でView側に通知させます。

JQuery Mobileを直に利用している場合、DOMを変更したら各要素をrefleshしてあげないとスタイルが反映されないんだけれど、knockoutを利用した場合は特に何もせずに反映されるんですよね。ただ、サンプルなんかを見るとrefleshを発行しているものもあり。必要かどうかよくわかりません(汗。見た目問題なく動いているんですけれどね。

var viewModel = new (function () {
var local = this;
var service = new customerService();

this.keyword = ko.observable("");
this.検索結果 = ko.observableArray([]);
this.件数 = ko.computed(function () {
return local.検索結果().length;
});

this.find = function () {
local.検索結果.removeAll();
service.Find($, this.keyword(),
function (result) {
var data = result.d;
ko.utils.arrayPushAll(local.検索結果, data);
// $("#リストのID").listview('reflesh');
});
};
})();

配列と計算用のプロパティー

一覧表示用のデータ等は、通知に対応した配列(ko.observableArray)をプロパティーとして用意します。

件数などで、特定のプロパティーの値をそのまま利用できるようなプロパティーは、計算に対応したプロパティー(ko.computed)として定義してあげるとプロパティーの更新漏れなんかがなくて良いです。今回は検索結果を格納した配列の要素数がそのまま検索結果件数なので、検索結果().lengthを返却しています。

検索結果の追加

検索した結果は、ko.observableArrayなプロパティーに1件づつpushしていっても良いのですが、ko.utilsに配列をまるごとpushするユーティリティー(arrayPushAll)が用意されているので、こいつを利用しましょう。

observableArrayに追加する要素は、本来observableなプロパティーを持つクラスを指定できますが、今回はリストに表示するだけで、かつ各要素に対する変更も受け取る必要が無いので、WCFから受け取ったデータ(result.d)をそのまま配列に追加しています。

Viewの変更

以前作ったViewに結果リストを表示するためのリストと、結果件数を表示するためのラベルを追加します。

<%@ Page Title="" MasterPageFile="~/Site.Master" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<div data-role="page" id="FindCustomerView">
<header data-role="header" data-position="fixed">
<h1>顧客検索</h1>
</header>
<div data-role="content">
<input type="text" data-bind="value: keyword"/>
<input type="button" value="検索" data-bind="click: find" />
<p>検索結果件数:<span data-bind="text: 件数"></span></p>
<ul data-role="listview" data-bind="foreach: 検索結果">
<li><a data-bind="attr: { href: 'Detail.aspx?jyu=' + ユーザーId }">
<h4><span data-bind="text: ユーザー名"></span></h4>
<p>(<span data-bind="text: ユーザーId"></span>)</p>
</a></li>
</ul>
</div>
</div>
</asp:Content>
listviewと配列のバインド
jQuery Mobileでリストを表示したい場合は、data-role属性でlistviewを指定します。
また、data-bind属性で、foreach: observableArrayなプロパティーを指定すると、配列をリストにバインドできます。
配列バインドのテンプレート
knockoutでは、foreachでバインディングした要素の配下を配列要素数分繰り返します。
検索結果という配列に3個の要素があったなら、この部分が3回繰り返されることになります。
<li><a data-bind="attr: { href: 'Detail.aspx?jyu=' + ユーザーId }">
<h4><span data-bind="text: ユーザー名"></span></h4>
<p>(<span data-bind="text: ユーザーId"></span>)</p>
</a></li>
この部分に関してはそれほど特筆する点はありませんね。実行してみると、liの部分がテンプレートで記述した要素通りに、3つ追加されているのを確認できます。
image
 
実行するとこんなかんじに表示されます。さて、一応表示までできましたね。

この画面から遷移する予定のDetail.aspx側(更新)も気が向いたら書きます。

image
 

過去へのリンクはこちらから

  • その1 はじめに
  • その2 ソリューション作成とライブラリの追加(knockout,jQuery,jQueryMobile)
  • その3 Knockoutを利用したViewModelの追加
  • その4 jQueryからASP.NETのWCF Serviceの呼び出し