使用MVC / AJAX / JQuery搜索Umbraco，无需刷新页面

Question

So what's going on: 发生什么了：

I have a parent template in Umbraco 7 which is supposed to be a dictionary and I've made each dictionary word a template-less doctype with only two properties, a title called 'leksi' and a rich text editor where the description of the word will be called 'perigrafileksis'. 我在Umbraco 7中有一个父模板，该模板应该是字典，我已经使每个字典单词成为无模板doctype，仅具有两个属性，一个名为“ leksi”的标题和一个富文本编辑器，其中单词的描述将被称为“ perigrafileksis”。 I have a search form on top of that page. 我在该页面上方有一个搜索表单。 I want the search form to search for the title or the description (within Umbraco) WITHOUT refreshing the page, in the space where the original words were. 我希望搜索表单在原始单词所在的空间中搜索标题或描述（在Umbraco内）而无需刷新页面。 Picture for easier understanding: 图片以便于理解：

Preview 预习

I'm doing this with MVC (or will try to do it) but I pretty much have almost no idea how to use AJAX even after reading W3Schools tutorials and the such. 我正在使用MVC（或尝试这样做），但是即使阅读了W3Schools教程之类的内容，我几乎也不知道如何使用AJAX。

So far I have: 到目前为止，我有：

Controller: 控制器：

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);
            }
        }
    }
}

Partial: 部分：

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

And the actual Dictionary Page where the search form partial gets rendered: 以及呈现搜索表单部分的实际词典页面：

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

You don't have to solve it for me, I just want to understand the logic of it. 您不必为我解决它，我只想了解它的逻辑。 Even if you pointed me towards a tutorial that's doing what I want to do would be great because I have found none. 即使您将我引向正在做我想做的事情的教程，也将是很棒的，因为我没有找到任何东西。

The question is, what's the logic in AJAX? 问题是，AJAX中的逻辑是什么？ Do I need to have an extra partial that will render the same results as the original page and make that a hidden div or what? 我是否需要一个额外的partial，使其呈现与原始页面相同的结果并使其成为隐藏的div或什么？ I'm really confused. 我真的很困惑 Also, I guess I need JQuery to prevent the submit > refresh page but I don't know what to write there. 另外，我想我需要使用JQuery来阻止“提交”>“刷新”页面，但是我不知道在那写什么。 Also, is AJAX within a script or just inside the page? 另外，AJAX是在脚本内还是在页面内？ Or in a separate file? 还是在单独的文件中？

We ARE LOSING THE WAR, SEND HELP! 我们正在失去战争，请发送帮助！

Answer 1

How many words are you expecting to have in your dictionary? 您希望词典中有多少个单词？ Maybe it's a possible solution to just sort it with some JS / jQuery plugin (check: https://www.sitepoint.com/14-jquery-live-search-plugins/ ) or even jQuery UI autocomplete? 也许仅使用一些JS / jQuery插件（检查： https ： //www.sitepoint.com/14-jquery-live-search-plugins/ ）或什至jQuery UI自动完成对它进行排序是一种可行的解决方案？

If you want to stay inside the Umbraco and perform the action / searching via AJAX (or AJAJ) call, I suggest you to move the logic from your surface controller into the Web API controller in the first step. 如果您想留在Umbraco中并通过AJAX（或AJAJ）调用执行操作/搜索，建议您第一步将逻辑从表面控制器移至Web API控制器。 Umbraco is offering us an easy way to access Umbraco services and features by inheriting UmbracoApiController in your class. Umbraco通过在您的类中继承UmbracoApiController ，为我们提供了一种访问Umbraco服务和功能的简便方法。 You can read more about it here: https://our.umbraco.org/documentation/reference/routing/webapi/ . 您可以在这里阅读有关它的更多信息： https : //our.umbraco.org/documentation/reference/routing/webapi/ 。 In your method you can just grab the children from the desired place and return it in the form you want to consume it in the further steps. 在您的方法中，您可以仅从所需位置抓取孩子，然后以您想在以后的步骤中使用它的形式返回它。

When you have you WebAPI controller set up, you are able to access the action from your Javascript code. 设置好WebAPI控制器后，便可以从Javascript代码访问操作。 Depending on the client-side library used, the call will be different, but you'll access the method via autogenerated URL eg http://yoursite.com/umbraco/api/dictionary/getallitems . 根据使用的客户端库，调用将有所不同，但是您将通过自动生成的URL（例如http://yoursite.com/umbraco/api/dictionary/getallitems）访问该方法。

If you will return JSON, it's an easy way to consume & display it on your client-side code. 如果您将返回JSON，这是一种在客户端代码上使用和显示JSON的简便方法。

You can also go with Surface controllers and perform the action using Ajax.BeginForm helper method, but your case study needs to be fitted for this and really require this way of doing things. 您也可以使用Surface控制器并使用Ajax.BeginForm helper方法执行操作，但是您的案例研究需要为此而做，并且确实需要这种处理方式。 Check one of the implementation discussed on the Our: https://our.umbraco.org/forum/developers/api-questions/56579-Umbraco-7-Surfacce-Controller-AjaxBeginForm . 检查在我们的网站上讨论的实现之一： https : //our.umbraco.org/forum/developers/api-questions/56579-Umbraco-7-Surfacce-Controller-AjaxBeginForm 。

使用MVC / AJAX / JQuery搜索Umbraco，无需刷新页面

问题描述

1 个解决方案

解决方案1
1 已采纳 2016-10-04 08:23:13

使用MVC / AJAX / JQuery搜索Umbraco，无需刷新页面

问题描述

1 个解决方案

解决方案1 1 已采纳 2016-10-04 08:23:13

解决方案1
1 已采纳 2016-10-04 08:23:13