Skip to content

Commit

Permalink
Ajaxサンプル / Bootstrap5スタイル変更
Browse files Browse the repository at this point in the history
  • Loading branch information
try0 committed Jan 10, 2022
1 parent 606192b commit 51788f5
Show file tree
Hide file tree
Showing 9 changed files with 222 additions and 34 deletions.
108 changes: 108 additions & 0 deletions WebApp.MVC/Controllers/AjaxExampleController.cs
Original file line number Diff line number Diff line change
@@ -0,0 +1,108 @@
using FeedbackMessages.Extensions;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading;
using System.Web;
using System.Web.Mvc;
using WebApp.MVC.Models;

namespace WebApp.MVC.Controllers
{
/// <summary>
/// Ajax系サンプル
/// </summary>
public class AjaxExampleController : Controller
{

private List<ListExampleModel.User> UserList
{
get
{
return (List<ListExampleModel.User>)Session["AjaxExampleController.UserList"];
}
set
{
Session["AjaxExampleController.UserList"] = value;
}
}

// GET: AjaxExample
[HttpGet]
public ActionResult Index()
{
return View();
}

/// <summary>
/// ユーザーリストビューを描画します。
/// </summary>
/// <returns></returns>
[HttpPost]
public ActionResult PartialUserListView()
{
Thread.Sleep(1000 * 3);

if (UserList == null || UserList.Count == 0)
{
UserList = new List<ListExampleModel.User>
{
new ListExampleModel.User()
{
UserId = "001",
UserName = "ユーザーA",
Age = 20
},
new ListExampleModel.User()
{
UserId = "002",
UserName = "ユーザーB",
Age = 30
},
new ListExampleModel.User()
{
UserId = "003",
UserName = "ユーザーC",
Age = 40
}
};
}


var myViewData = new ViewDataDictionary(ViewData);
// WebApp.MVC.Models.ListExampleModel.UserList とマッピングできるようにプレフィックス指定
myViewData.TemplateInfo.HtmlFieldPrefix = "UserList";

myViewData.Model = UserList;

return new PartialViewResult
{
ViewData = myViewData,
ViewName = "_UserList",
TempData = TempData
};

}

/// <summary>
/// Postリクエストを処理します。
/// </summary>
/// <param name="model"></param>
/// <returns></returns>
[HttpPost]
public ActionResult Index(WebApp.MVC.Models.ListExampleModel model)
{

foreach (var user in model.UserList)
{
this.InfoMessage(user.UserId + ", " + user.UserName + ", " + user.Age);
}

// 編集内容キープ
UserList = model.UserList;

return View(model);
}

}
}
10 changes: 5 additions & 5 deletions WebApp.MVC/Controllers/PartialViewExampleController.cs
Original file line number Diff line number Diff line change
Expand Up @@ -54,9 +54,9 @@ public ActionResult Nested()

var root = new NestedPartialViewModel
{
Value = "0"
Value = "1"
};
CreateTestModel(root, 1);
CreateChildModel(root, 2);

return View(root);
}
Expand All @@ -69,10 +69,10 @@ public ActionResult Nested(NestedPartialViewModel model)
return View(model);
}

private void CreateTestModel(NestedPartialViewModel model, int depth)
private void CreateChildModel(NestedPartialViewModel model, int depth)
{

if (depth == 3)
if (depth == 4)
{
return;
}
Expand All @@ -87,7 +87,7 @@ private void CreateTestModel(NestedPartialViewModel model, int depth)
child.Parent = model;


CreateTestModel(child, childDepth);
CreateChildModel(child, childDepth);
}

}
Expand Down
1 change: 1 addition & 0 deletions WebApp.MVC/Models/ListExampleModel.cs
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@

