トップ回答者
MVC3+jquerymobile でユーザーコントロール表示時にundefinedの表示

質問
-
いつも参考にさせていただいてます。
環境:windows7,VisualStudio 2010 ,MVC3
ajaxでサーバーから取得したデータをユーザーコントロールに渡し画面を表示しようとしているのですが、一瞬画面が表示された後、真っ白な画面に「undefined」の表示のみとなります。
jquerymobileをインクルードしなければ、問題なく表示されているようです。
エラーを追いかけてみたところ、
MicrosoftMvcAjax.js 内の
Sys.Mvc.AsyncHyperlink.handleClick=function(anchor,evt,ajaxOptions){evt.preventDefault();Sys.Mvc.MvcHelpers.$2(anchor.href,'post','',anchor,ajaxOptions);}
部分で以下のエラーを返しているようです。
Uncaught ReferenceError: $ is not defined
以下、実際のコードです。
--------------------------------[Site.Master]-----------------------------
<%@ Master Language="VB" Inherits="System.Web.Mvc.ViewMasterPage" %>
<!DOCTYPE html>
<html>
<head runat="server">
<title><asp:ContentPlaceHolder ID="TitleContent" runat="server" /></title>
<link href="../../Content/Site.css" rel="stylesheet" type="text/css" />
<%-- jquery mobile plugins --%>
<link href="/Scripts/jquery.mobile/jquery.mobile-1.0b2.min.css" rel="stylesheet" type="text/css" />
<%-- Microsoft AJAX --%>
<script src="/Scripts/MicrosoftAjax.js" type="text/javascript"></script>
<script src="/Scripts/MicrosoftMvcAjax.js" type="text/javascript"></script>
<script src="/Scripts/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery.mobile/jquery.mobile-1.0b2.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery.unobtrusive-ajax.min.js" type="text/javascript"></script><script type="text/javascript">
function searchSuccessEnd() {
$.mobile.pageLoading(true);
$("#Hcyulist").listview();
}
</script>
</head><body>
<div class="page" data-role="page">
<div data-role="header" id="header" data-theme="b" data-add-back-btn="true">
<h1>ネットスマートフォンサイト</h1>
<div> <% Html.RenderPartial("LogOnUserControl")%></div>
<div data-role="navbar">
<ul>
<li><%: Html.ActionLink("ホーム", "Index", "Home")%></li>
<li><%: Html.ActionLink("サイトについて", "About", "Home")%></li>
</ul>
</div>
</div><div data-role="content" id="main">
<asp:ContentPlaceHolder ID="MainContent" runat="server" />
</div>
<div data-role="footer" id="footer">
<a href="http://www..jp" data-role="button">デモ</a>
<a href="http://www.co.jp" data-role="button">デモ</a>
</div>
</div>
</body></html>
--------------------------------[Seach.aspx]-----------------------------<%@ Page Title="" Language="VB" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage(Of kakismapho.S0007000)" %>
<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
購入履歴
</asp:Content><asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<h2>購入履歴検索</h2>
<%-- The following line works around an ASP.NET compiler warning --%>
<%: ""%><% Using Ajax.BeginForm("HcyuList", "S0007000", New AjaxOptions With {.HttpMethod = "POST", _
.UpdateTargetId = "Hcyulist", _
.OnComplete = "searchSuccessEnd"}, _
New With {.rel = "external"})%><%: Html.ValidationSummary(True) %>
<fieldset>
<legend>購入履歴検索</legend>
<div class="editor-label">
<%: Html.LabelFor(Function(model) model.Seribi) %>
</div>
<div class="editor-field">
<%: Html.ValidationMessageFor(Function(model) model.Seribi)%>
<%: Html.DropDownListFor(Function(model) model.Seribi, Model.Seribiitems, Nothing, Nothing)%>
</div>
<% If Model.Gyosya_kbn = 0 Or Model.Gyosya_kbn = 9 Then%>
<div class="editor-label">
<%: Html.LabelFor(Function(model) model.BsanCD) %>
</div>
<div class="editor-field">
<%: Html.TextBoxFor(Function(model) model.BsanCD) %>
<%: Html.ValidationMessageFor(Function(model) model.BsanCD) %>
</div>
<% End If %>
<%-- <p><input type="submit" value="検索" /></p>--%>
<div data-inline="true">
<input type="submit" value="検索" name="keyword" data-inline="true" />
</div>
</fieldset>
<% End Using %><div id="Hcyulist"> </div>
<div>
<%: Html.ActionLink("戻る", "Index", "Home")%>
</div></asp:Content>
--------------------------------[Hcyulist.ascx]-----------------------------
<%@ Control Language="VB" Inherits="System.Web.Mvc.ViewUserControl(Of IEnumerable (Of kakismapho.HcyuList))" %>
<%: Html.ValidationSummary(True, "")%>
<ul data-role="listview" data-inset="true" data-theme="c" id ="Hcyulist">
<% For Each item In Model%>
<li>
<%: item.Hinmok %><br />
<%: item.Syohin %><br />
<%: item.Seisan %><br />
<%: item.Iro %><br />
<%: item.Bikou %><br />
<%: item.Irisu %><br />
<%: item.Kutisu%><br />
<%: item.Tnk %><br />
</li>
<% Next%></ul>
--------------------------------[S0007000Controller]-----------------------------
Namespace kakismapho
Public Class S0007000Controller
Inherits System.Web.Mvc.Controller
Private model As New S0007000Function Index() As ActionResult
Return View()
End FunctionFunction Search() As ActionResult
Try
model.OT_OROSHI = Request.Cookies("ck_OROSI_CD").Value model.OT_KAIUKE_CD = Request.Cookies("ck_KAIUKE_CD").Valuemodel.GET_ITIBI()
model.Gyosya_kbn = Request.Cookies("ck_Gysa_Kbn").Value
Return View(model)
Catch ex As Exception
Return View()
End TryEnd Function
'******************************************************************
' 関数 :
' 機能説明 : 検索結果を表示
'******************************************************************
<HttpPost()> _
<OutputCache(Location:=OutputCacheLocation.None)> _
Function HcyuList(ByVal collection As FormCollection) As ActionResult
Dim items As New List(Of SelectListItem)
Dim strBsan As StringDim tb As DataTable
Dim dv As DataView
Dim model As New S0007000
Dim Hcyu As New HcyuListTry
UpdateModel(model, collection)
Catch ex As Exception
ModelState.AddModelError("", "エラーが発生しました。")
Return PartialView(Hcyu)
End TryIf Request.IsAjaxRequest() Then
~~~~~~中略~~~~~Try
'--- 注文済一覧の取得
tb = model.GET_T_JYOJYO_HCYU_DATA()
Catch ex As Exception
ModelState.AddModelError("", "エラーが発生しました。")
Return PartialView(Hcyu)
End Try'表示すべき行がなければ処理無し
If tb.Rows.Count < 1 Or tb Is Nothing Then
ModelState.AddModelError("", "該当データはありません。")
Return PartialView(Hcyu)
Else
dv = New DataView(tb, "", "", DataViewRowState.CurrentRows)Dim Hcyutb As List(Of HcyuList) = New List(Of HcyuList)
For Each dr As DataRow In tb.Rows
Dim h As HcyuList = New HcyuList
h.Hinmok = dr.Item("HINMOK_NM").ToString '品目
h.Syohin = dr.Item("SYOHIN_NM").ToString '商品
h.Seisan = dr.Item("SEISAN_NM").ToString '生産者
h.Iro = dr.Item("IRO").ToString 'その他
h.Bikou = dr.Item("BIKO_KJ").ToString '備考
h.Irisu = dr.Item("HCYU_TNI_ISU").ToString '入数
h.Kutisu = dr.Item("HCYU_SUR").ToString '発注数
h.Tnk = dr.Item("URI_TANKA_N_SUM").ToString '金額Hcyutb.Add(h)
NextHcyu.Total = dv.Count
Return PartialView(Hcyutb)End If
Else
Return New EmptyResult()End If
End Function
回答
-
そういえば、POST が 2 回というので少し思い当たる話が。
[ASP.NET MVC3]JsonResultを指定したビューに返したい
http://social.msdn.microsoft.com/Forums/ja-JP/aspnetja/thread/165079d9-53be-4b14-8579-8ef0ebcdf422
jquery.unobtrusive-ajax.min.js は要らない気がします。 -
次の記事が参考になると思います。
Create a blog with JQuery Mobile and ASP.NET MVC 3 with C# | Giant Flying Saucer
http://www.giantflyingsaucer.com/blog/?p=2205
Create.cshtml あたりが肝になりそうですが、入力フォーム自体は Html.BeginForm で作成していて、
submit 時に $.ajax で自前で AJAX リクエストを飛ばしているようです。
すべての返信
-
パッと見なんですが、この部分
<%-- Microsoft AJAX --%> <script src="/Scripts/MicrosoftAjax.js" type="text/javascript"></script> <script src="/Scripts/MicrosoftMvcAjax.js" type="text/javascript"></script> <script src="/Scripts/jquery-1.6.4.min.js" type="text/javascript"></script> <script src="/Scripts/jquery.mobile/jquery.mobile-1.0b2.min.js" type="text/javascript"></script> <script src="/Scripts/jquery.unobtrusive-ajax.min.js" type="text/javascript"></script>
jquery関連の読み込みがMicrosoftMvcAjaxの後に定義されています。こんな感じにしたらどうなりますか?
<script src="/Scripts/jquery-1.6.4.min.js" type="text/javascript"></script> <script src="/Scripts/jquery.mobile/jquery.mobile-1.0b2.min.js" type="text/javascript"></script> <%-- Microsoft AJAX --%> <script src="/Scripts/MicrosoftAjax.js" type="text/javascript"></script> <script src="/Scripts/MicrosoftMvcAjax.js" type="text/javascript"></script> <script src="/Scripts/jquery.unobtrusive-ajax.min.js" type="text/javascript"></script>
-
かるあ様
返信ありがとうございます。
また、こちらからの返信が遅くなり大変申し訳ございません。
ご指摘いただいたようにAjaxファイルのインクルードの順番を変更してみましたが
やはり、「undefined」の画面が表示されました。
firefoxのwebコンソールで動作を確認したところ
jquerymobileをインクルードせずにデバッグするとこちらが想定してるように
一覧をユーザーコントロールにて表示することができます。
この時、もちろんPOST処理は一回です。
また、jquerymobileをインクルードしてデバッグすると
なぜかPOST処理が2回走り、「undefined」の画面が表示されます。
現象としてはいったん表示している途中にエラーが起きて、再度POST処理を
行っているような感じに見えます。
もしくは2度POST処理が走ってるので、必要な情報がなく「undefined」と
なっているような感じです。
-
totojo様
返信ありがとうございます。
もともとMVC2で開発してたのをMVC3へ開発環境を変更しました。
その流れでjsファイルの読み込みはなんとなくそのまま引き継いでいました。
MicrosoftAjax.js と MicrosoftMvcAjax.js を使わなくても動くのですね。
それと、 jquery.unobtrusive-ajax.min.jsに関しては今回の件でネットなどで調べているときに
このファイルがないと非同期通信ができないという記述を見かけたのでなんとなく入れていました。
web.comfigの設定も必要だったのですね。
ご指摘に従って、MicrosoftAjax.js と MicrosoftMvcAjax.js をインクルードせずに動作確認したところ
sys is not defined のエラーで同じく「undefined」の画面となります。
さらにweb.configに<add key="UnobtrusiveJavaScriptEnabled" value="true"/>を加えて再度確認すると
やはり最初と同じくPOST処理が2回起こり、「undefined」の画面になってしまいました。
知識不足で大変申し訳ありませんが、もし他に設定など足りないようなところがあれば
ご指摘いただければと思います。
- 編集済み pjiketomo 2011年10月18日 2:44
-
そういえば、POST が 2 回というので少し思い当たる話が。
[ASP.NET MVC3]JsonResultを指定したビューに返したい
http://social.msdn.microsoft.com/Forums/ja-JP/aspnetja/thread/165079d9-53be-4b14-8579-8ef0ebcdf422
jquery.unobtrusive-ajax.min.js は要らない気がします。 -
次の記事が参考になると思います。
Create a blog with JQuery Mobile and ASP.NET MVC 3 with C# | Giant Flying Saucer
http://www.giantflyingsaucer.com/blog/?p=2205
Create.cshtml あたりが肝になりそうですが、入力フォーム自体は Html.BeginForm で作成していて、
submit 時に $.ajax で自前で AJAX リクエストを飛ばしているようです。