2016-10-03 20 views
0

だから何が起こっているの:私は辞書であると考えられるUmbraco 7で親テンプレートを持っていると私はテンプレートがレスを各辞書の単語を作った検索MVC/AJAX/jQueryを使ってUmbraco

「leksi」と呼ばれるタイトルと、単語の説明が「perigrafileksis」と呼ばれるリッチテキストエディタの2つのプロパティのみを持つdoctypeです。私はそのページの上に検索フォームを持っています。私は元の単語があった場所で、ページを更新せずにタイトルまたは説明(Umbraco内)を検索するために検索フォームを必要とします。理解を容易にするために絵を:

Preview

私はMVCでこれをやっている(またはそれをしようとします)が、私はかなりさえW3Schoolsのチュートリアルと、このようなを読んだ後、AJAXを使用する方法はほとんど分かりません。

は、これまでのところ私が持っている:

コントローラー:

using MyUmbraco.Models; 
using System.Web.Mvc; 
using Umbraco.Web.Mvc; 

namespace MyUmbraco.Controllers 
{ 
    public class SearchDictionarySurfaceController : SurfaceController 
    { 
     // GET: SearchDictionarySurface 
     [HttpPost] 
     [ValidateAntiForgeryToken] 
     public ActionResult HandleDictionarySearching(SearchBarViewModel model) 
     { 
      if (!string.IsNullOrEmpty(model.query)) 
      { 
       var query = Request.QueryString["query"]; 
       //var url = Umbraco.Content("1409"); 
       return CurrentUmbracoPage(); 

      } 

      else 
      { 
       return new RedirectResult("/homePage/", false); 
      } 
     } 
    } 
} 

部分:

@inherits Umbraco.Web.Mvc.UmbracoViewPage<SearchBarViewModel> 
@using MyUmbraco.Controllers 
@using MyUmbraco.Models 
@using Umbraco.Web; 

@{ 
    var node = UmbracoContext.Current.PublishedContentRequest.PublishedContent; 
} 





@using (Html.BeginUmbracoForm<SearchDictionarySurfaceController>("HandleDictionarySearching", null, new { @class = "input-group input-lg add-on" })) 
{ 
    @Html.ValidationSummary(true) 
    @Html.AntiForgeryToken() 

    @*<form action="" method="post" target="_blank" class="input-group input-lg add-on searchbarbackground">*@ 
    @Html.TextBoxFor(model => model.query, null, new { @class = "form-control searchbar", @method = "post", @target = "_blank", @id = "query" }) 

    <div class="input-group-btn searchbutton"> 
     <button class="btn" type="submit" tabindex="2" id="search"> 
      @if (node == Umbraco.TypedContent(1254)) 
      { 
       <img src="~/css/images/focal-lense-brown.png" /> 
      } 
      else 
      { 
       <img src="~/css/images/focal-lense.png" /> 
      } 

     </button> 
    </div> 
      @*</form>*@ 

} 


<script> 
//the script is the one that tells the controller to send the data to the model. If we don't have that, we can't do anything. 
    $(document).ready(function() { 

     $("#search").click(function (event) { 
      event.preventDefault(); 
      xhttp.open("POST", "ajax_info.txt", true); 
      xhttp.send(); 
     }); 
    }); 
</script> 

と部分検索フォームがレンダリングされる実際の辞書のページ:

<body> 
    @Html.Partial("_Navbar") 
    <div class="container plainwhite"> 
     <div class="row"> 
      <div class="col-md-12"> 
       @{ Html.RenderPartial("_DictionarySearchBar", new SearchBarViewModel());} 
      </div> 
     </div> 

     <div class="row"> 

      @foreach (var item in Model.Content.Descendants("lekseisDiatrofikouLeksikou")) 
      { 





       <div class="col-sm-3 styled"> 
        <button data-id="@id" type="button" class="btn"> 
         @(item.GetPropertyValue<string>("leksi")) 
        </button> 
        <div id="@("button-wrapper"+id)" class="col-xs-12 styled2 text-center nopadding"> 
         @Html.Raw(item.GetPropertyValue<string>("perigrafiLeksis")) 
        </div> 
       </div> 
       id++; 
      } 

     </div> 
    </div> 



      @Html.Partial("_FooterMenu") 
</body> 

あなたは私のためにそれを解決する必要はありません、私はちょうどそれの論理を理解したい。私が何も見つけていないので、私がしたいことをやっているチュートリアルに私を指摘しても、すばらしいことになります。

質問は、AJAXのロジックは何ですか?私は元のページと同じ結果をレンダリングする余分な部分を持って、それを隠しdivまたは何にする必要がありますか?私は本当に混乱しています。また、私は、送信>更新ページを防ぐためにJQueryが必要だと思いますが、そこに何を書き込むのか分かりません。また、AJAXはスクリプト内にあるのか、ページ内だけにあるのでしょうか?または別のファイルで?

私たちは戦争を失っている、助けを送ろう!

+0

本当に誰もインターネットの歴史の中で今までそれのようなものに出くわしたことがありますか? – Jabberwocky

答えて

1

あなたの辞書にいくつありますか? JS/jQueryプラグイン(チェック:https://www.sitepoint.com/14-jquery-live-search-plugins/)やjQuery UIオートコンプリートでもソートすることは可能でしょうか?

Umbracoの中にとどまり、AJAX(またはAJAJ)コールを使用してアクション/検索を実行する場合は、サーフェスコントローラからロジックを最初のステップでWeb APIコントローラに移動することをお勧めします。 Umbracoは、クラス内にUmbracoApiControllerを継承して、Umbracoのサービスと機能に簡単にアクセスする方法を提供しています。あなたはそれについてここで詳しく読むことができます:https://our.umbraco.org/documentation/reference/routing/webapi/。あなたの方法では、あなたは望みの場所から子供をつかんで、次のステップでそれを消費したいフォームに戻すことができます。

WebAPIコントローラをセットアップすると、JavaScriptコードからアクションにアクセスできます。使用されるクライアントサイドのライブラリによっては、呼び出しは異なりますが、自動生成されたURLを使用してメソッドにアクセスします。 http://yoursite.com/umbraco/api/dictionary/getallitems

JSONを返す場合は、&をクライアントサイドコードに表示するのは簡単な方法です。

Surfaceコントローラを使用して、Ajaxを使用してアクションを実行することもできます。BeginFormヘルパーメソッドですが、これを行うためにはケーススタディを組み込む必要があり、実際にはこのようなことが必要です。 Our:https://our.umbraco.org/forum/developers/api-questions/56579-Umbraco-7-Surfacce-Controller-AjaxBeginFormで議論された実装の1つをチェックしてください。

+0

私はそれを多く感謝します。ありがとうございました。私はその場所のいたる所で探してきました。私は基本的に私が作ってきた「辞書」の親テンプレートを子どもたちが検索したいと思っていました。 私は学習の過程にあるのでプラグインを使いたくないし、遅かれ早かれこれを学ばなければならない。 – Jabberwocky

+0

間違いなく。私はあなたの検索を信じられないほど速くするために索引を調べることもお勧めします。アクションメソッド内のインデックスだけで検索を実行し、結果をフロントエンドで表示/管理する形式で返すことができます。ハッピーコーディング! –

+0

私はそれを行うことができたと思ったが、私は文字通り、これをすべて行うためにMVCのコントローラを設定する方法については全く考えていないような初心者だ。わたしは勉強が必要。ありがとうございました。 – Jabberwocky

関連する問題