none
MVC3+jquerymobile でユーザーコントロール表示時にundefinedの表示 RRS feed

  • 質問

  • いつも参考にさせていただいてます。

    環境: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 S0007000

            Function Index() As ActionResult
                Return View()
            End Function

            Function Search() As ActionResult
                Try
                    model.OT_OROSHI = Request.Cookies("ck_OROSI_CD").Value                         model.OT_KAIUKE_CD = Request.Cookies("ck_KAIUKE_CD").Value  

                    model.GET_ITIBI()

               model.Gyosya_kbn = Request.Cookies("ck_Gysa_Kbn").Value

                    Return View(model)

                Catch ex As Exception
                         Return View()
                End Try

            End Function

           '******************************************************************
            ' 関数     :
            ' 機能説明 : 検索結果を表示
            '******************************************************************
            <HttpPost()> _
            <OutputCache(Location:=OutputCacheLocation.None)> _
            Function HcyuList(ByVal collection As FormCollection) As ActionResult
                Dim items As New List(Of SelectListItem)
                Dim strBsan As String

                Dim tb As DataTable
                Dim dv As DataView
                Dim model As New S0007000
                Dim Hcyu As New HcyuList

                Try
                    UpdateModel(model, collection)
                Catch ex As Exception
                    ModelState.AddModelError("", "エラーが発生しました。")
                    Return PartialView(Hcyu)
                End Try

                    If 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)
                        Next

                        Hcyu.Total = dv.Count
                        Return PartialView(Hcyutb)

                     End If
                Else
                    Return New EmptyResult()

                End If
            End Function

    2011年10月12日 5:53

回答

すべての返信

  • パッと見なんですが、この部分 

            <%-- 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>


    2011年10月13日 7:22
  • かるあ様

    返信ありがとうございます。

    また、こちらからの返信が遅くなり大変申し訳ございません。

     

    ご指摘いただいたようにAjaxファイルのインクルードの順番を変更してみましたが

    やはり、「undefined」の画面が表示されました。

     

    firefoxのwebコンソールで動作を確認したところ

    jquerymobileをインクルードせずにデバッグするとこちらが想定してるように

    一覧をユーザーコントロールにて表示することができます。

    この時、もちろんPOST処理は一回です。

     

    また、jquerymobileをインクルードしてデバッグすると

    なぜかPOST処理が2回走り、「undefined」の画面が表示されます。

     

    現象としてはいったん表示している途中にエラーが起きて、再度POST処理を

    行っているような感じに見えます。

    もしくは2度POST処理が走ってるので、必要な情報がなく「undefined」と

    なっているような感じです。

    2011年10月17日 1:40
  • そもそも MicrosoftAjax.js と MicrosoftMvcAjax.js を使わない、というのはどうでしょうか。
    MVC 3 だし jquery.unobtrusive-ajax.min.js も使っているようですので、Web.config で UnobtrusiveJavaScriptEnabled はきっと True になってますよね。
    ASP.NET AJAX も使っていなさそうですし。
    2011年10月17日 4:34
  • 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
    2011年10月18日 2:12
  • そういえば、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 は要らない気がします。
    • 回答の候補に設定 山本春海 2011年11月7日 8:17
    • 回答としてマーク 山本春海 2011年11月9日 7:40
    2011年10月18日 3:08
  • totojo様

    返信ありがとうございます。

    [ASP.NET MVC3]JsonResultを指定したビューに返したい

    の方はActionlinkでjavascript自作されてるのですね。

     

    jquery.unobtrusive-ajax.min.js をはずして見たところ、確かにPOSTの処理は一度だけになりました。

    ですが、今度は「sys is not defined」のエラーが出て「undefined」の画面が表示されます。

     

    何か根本的に設定など足りていないということなのでしょうか?


    2011年10月18日 7:48
  • 次の記事が参考になると思います。

    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 リクエストを飛ばしているようです。
    • 回答の候補に設定 山本春海 2011年11月7日 8:17
    • 回答としてマーク 山本春海 2011年11月9日 7:40
    2011年10月19日 9:43
  • totojo様

    返信ありがとうございます。

    また、こちらからの返信が遅くなり大変申し訳ございません。

     

    やはり、 Ajax.BeginFormの処理のあたりがあやしいようなので、自前でAJAXリクエストを飛ばす方が

    無難そうではありますね。

    参考にしてみます。ありがとうございます。

    2011年10月25日 2:22