プログラマの備忘録

2016年1月26日火曜日

JQuery-UIのDialogウィジェットを使ってメッセージダイアログを表示するサンプル

JQuery-UIのDialogウィジェットを使ってメッセージダイアログを表示するサンプル

HTML+javascript

とこのような感じで実現できますが、実はダイアログ表示が非同期で動作しておりJavaScriptの
btnOpenDialogClick()でダイアログ表示した後、ダイアログのClose（「はい」ボタンまたは「×」ボタンの押下を待たずに、
$("#result").text("メッセージダイアログが表示");が動作してしまう。

すこし改造して、ダイアログのClose後、処理が動作するようにする。
HTML+javascript

JQuery-UIのダウンロード

Query-UIのDialogウィジェットを使って問い合わせダイアログを表示

JQuery-UIのDialogウィジェットを使って問い合わせダイアログを表示するサンプル

HTML+javascript

JQuery-UIのダウンロード

CSS positionで要素の配置を行う

CSS positionで要素の配置を行うサンプル

親要素に「position: relative;」を定義して、
子要素に「position: absolute;」を定義する。

section3は高さを指定しなくいても子要素がTEXTなので高さが確保されるが、

section2のような子要素が<div>などの要素になると親要素の高さは確保されないので注意（高さが可変になる場合考慮が必要）

HTML+CSS

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>サンプル</title>
<style type="text/css">

</style>
</head>
<body >
<div id="main">
<div id="section1">section1</div>
<div id="section2">
<div>section2</div>
<div id="section2_sub1">section2_sub1</div>
<div id="section2_sub2">section2_sub2</div>
<div id="section2_sub3">section2_sub3</div>
</div>
<div id="section3">section3</br>section3</div>
<div id="section4">section4</div>
</div>
</body>
</html>

2016年1月25日月曜日

Asp.net＋MVC4でVIEWとContoroller間のajax通信方法2

Asp.net＋MVC4でVIEWとContoroller間のajax通信方法

【環境】
.NET VB (Microsoft Visual Studio 2010(sp1) .NET Framework 4.5.2)
MVC4

非同期通信を行う
ajaxで配列を送信してContorollerにてModel Listを受け取る。

View

@ModelType .SendTestModelList

