Question

所以发生了什么：

我在Umbraco 7中有一个父模板，它应该是一个字典，我已经使每个字典单词成为一个没有模板的doctype，只有两个属性，一个名为'leksi'的标题和一个富文本编辑器，其中描述该词将被称为'perigrafileksis'。我在该页面的顶部有一个搜索表单。我希望搜索表单在原始单词所在的空间中搜索标题或描述（在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来阻止提交＆gt;刷新页面，但我不知道该写什么。另外，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，它是一种简单的消费方式。在客户端代码上显示它。

您也可以使用Surface控制器并使用 Ajax.BeginForm 辅助方法执行操作，但您的案例研究需要适用于此并且确实需要这种方式。检查我们在https://our.umbraco.org/forum/developers/api-questions/56579-Umbraco-7-Surfacce-Controller-AjaxBeginForm上讨论的实现之一。

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

1 个答案: