在Sitecore中使用AJAX过滤页面内容

时间:2022-08-31 23:35:16

I have a page in Sitecore that displays the list of clients. There's a form with two select boxes that should filter out clients not matching specified criterias. Clients list should be refreshed via AJAX everytime user changes one of the values in the form or after clicking Submit button if JS is disabled.

我在Sitecore中有一个页面,显示客户列表。有一个表单,有两个选择框,应该过滤掉不匹配指定标准的客户端。客户端列表应该在用户每次更改表单中的一个值时通过AJAX刷新,或者在禁用JS的情况下单击Submit按钮之后刷新。

What is the suggested approach I should take to have this working in Sitecore? I'm not sure about Sitecore part, I know how to call AJAX methods/

在Sitecore中,我应该采取什么方法来实现这一点?我不太清楚Sitecore部分,我知道如何调用AJAX方法

3 个解决方案

#1


3  

I found a solution that feels a bit better then what other have proposed here. I've created a new Device in Sitecore, created a new layout in it in which I just added one placeholder. Then I can access all site content using this method. And assigning a URL parameter a=1 makes all URLs with this param automatically redirect to this device. I don't think it can be made much simpler.

我找到了一种比其他人提出的更好的解决方案。我在Sitecore中创建了一个新设备,并在其中创建了一个新的布局,我在其中添加了一个占位符。然后我可以使用这个方法访问所有的站点内容。分配URL参数a=1将使具有此参数的所有URL自动重定向到此设备。我不认为它可以变得简单得多。

#2


1  

If you're using Sitecore + ASP.NET Webforms, your quickest/easiest solution is simply to use a .NET UpdatePanel. It's not the most flexible AJAX solution but it certainly gets the job done, with minimal effort. See the documentation.

如果你使用Sitecore + ASP。NET Webforms,最快/最简单的解决方案就是使用。NET UpdatePanel。这并不是最灵活的AJAX解决方案,但它确实完成了任务,而且花费了很少的精力。见文档。

If you are using XSL Renderings in Sitecore, the solution would be more complicated. You'd likely need to create a new Rendering what just lists the clients, then use JQuery to retrieve and replace that section of the DOM.

如果您在Sitecore中使用XSL呈现,那么解决方案将更加复杂。您可能需要创建一个只列出客户端的新呈现,然后使用JQuery检索和替换DOM的那个部分。

#3


0  

From your question, I assume the page will initially display a full list of clients to be filtered down. If so, do you need to fetch any more data from the server? It seems that's duplicating effort. Here's what I'd do:

根据您的问题,我假设页面最初将显示要过滤的完整客户端列表。如果需要,是否需要从服务器获取更多数据?这似乎是重复的努力。这就是我做的事情:

Create a div for each client, with classes representing the filtering categories:

为每个客户端创建一个div,使用表示过滤类别的类:

<div class="client design development">Microsoft</div>
<div class="client design">Apple</div>

Then, when each filter is changed, show/hide the divs based on class selectors. Depending on the target browser and/or js library, you may be able to use CSS attribute selectors.

然后,当每个过滤器被更改时,根据类选择器显示/隐藏div。根据目标浏览器和/或js库,您可以使用CSS属性选择器。

#1


3  

I found a solution that feels a bit better then what other have proposed here. I've created a new Device in Sitecore, created a new layout in it in which I just added one placeholder. Then I can access all site content using this method. And assigning a URL parameter a=1 makes all URLs with this param automatically redirect to this device. I don't think it can be made much simpler.

我找到了一种比其他人提出的更好的解决方案。我在Sitecore中创建了一个新设备,并在其中创建了一个新的布局,我在其中添加了一个占位符。然后我可以使用这个方法访问所有的站点内容。分配URL参数a=1将使具有此参数的所有URL自动重定向到此设备。我不认为它可以变得简单得多。

#2


1  

If you're using Sitecore + ASP.NET Webforms, your quickest/easiest solution is simply to use a .NET UpdatePanel. It's not the most flexible AJAX solution but it certainly gets the job done, with minimal effort. See the documentation.

如果你使用Sitecore + ASP。NET Webforms,最快/最简单的解决方案就是使用。NET UpdatePanel。这并不是最灵活的AJAX解决方案,但它确实完成了任务,而且花费了很少的精力。见文档。

If you are using XSL Renderings in Sitecore, the solution would be more complicated. You'd likely need to create a new Rendering what just lists the clients, then use JQuery to retrieve and replace that section of the DOM.

如果您在Sitecore中使用XSL呈现,那么解决方案将更加复杂。您可能需要创建一个只列出客户端的新呈现,然后使用JQuery检索和替换DOM的那个部分。

#3


0  

From your question, I assume the page will initially display a full list of clients to be filtered down. If so, do you need to fetch any more data from the server? It seems that's duplicating effort. Here's what I'd do:

根据您的问题,我假设页面最初将显示要过滤的完整客户端列表。如果需要,是否需要从服务器获取更多数据?这似乎是重复的努力。这就是我做的事情:

Create a div for each client, with classes representing the filtering categories:

为每个客户端创建一个div,使用表示过滤类别的类:

<div class="client design development">Microsoft</div>
<div class="client design">Apple</div>

Then, when each filter is changed, show/hide the divs based on class selectors. Depending on the target browser and/or js library, you may be able to use CSS attribute selectors.

然后,当每个过滤器被更改时,根据类选择器显示/隐藏div。根据目标浏览器和/或js库,您可以使用CSS属性选择器。