Verbergen Sie den Params-Hash und ersetzen Sie ihn durch eine sauberere URL

Question

Die Standard-URL, die nach einer get-Anfrage in Rails generiert wird, ist nicht sehr nett anzusehen.

Mit dem meta_search-Juwel in einer Rails 3-Anwendung habe ich ein Auswahlmenü erstellt, um eine Liste von Artikeln nach Kategorie zu filtern. Der Code sieht wie folgt aus:

<%= form_for @search, :url => articles_path, :html => {:method => :get} do |f| %> 
    <%= f.label :category_name_equals, "Filter by category:" %> 
    <%= f.collection_select :category_name_equals, 
    Category.all(:order => "name"), :name, :name, :include_blank => true %> 
    <%= f.submit "Search" %> 
<% end %> 

<table> 
    <tr> 
    <th>Title</th> 
    <th>Category</th> 
    </tr> 
    <% for article in @articles %> 
    <tr> 
    <td><%= link_to article.title, article %></td> 
    <td><%= article.category.name %></td> 
    </tr> 
    <% end %> 
</table> 

Gerade jetzt, wenn das Formular abgeschickt wird, eine lange URL zurückgegeben wird, mit dem params hash:

http://localhost:3000/articles?utf8=%E2%9C%93&search[category_name_equals]= 
Reviews&commit=Search 

ich die URL so sauber wie möglich halten wollen, zum Beispiel:

http://localhost:3000/articles/category/reviews 

oder

http://localhost:3000/articles?category=reviews 

Was sind einige Lösungen, um die params-Hash-URL für Menschen lesbarer zu machen?

Answer 1

Sie können das nicht mit einem Formular mit Get-Methode tun. Es ist ein HTML-Problem.

Sie müssen Javascript hinzufügen, um Ihre URL in eine hübsche URL zu konvertieren, oder Sie können URL in Ihrem Controller in Ihrer Rails-Anwendung abrufen und auf Ihre hübsche URL umleiten.

Answer 2

Wie Shingara sagte, verwenden Sie kein Formular überhaupt. Statt eine Liste von Links zu verwenden, und ausgefallene Dinge mit einigen css/js, die Ihre Liste behave macht/aussehen wie ein Drop-Down-Menü:

<ul> 
    <% Category.all.each do |c| %> 
    <li> 
     <%= link_to(c.name, :controller => :articles, :action => :browse, :category => c.tag) %> 
    </li> 
    <% end %> 
</ul> 

Für Ihre Routen, Sie so etwas wie dies wünschen werden, aber Dryer:

routes.connect '/articles/browse/:category', :controller => :articles, :action => :browse 

Sie viele Beispiele für CSS/JS-Dropdown-Listen sehr leicht finden können: http://bit.ly/dRtQNd

Sie Beispiele für gut CSS/JS Dropdown-Menüs mit erheblich mehr Aufwand finden können ... es sei denn, Sie geben up einfach nach adv fragen Eis auf Stapelüberlauf wieder :-). (Codieren rudimentären Versionen von Standard-UI-Komponenten von Grund auf neu ist in diesen Tagen einfach mit jQuery und whatnot, so viele Leute tun es. Coding diejenigen, die "richtig fühlen" ist tatsächlich sehr schwer, weniger Leute tun das!)

P.S. Das form_for @search sieht total komisch aus. Dies ist nicht, was für ...

bestimmt war