@Section javascript
<script type="text/javascript">
$(function () {
//UPDATEボタンクリック
$("#btnUpdate").click(function () {
btnUpdateClick();
});
}

//UPDATEボタンクリックイベント
function btnUpdateClick() {
//SENDデータ
var jsdata = [];

var listcnt = $("listcnt").val();
//画面一覧の値を配列に設定
for (var i = 0; i < listcnt - 1; i++) {
var jsdataitem = {};
jsdataitem["id"] = $("#id_" + i).val();
jsdataitem["name"] = $("#name_" + i).val();
jsdataitem["item1"] = $("#item1_" + i).val();
jsdataitem["item2"] = $("#item2_" + i).val();
jsdata.push(jsdataitem);
}
//Contorollerへ送信
$.ajax({
type: "POST",
url: "Sample/sendtest",
datatype: "json",
data: JSON.stringify(jsdata),
contentType: 'application/json',
success: function (data) {
if (data == undefined) return;
//ajax送信完了
SendSucsess(data);
},
error: function (req, status, err) {
alert("error:" + status + ",msg:" + err);
}
});
}
//ajax送信完了
function updateSucsess(data) {
//ajaxからの受信処理
}
</script>
End Section

<form>
<input type="button" id="btnUpdate" value="UPDATE"/>
<table>
<tr>
<th>ID</th>
<th>名前</th>
<th>項目1</th>
<th>項目2</th>
<tr>

<inpit type="hidden" id="listcnt" value="@Model.SendTestModelList.Count()"/>
@For i As Integer = 0 To Model.SendTestModelList.Count() - 1
@:<tr>
@:<td><input type="text" id="id_@i" value="@Model.SendTestModelList(i).id"></td>
@:<td><input type="text" id="name_@i" value="@Model.SendTestModelList(i).name"></td>
@:<td><input type="text" id="item1_@i" value="@Model.SendTestModelList(i).item1"></td>
@:<td><input type="text" id="item2_@i" value="@Model.SendTestModelList(i).item2"></td>
@:<tr>
Next
</table>
</form>

Contoroller

Public Class SampleController
Inherits System.Web.Mvc.Controller

<HttpPost()> _
Public Function entry(ByVal models As List(Of SendTestModel)) As ActionResult
'Ajax通信か判定
If Not Request.IsAjaxRequest() Then
Return New EmptyResult()
End If

'modelsにSendTestModelのList型で受信

End Function
End Class

Model

Public Class SendTestModel
Public Property id() As String
Public Property name() As String
Public Property item1() As String
Public Property item2() As String

Public Sub New()
id = String.Empty
name = String.Empty
item1 = String.Empty
item2 = String.Empty
End Sub
End Class

Public Class SendTestModelList
Public Property list() As List(Of SendTestModel)

Public Sub New()
list = New List(Of SendTestModel)
End Sub
End Class

2015年11月6日金曜日

Asp.net＋MVC4でVIEWとContoroller間のajax通信方法

Asp.net＋MVC4でVIEWとContoroller間のajax通信方法

【環境】
.NET VB (Microsoft Visual Studio 2010(sp1) .NET Framework 4.5.2)
MVC4

非同期通信を行う

View

@Using Ajax.BeginForm("TestFunc", "TestClass", New AjaxOptions With {.OnSuccess = "viewjs"})
@<div>
   <input type="submit" value="送信" id="btnSendClick" />
   <input type="text" id="code" />
   <input type="text" id="name" />
</div>
End Using

<script type="text/javascript">
function viewjs(obj) {
//通信結果を画面項目に設定
$("#name").text(obj.name);
}
</script>

.OnSuccess = "viewjs"
Contorollerとの通信結果後動作するJavaScript関数を定義

Contoroller

Public Class TestClassController

  <HttpPost()> _
  Public Function TestFunc(ByVal collection As FormCollection) As ActionResult
    Dim model As New TestModel
    If Not Request.IsAjaxRequest() Then
      Return New EmptyResult()
    End If

    //画面入力したcodeでnameを取得するサービスクラス
    model = _Service.TestForAjax(Me.Session, collection("code"))
    Return Json(model)
  End Function
End Class

Model

Public Class TestModel
  Public Property name As String

  Public Sub New()
    name = String.Empty
  End Sub
End Class

2015年8月17日月曜日

Visual Studio2010でExcelの大量のデータの操作（Excelから取得編)

Visual Studio2010でExcelの大量のデータの操作（Excelから取得編)

前回はデータをExcelに表示（設定）する方法を掲載しましたが、今回は逆のExcelから取得です。

セルから1つずつ転送する方法は、転送するデータが少量の場合は問題ありませんが、大量のデータをExcelブックから転送する場合は、この方法はお勧めできません。
大量のデータの操作にはオートメーションを使用してデータの配列にワークシートの特定のセル範囲を転送します。

【環境】
.NET VB (Microsoft Visual Studio 2010(sp1) .NET Framework 4.5.2)
Microsoft Excel 2010

【検証結果】
項目数（Col)40程度のRowを約10,000件操作した場合、
セルを1つずつ転送する方法では処理時間に約3.5分要しました。
データの配列をワークシートに転送する方法では、30秒で終了しました。
(データをDBに登録する処理も含めています。)

セルから1つずつ転送する方法

Dim celval1 As String
Dim celval2 As String
For i As Integer = 2 To ews.UsedRange.Rows.Count + 1
If Not CType(ews.Cells(i, 0), _
Global.Microsoft.Office.Interop.Excel.Range).Value2.ToString().Equals( _
String.Empty) Then

'1列目の項目を取出し
celval1 = CType(ews.Cells(i, 0), _
Global.Microsoft.Office.Interop.Excel.Range).Value2.ToString()
'2列目の項目を取出し
celval2 = CType(ews.Cells(i, 1), _
Global.Microsoft.Office.Interop.Excel.Range).Value2.ToString()
End If
Next

オートメーションを使用してワークシートからデータの配列に転送する方法