namespace WebApp.MVC.Models
{
[Serializable]
public class ListExampleModel
{
public class User {
Expand Down
44 changes: 44 additions & 0 deletions WebApp.MVC/Views/AjaxExample/Index.cshtml
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
@{
ViewBag.Title = "List Example";
}
@model WebApp.MVC.Models.ListExampleModel

@using (Html.BeginForm())
{
<script>
$(function () {
// Controller UserListメソッドでパーシャルビューを返す
$.ajax({
type: "POST",
url: "/AjaxExample/PartialUserListView",
data: $(this).serialize(),
success: function (data) {
// パーシャルビューをセット
$("#userListLoader").css("display", "none");
$("#userList").html(data);
},
error: function (jqXHR, status, error) {
console.error(error);
console.error(status);
}
});
});
</script>
<div style="padding:1em;">
<div id="userListLoader">
<div class="d-flex justify-content-center">
<div class="spinner-border" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
</div>
<div id="userList"></div>
</div>

<input type="submit" value="送信" class="btn btn-primary" />

}

4 changes: 2 additions & 2 deletions WebApp.MVC/Views/ListExample/Index.cshtml
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,8 @@
@using (Html.BeginForm())
{
<div style="padding:1em;">
<table>
<thead>
<table class="table table-bordered table-sm table-hover">
<thead class="table-light">

<tr>
<th>ID</th>
Expand Down
2 changes: 1 addition & 1 deletion WebApp.MVC/Views/PartialViewExample/Index.cshtml
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
@using (Html.BeginForm())
{

<div style="padding:1em;">
<div style="padding:1em; width:15em;">

@{
Html.RenderPartialFor("_TimeDropdownListView", m => m.TimeList);
Expand Down
52 changes: 29 additions & 23 deletions WebApp.MVC/Views/Shared/_Layout.cshtml
Original file line number Diff line number Diff line change
Expand Up @@ -9,30 +9,38 @@
<title>@ViewBag.Title - マイ ASP.NET アプリケーション</title>
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")

@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
@Html.ActionLink("MVC Example App", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<div class="container-fluid">
@Html.ActionLink("MVC Example App", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">@Html.ActionLink("ログイン", "Index", "Home", new { area = "" }, new { @class = "nav-link" })</li>
<li class="nav-item">@Html.ActionLink("List", "Index", "ListExample", new { area = "" }, new { @class = "nav-link" })</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
PartialView
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li class="nav-item">@Html.ActionLink("Partial", "Index", "PartialViewExample", new { area = "" }, new { @class = "dropdown-item" })</li>
<li class="nav-item">@Html.ActionLink("NestedView", "Nested", "PartialViewExample", new { area = "" }, new { @class = "dropdown-item" })</li>
</ul>
</li>

<li>@Html.ActionLink("ログイン", "Index", "Home")</li>
<li>@Html.ActionLink("List", "Index", "ListExample")</li>
<li>@Html.ActionLink("Partial", "Index", "PartialViewExample")</li>
<li>@Html.ActionLink("NestedView", "Nested", "PartialViewExample")</li>

<li class="nav-item">@Html.ActionLink("Ajax", "Index", "AjaxExample", new { area = "" }, new { @class = "nav-link" })</li>
</ul>
</div>
</div>
</div>

</nav>

<div class="container body-content">
<div style="padding-top:1em;">
Expand All @@ -43,12 +51,10 @@
@RenderBody()
<hr />
@*<footer>
<p>&copy; @DateTime.Now.Year - マイ ASP.NET アプリケーション</p>
</footer>*@
<p>&copy; @DateTime.Now.Year - マイ ASP.NET アプリケーション</p>
</footer>*@
</div>

@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)

</body>
</html>
10 changes: 7 additions & 3 deletions WebApp.MVC/Views/Shared/_TimeDropdownView.cshtml
Original file line number Diff line number Diff line change
Expand Up @@ -21,8 +21,12 @@

}
<div class="form-inline">
<div class="input-group mb-3">
@Html.DropDownListFor(m => m.Hour, hours, new { @class = "form-control" })
<span >:</span>
@Html.DropDownListFor(m => m.Minute, minutes, new { @class = "form-control" })
</div>

<span></span>

@Html.DropDownListFor(m => m.Hour, hours, new { @class = "form-control" })
<span>:</span>
@Html.DropDownListFor(m => m.Minute, minutes, new { @class = "form-control" })
</div>
25 changes: 25 additions & 0 deletions WebApp.MVC/Views/Shared/_UserList.cshtml
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
@using System.Collections.Generic;
@model List<WebApp.MVC.Models.ListExampleModel.User>

<table class="table table-bordered table-sm table-hover">
<thead class="table-light">

<tr>
<th>ID</th>
<th>名前</th>
<th>年齢</th>
</tr>
</thead>

<tbody>
@for (var i = 0; i < Model.Count; i++)
{
<tr>
<td>@Html.TextBoxFor(m => m[i].UserId, new { @class = "form-control" })</td>
<td>@Html.TextBoxFor(m => m[i].UserName, new { @class = "form-control" })</td>
<td>@Html.TextBoxFor(m => m[i].Age, new { @class = "form-control" })</td>
</tr>
}

</tbody>
</table>

0 comments on commit 51788f5

Please sign in to comment.