如何通过UI实现RSVP功能？Rails框架下用户自助RSVP需求

Got it, let's turn that console-only RSVP into a user-friendly button on your post show page. Here's how to do it step by step, building on your existing setup:

1. Add RSVP Actions to Your Controller #

First, you'll need a controller to handle creating and destroying RSVPs (since users might want to cancel their RSVP too). Generate an rsvps_controller if you don't have one already:

rails generate controller rsvps create destroy --skip-assets --skip-helper --skip-template-engine

Then update the controller with these actions, including user authentication (assuming you're using Devise or a similar auth system):

# app/controllers/rsvps_controller.rb
class RsvpsController < ApplicationController
  before_action :authenticate_user! # Ensure users are logged in to RSVP
  before_action :set_post

  def create
    @rsvp = current_user.rsvps.build(post: @post)
    if @rsvp.save
      respond_to do |format|
        format.html { redirect_to @post, notice: 'Successfully RSVPed!' }
        format.js # For AJAX-powered page updates
      end
    else
      respond_to do |format|
        format.html { redirect_to @post, alert: 'Could not RSVP to this post.' }
        format.js
      end
    end
  end

  def destroy
    @rsvp = current_user.rsvps.find_by(post: @post)
    if @rsvp&.destroy
      respond_to do |format|
        format.html { redirect_to @post, notice: 'RSVP canceled successfully.' }
        format.js
      end
    else
      respond_to do |format|
        format.html { redirect_to @post, alert: 'Could not cancel your RSVP.' }
        format.js
      end
    end
  end

  private

  def set_post
    @post = Post.find(params[:post_id])
  end
end

2. Configure Nested Routes #

Tie RSVPs to specific posts by adding nested routes in routes.rb:

# config/routes.rb
Rails.application.routes.draw do
  # ... your existing routes ...
  resources :posts do
    resources :rsvps, only: [:create, :destroy]
  end
end

3. Add the RSVP Button to Your Post Show Page #

Update your show.html.erb to include a dynamic button that changes based on whether the user has already RSVPed:

# app/views/posts/show.html.erb
<p id="notice"><%= notice %></p>
<p>
  <strong>Date:</strong>
  <%= @post.date %> <!-- Replace with your actual post date display -->
</p>

<!-- RSVP Button Section -->
<div id="rsvp-container">
  <% if user_signed_in? %>
    <% if current_user.rsvps.exists?(post: @post) %>
      <%= button_to "Cancel RSVP", post_rsvp_path(@post, current_user.rsvps.find_by(post: @post)), 
                    method: :delete, remote: true, class: "btn btn-danger" %>
    <% else %>
      <%= button_to "RSVP Now", post_rsvps_path(@post), 
                    method: :post, remote: true, class: "btn btn-primary" %>
    <% end %>
  <% else %>
    <p>Please <%= link_to "log in", new_user_session_path %> to RSVP to this post.</p>
  <% end %>
</div>

4. Add AJAX Response Templates #

Create JavaScript templates to update the button and feedback message without reloading the page:

For the create action:

# app/views/rsvps/create.js.erb
$("#rsvp-container").html("<%= j button_to 'Cancel RSVP', post_rsvp_path(@post, @rsvp), method: :delete, remote: true, class: 'btn btn-danger' %>");
$("#notice").html("<%= j 'Successfully RSVPed!' %>");

For the destroy action:

# app/views/rsvps/destroy.js.erb
$("#rsvp-container").html("<%= j button_to 'RSVP Now', post_rsvps_path(@post), method: :post, remote: true, class: 'btn btn-primary' %>");
$("#notice").html("<%= j 'RSVP canceled.' %>");

5. Optional: Add Uniqueness Validation #

Prevent users from RSVPing to the same post multiple times by updating your rsvp.rb model:

# app/models/rsvp.rb
class Rsvp < ApplicationRecord
  belongs_to :user
  belongs_to :post

  validates :user_id, uniqueness: { scope: :post_id, message: "You've already RSVPed to this post!" }
end

That's all! Now users can RSVP or cancel their RSVP directly from the post page, no console required.

内容的提问来源于stack exchange，提问作者user9601213