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

Question

发生什么了：

我在Umbraco 7中有一个父模板，该模板应该是字典，我已经使每个字典单词成为无模板doctype，仅具有两个属性，一个名为“ leksi”的标题和一个富文本编辑器，其中单词的描述将被称为“ perigrafileksis”。 我在该页面上方有一个搜索表单。 我希望搜索表单在原始单词所在的空间中搜索标题或描述（在Umbraco内）而无需刷新页面。 图片以便于理解：

预习

我正在使用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中的逻辑是什么？ 我是否需要一个额外的partial，使其呈现与原始页面相同的结果并使其成为隐藏的div或什么？ 我真的很困惑 另外，我想我需要使用JQuery来阻止“提交”>“刷新”页面，但是我不知道在那写什么。 另外，AJAX是在脚本内还是在页面内？ 还是在单独的文件中？

我们正在失去战争，请发送帮助！

Answer 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，这是一种在客户端代码上使用和显示JSON的简便方法。

您也可以使用Surface控制器并使用Ajax.BeginForm helper方法执行操作，但是您的案例研究需要为此而做，并且确实需要这种处理方式。 检查在我们的网站上讨论的实现之一： 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