Dim celval1 As String
Dim celval2 As String
'Excelシートの値データ配列に転送
Dim DataArray(,) As Object = _
CType(ews.Range("A2").Resize( _
ews.UsedRange.Rows.Count, _
ews.UsedRange.Columns.Count).Value2, Object(,))

For i As Integer = 1 To ews.UsedRange.Rows.Count
If Not DataArray(i, 0).ToString().Equals(String.Empty) Then
'1列目の項目を取出し
celval1 = DataArray(i, 0).ToString().Equals(String.Empty)
'2列目の項目を取出し
celval2 = DataArray(i, 1).ToString().Equals(String.Empty)
End If
Next

【参考】 https://support.microsoft.com/ja-jp/kb/306022

2015年8月3日月曜日

Visual Studio2010でExcelの大量のデータの操作（Excelに表示編)

Visual Studio2010でExcelの大量のデータの操作（Excelに表示編)

セルを1つずつ転送する方法は、転送するデータが少量の場合は問題ありませんが、大量のデータをExcelブックに転送する場合は、この方法はお勧めできません。
大量のデータの操作にはオートメーションを使用してデータの配列をワークシートの特定のセル範囲に転送します。

【環境】
.NET VB (Microsoft Visual Studio 2010(sp1) .NET Framework 4.5.2)
Microsoft Excel 2010

【検証結果】
項目数（Col)40程度のRowを約10,000件操作した場合、
セルを1つずつ転送する方法では処理時間に約10分要しました。
データの配列をワークシートに転送する方法では、数秒で終了しました。

セルを1つずつ転送する方法

Dim dt As DataTable = 【データテーブル取得】
'Excel WorkSheet
Dim ews As Excel.Worksheet = CType(ExcelWorkbook.ActiveSheet, Global.Microsoft.Office.Interop.Excel.Worksheet)
Dim er As Excel.Range

For i As Integer = 0 To dt.Rows.Count - 1
For j As Integer = 0 To dt.Columns.Count - 1
er = CType(ews.Cells(i + 2, j + 1), Global.Microsoft.Office.Interop.Excel.Range)
'書式を設定
Select Case dt.Columns(j).DataType.Name
Case "Decimal"
'er.NumberFormatLocal = "#,##0"
er.NumberFormatLocal = "G/標準"
Case "String"
er.NumberFormatLocal = "@"
Case Else
er.NumberFormatLocal = "G/標準"
End Select
'値を設定
er.Value2 = dt.Rows.Item(i).Item(j).ToString()

Next
'更新フラグを初期化
er = CType(ews.Cells(i + 2, CInt(COL.UpdFlg)), Global.Microsoft.Office.Interop.Excel.Range)
er.NumberFormatLocal = "@"
er.Value2 = String.Empty
Next

オートメーションを使用してデータの配列をワークシートに転送する方法

Dim dt As DataTable = 【データテーブル取得】
'Excel WorkSheet
Dim ews As Excel.Worksheet = CType(ExcelWorkbook.ActiveSheet, Global.Microsoft.Office.Interop.Excel.Worksheet)
Dim er As Excel.Range
Dim DataArray(dt.Rows.Count - 1, dt.Columns.Count - 1) As Object

For i As Integer = 0 To dt.Rows.Count - 1
For j As Integer = 0 To dt.Columns.Count - 1
DataArray(i, j) = dt.Rows.Item(i).Item(j).ToString()
Next
Next

'属性設定（列単位）
For j As Integer = 0 To dt.Columns.Count - 1
er = ews.Range(ews.Cells(2, j + 1), ews.Cells(dt.Rows.Count + 1, j + 1))
Select Case dt.Columns(j).DataType.Name
Case "Decimal"
'er.NumberFormatLocal = "#,##0"
er.NumberFormatLocal = "G/標準"
Case "String"
er.NumberFormatLocal = "@"
Case Else
er.NumberFormatLocal = "G/標準"
End Select
Next

'ワークシートの全セルにデータを転送
ews.Range("A2").Resize(dt.Rows.Count, dt.Columns.Count).Value = DataArray

【参考】 https://support.microsoft.com/ja-jp/kb/306022

登録: 投稿 (Atom)