Calling the "Regsiter" action method using AJAX (page 122)

lagonave · #1 (**permalink**) December 17th, 2010, 02:49 PM

Hello all,
For some reason, this piece of code does not work at least with me. Here is the code..
--
<%:Ajax.ActionLink("RSVP for this event", "Register","RSVP", new { id=Model.DinnerID }, new AjaxOptions { UpdateTargetId="rsvpmsg"})%>
--

Here is the error that I got: Microsoft JScript runtime error: 'Sys' is undefined.

and the dynamic code shown is ": <a href="/RSVP/Register/9" onclick="Sys.Mvc.AsyncHyperlink.handleClick(this, new Sys.UI.DomEvent(event), { insertionMode: Sys.Mvc.InsertionMode.replace, updateTargetId: 'rsvpmsg' });">RSVP for this event</a>

Do you guys have any idea why this mess happen?

~L.G

flyinhawaiian · #2 (**permalink**) December 17th, 2010, 03:11 PM

Compare your code with this:

Code:

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<NerdDinner.Models.Dinner>" %>

<script src="/Scripts/MicrosoftAjax.js" type="text/javascript"></script>
<script src="/Scripts/MicrosoftMvcAjax.js" type="text/javascript"></script>    

<script type="text/javascript">

    function AnimateRSVPMessage() {
        $("#rsvpmsg").animate({ fontSize: "1.5em" }, 400);
    }

</script>
    
<div id="rsvpmsg">

<% if (Request.IsAuthenticated) { %>

    <% if (Model.IsHostedBy(Context.User.Identity.Name)) { %>

        <p>You are the host for this event!</p>

    <% } else if (Model.IsUserRegistered(Context.User.Identity.Name)) { %>        
    
        <p>You are registered for this event!</p>
    
    <% }
       else
       { %>  
    
        <%: Ajax.ActionLink("RSVP for this event",
                             "Register", "RSVP",
                             new { id = Model.DinnerID },
                             new AjaxOptions { UpdateTargetId = "rsvpmsg", OnSuccess = "AnimateRSVPMessage" })%>         
    <% } %>
    
<% } %>
    
</div>

lagonave · #3 (**permalink**) December 17th, 2010, 03:24 PM

flyinhawaiian,

The only difference that I see from your code is the "AnimateRSVPMessage()" function that you added the code and passed it to the new Ajaxoptions as a parameter.

I don't think that adding that extra function will solve the error that I have gotten. Any other options

?

Thank you!

L.G

flyinhawaiian · #4 (**permalink**) December 17th, 2010, 04:12 PM

Check Web.config see if you have:

[code]
<pages>
<namespaces>
<add namespace="System.Web.Mvc" />
<add namespace="System.Web.Mvc.Ajax" />
<add namespace="System.Web.Mvc.Html" />
<add namespace="System.Web.Routing" />
</namespaces>
</pages>
[\code]

lagonave · #5 (**permalink**) December 17th, 2010, 04:15 PM

flyinhawaiian,

I just saw that the code that you have posted is the next step on that tutorial on page 124. I'm still trying to get page 122-123 to work according to the book. Something is missing and I can't put my hands on it yet.

Here is my complete code for the "Detail.aspx":

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<NerdDinner.Model s.Dinner>" %>
<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">

<script src="/Scripts/MicrosoftAjax.js" type="text/javascript"></script>
<script src="/Scripts/MicrosoftMvcAjax.js" type="text/javascript"></script>
Details
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

<h2><%: Model.Title %></h2>
<p>
<strong>When:</strong>
<%: Model.EventDate.ToShortDateString() %>
<strong>@</strong>
<%: Model.EventDate.ToShortTimeString() %>
</p>
<p>
<strong>Where:</strong>
<%: Model.Address %>,
<%: Model.Country %>
</p>
<p>
<strong>Description:</strong>
<%: Model.Description %>
</p>
<p>
<strong>Organizer:</strong>
<%: Model.HostedBy %> (<%: Model.ContactPhone %>)
</p>

<div id="rsvpmsg">
<% if(Request.IsAuthenticated){ %>

<% if(Model.IsUserRegistered(Context.User.Identity.Na me)) { %>
<p>You are registered for this event!</p>

<% } else { %>

<%:Ajax.ActionLink("RSVP for this event (SecondTest)", "Register","RSVP", new { id=Model.DinnerID }, new AjaxOptions { UpdateTargetId="rsvpmsg"}) %>

<% } %>

<%} else { %>
<%: Html.ActionLink("Logon to RSVP for this event.", "LogOn", "Account") %>
<% } %>
</div>

<% if (Model.IsHostedBy(Context.User.Identity.Name)) { %>
<%: Html.ActionLink("Edit Dinner", "Edit", new { id = Model.DinnerID })%> |
<%: Html.ActionLink("Delete Dinner", "Delete", new { id = Model.DinnerID })%>
<%} %>

</asp:Content>

lagonave · #6 (**permalink**) December 17th, 2010, 04:31 PM

Yes, I checked the web.config file and it has everything except for the "

Code:

...

part.

flyinhawaiian · #7 (**permalink**) December 17th, 2010, 04:39 PM

Ok one more thing to check. In my notes I put reference to ajax script in Site.Master (this is not in the book).

Try putting this between the <body> </bod> tags.
[code]
<script src="../../Scripts/MicrosoftAjax.js" type="text/javascript"></script>
<script src="../../Scripts/MicrosoftMvcAjax.js" type="text/javascript"></script>
[\code\

flyinhawaiian · #8 (**permalink**) December 17th, 2010, 04:45 PM

Also, scripts are cached. May need to clear cache in IE (Ctrl+F5). I use fiddler to clear my cache. http://www.fiddler2.com/fiddler2/

lagonave · #9 (**permalink**) December 17th, 2010, 04:56 PM

flyinhawaiian,
It works! I have removed the " <script src="../../Scripts/MicrosoftAjax.js" type="text/javascript"></script>
<script src="../../Scripts/MicrosoftMvcAjax.js" type="text/javascript"></script>

and placed them in the Site.Master as suggested. Now it works like a champ. Thank you sir for your help. I appreciate it.

~L. G.

flyinhawaiian · #10 (**permalink**) December 17th, 2010, 05:08 PM

Two heads are better than one. I knew we could both figure this out. I find that I learn more by helping others. Merry Christmas. :)

Need to download code?

Navigation