環境:[Windows Vista SP1, VisualStudio 2010 Pro]
ajaxでサーバーから取得したデータをユーザーコントロールに渡し描画を試みているのですが、jquery mobileのスタイルが適用されません。
ユーザーコントロールを使わなければ大丈夫です。
これはjquery mobileが対応していない（バグ）せいなのか、私のコーディングが間違っているのかわかる方おられませんか？
以下再現コード
※プロジェクトはASP.NET MVC 2 Web アプリケーションで作成しています。
※検索ボタンを押すとリストが表示されますが、スタイルが適用されていません。
--------------------------------[Site.Master]-----------------------------
<span><span><%@ Master Language="C#" Inherits="System.Web.Mvc.ViewMasterPage" %><br/>
<br/>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br/>
<html xmlns="http://www.w3.org/1999/xhtml"><br/>
<head id="Head1" runat="server"><br/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><br/>
<title><asp:ContentPlaceHolder ID="TitleContent" runat="server" /></title><br/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css" /> <br/>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script><br/>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script><br/>
<script type="text/javascript" src="<%= ResolveUrl("~/Scripts/MicrosoftAjax.js") %>"></script><br/>
<script type="text/javascript" src="<%= ResolveUrl("~/Scripts/MicrosoftMvcAjax.js") %>"></script><br/>
<asp:ContentPlaceHolder ID="ScriptContent" runat="server" /><br/>
</head><br/>
<br/>
<body><br/>
<div class="page"><br/>
<br/>
<div id="header"><br/>
<div id="title"><br/>
<h1>マイ MVC アプリケーション</h1><br/>
</div><br/>
<br/>
<div id="logindisplay"><br/>
<% Html.RenderPartial("LogOnUserControl"); %><br/>
</div> <br/>
<br/>
<div id="menucontainer"><br/>
<br/>
<ul id="menu"> <br/>
<li><%: Html.ActionLink("ホーム", "Index", "Home")%></li><br/>
<li><%: Html.ActionLink("このサイトについて", "About", "Home")%></li><br/>
</ul><br/>
<br/>
</div><br/>
</div><br/>
<br/>
<div id="main"><br/>
<asp:ContentPlaceHolder ID="MainContent" runat="server" /><br/>
<br/>
<div id="footer"><br/>
</div><br/>
</div><br/>
</div><br/>
</body><br/>
</html><br/>
</span>
</span>
--------------------------------[Book.cs](Modelsに追加)-----------------------------
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace MvcApplication7.Models
{
public class Book
{
public string Name { get; set; }
public string Auther { get; set; }
public DateTime Date { get; set; }
public static IEnumerable<Book> GetAll()
{
return new Book[]{
new Book{Name="組み込みGUI環境の設計と実装", Auther = "四ノ宮 力 ...他", Date=new DateTime(2007, 7, 20), },
new Book{Name="デザインパターン入門", Auther = "結城 浩", Date=new DateTime(2004, 6, 30), },
new Book{Name="日経ソフトウェア 2010 10月号", Auther = "日経BP社", Date=new DateTime(2010, 8, 24), },
};
}
}
}
--------------------------------[HomeController.cs]-----------------------------
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using MvcApplication7.Models;
namespace MvcApplication7.Controllers
{
[HandleError]
public class HomeController : Controller
{
public ActionResult Index()
{
return View(Book.GetAll());
}
public ActionResult GetData()
{
if (Request != null && Request.IsAjaxRequest())
{
return PartialView("BookList", Book.GetAll());
}
else
{
return new EmptyResult();
}
}
public ActionResult GetDateTime()
{
if (Request.IsAjaxRequest())
{
return Content(DateTime.Now.ToString());
}
return new EmptyResult();
}
public ActionResult About()
{
return View();
}
}
}
--------------------------------[Index.aspx]-----------------------------
<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<IEnumerable<MvcApplication7.Models.Book>>" %>
<%@ Import Namespace="MvcApplication7.Models" %>
<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
ホーム ページ
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="ScriptContent" runat="server">
<script type="text/javascript">
function onSuccess(context) {
var data = context.get_data();
$("#TimeDate").text(data);
$.mobile.pageLoading(true);
}
function onComplete() {
$.mobile.pageLoading(true);
}
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<div data-role="page" data-theme="b">
<% using (Ajax.BeginForm("GetDateTime",
new AjaxOptions { OnSuccess = "onSuccess" }))
{ %>
<div data-role="fieldcontain">
<input type="submit" data-icon="refresh" value="更新" />
</div>
<% } %>
<p>日時：<span id="TimeDate" data-inline="true" data-role="button"></span></p>
<div>
<ul data-role="listview">
<li data-role="list-divider">実際の形式<span class="ui-li-count"><%=Model.Count() %> 件</span></li>
<% foreach (Book book in Model)
{%>
<li>
<h3><a href="#"><%=book.Name%></a></h3>
<p class="ui-li-aside"><%=book.Date.ToShortDateString() %></p>
<p><%=book.Auther %></p>
</li>
<%} %>
</ul>
</div>
<% using (Ajax.BeginForm("GetData",
new AjaxOptions { UpdateTargetId = "results", OnComplete = "onComplete" }))
{ %>
<div data-role="fieldcontain">
<input type="submit" data-icon="search" value="検索" />
</div>
<% } %>
<div id="results"></div>
</div>
</asp:Content>
--------------------------------[BookList.ascx](Views\Homeに追加)-----------------------------
<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<IEnumerable<MvcApplication7.Models.Book>>" %>
<%@ Import Namespace="MvcApplication7.Models" %>
<div>
<ul data-role="listview">
<li data-role="list-divider">実際の形式<span class="ui-li-count"><%=Model.Count() %> 件</span></li>
<% foreach (Book book in Model)
{%>
<li>
<h3><a href="#"><%=book.Name%></a></h3>
<p class="ui-li-aside"><%=book.Date.ToShortDateString() %></p>
<p><%=book.Auther %></p>
</li>
<%} %>
</ul>
</div>
