Controller AJAX method to return AJAX ActionLink

问题:

I am fairly new to MVC and just trying to achieve something which I think shouldn't be too complicated to achieve. Just want to know what the best approach for that is. I have an Event-RSVP application (NerdDinner kind) where you go to view details of the event and then click on an AJAX link that will RSVP you for the event.

    <% 
    if (Model.HasRSVP(Context.User.Identity.Name))
    {
    %>
    <p>
    You are registered for this event!&nbsp;            
    <%: 
    Ajax.ActionLink("Click here if you can't make it!", "CancelRegistration", "RSVP", new { id = Model.RSVPs.FirstOrDefault(r => r.AttendeeName.ToLower() == User.Identity.Name.ToLower()).RSVPID }, new AjaxOptions { UpdateTargetId = "QuickRegister"}) 
    %>
    </p>
    <% 
    }
    else
    { 
    %>
    <p>
    <%: 
Ajax.ActionLink("RSVP for this event", "Register", "RSVP", new { id=Model.EventID }, new AjaxOptions { UpdateTargetId="QuickRegister" }) %>
    </p>
    <% 
    } 
    %>

Now corresponding to these two links, my functions in RSVP Controller look like these.

[Authorize, HttpPost]
public ActionResult Register(int id)
{
    Event event = eventRepository.GetEvent(id);

    if (event == null)
        return Content("Event not found");

    if (!event.IsUserRegistered(User.Identity.Name))
    {
        RSVP rsvp = new RSVP();
        rsvp.AttendeeName = User.Identity.Name;
        event.RSVPs.Add(rsvp);
        eventRepository.Save();            
    }

    return Content("Thanks, you are registered.");

}

[Authorize, HttpPost]
public ActionResult CancelRegistration(int id)
{
    RSVP rsvp = eventRepository.GetRSVP(id);    

    if (rsvp == null)
        return Content("RSVP not found");

    if (rsvp.Event.IsUserRegistered(User.Identity.Name))
    {
        eventRepository.DeleteRSVP(rsvp);
        eventRepository.Save();
    }

    return Content("Sorry, we won't be seeing you there!");
}

Both of these seem to work without any issues. Now I want to make it a little fancier by doing either of these two:

1) Return an AJAX link from controller so that when you register, you get cancel registration link shown to you without page refresh.

2) Somehow make the view rendering refreshed when the controller method has finished executing so the first code block in my question gets executed after the click of any of the AJAX links. So clicking on register will register you and show you cancel link and clicking on cancel will cancel your registration and show you register link.

Any help would be greatly appreciated. Thanks.

回答1:

You could by using jQuery show and hide these links.

I never use the Ajax.ActionLink, I do my AJAX without the helper but I think it should look loke this :

Ajax.ActionLink("Click here if you can't make it!", "CancelRegistration", "RSVP", new { id = Model.RSVPs.FirstOrDefault(r => r.AttendeeName.ToLower() == User.Identity.Name.ToLower()).RSVPID }, new AjaxOptions { UpdateTargetId = "QuickRegister", OnSuccess = "ShowHideLinks" }, new { id = "cancel-link", @style = "display:none"})
Ajax.ActionLink("RSVP for this event", "Register", "RSVP", new { id=Model.EventID }, new AjaxOptions { UpdateTargetId="QuickRegister", OnSuccess = "ShowHideLinks" }, new { id = "register-link"})

And some javascript/jQuery to initialize the current display link :

        function ShowHideLinks() {
            $('#register-link').toggle();
            $('#cancel-link').toggle();
        }
        <%: if(Model.HasRSVP(Context.User.Identity.Name)) { %>
            ShowHideLinks();
        <%: } %>

Hope this help!

回答2:

You can set the links using jQuery. I see you are passing Content from both the action methods... You can use $.post() in jQuery to execute these action and in the success eventhandler compare the returned content (you would need to send something which is more easy to compare than the current strings) and set the links appropriately.