Pop up window from Controller

[Donna Stewart]

It has been a while since I've used any Telerik/Kendo controls.  I have a Contact Us form from which I'd like to pop up a Thank You window on a successful submit.  The form submits to the Controller which validates the input and sends an email and if all is successful, I return a partial view which should be the pop up.  However, this partial view is showing in the main browser window and I'm getting the $ not defined error.  I am obviously missing something, but I'm rusty and in a hurry and can't quite figure out what it is...  Any help is very much appreciated!

Thank you,
Donna

Here's the Contact Us page code:

@model GMCWeb.Models.ContactViewModel

@{
    Layout = "~/Views/Shared/_PublicLayout.cshtml";
}
<div id="page">
    <div class="contact-page hero-unit">
        <div class="container">
            <h1>Contact</h1>
        </div>
        <!--close container-->
    </div>
    <!--close hero-unit-->

    <div class="container clearfix" id="main-content">
        <div class="row-fluid reverse-order contact-page">
            <h3 class="clearfix"> Green Mountain Consulting's Parcel Spend Management solution gives you more for your money.  Contact us today to find out how to start saving more. </h3>
            <hr />
            <div class="span7">
                <div class="row-fluid">
                    <div class="span6 ">
                        <p><span class="company-name"><strong>Green Mountain Consulting</strong></span><br />
                            7240 Goodlett Farms Pkwy<br />
                            Memphis, TN 38016<br />
                            <strong>phone (toll free):</strong> <a href="tel:[phone] " class="tele">877.397.2834</a><br />
                            <strong>phone (local):</strong> <a href="tel:[phone] " class="tele">901.507.9307</a><br />
                            <strong>fax:</strong> 901.507.9329<br />
                            <strong>email:</strong><span class="gmcgreenlink"><a href="mailto:[e-mail]">[e-mail]</a></span></p>
                        <!--close input-append-->
                    </div>
                    <div class="span6 contact-map">
                        <p class="right">
                            <iframe width="320" height="250" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?f=q&;source=s_q&hl=en&geocode=&q=Green+Mountain+Consulting,+LLC,+Goodlett+Farms+Parkway,+Memphis,+TN&aq=0&oq=GREEN+MOUNTAIN+CONSULTING&sll=35.05842,-89.692315&sspn=0.247027,0.528374&ie=UTF8&hq=Green+Mountain+Consulting,+LLC,&hnear=Goodlett+Farms+Pkwy,+Memphis,+Shelby,+Tennessee&t=m&ll=35.180403,-89.822502&spn=0.035077,0.05476&z=13&iwloc=A&output=embed"></iframe><br /><small><a href="https://maps.google.com/maps?f=q&;source=embed&hl=en&geocode=&q=Green+Mountain+Consulting,+LLC,+Goodlett+Farms+Parkway,+Memphis,+TN&aq=0&oq=GREEN+MOUNTAIN+CONSULTING&sll=35.05842,-89.692315&sspn=0.247027,0.528374&ie=UTF8&hq=Green+Mountain+Consulting,+LLC,&hnear=Goodlett+Farms+Pkwy,+Memphis,+Shelby,+Tennessee&t=m&ll=35.180403,-89.822502&spn=0.035077,0.05476&z=13&iwloc=A" style="color:#0000FF;text-align:left">View Larger Map</a></small>

                        </p>
                    </div>
                </div>
                <h3 class="short_headline margin-top"><span>Your Area Sales Representative</span></h3>
                <div class="row-fluid salesrep-div">
                    @{Html.RenderAction("getAllSalesReps");}
                </div>
            </div>
            <!--close span5 -->

            <div class="span5 form-horizontal">
                @using(Html.BeginForm()) {
                    @Html.ValidationSummary(true)
                    <fieldset>
                        <legend>Contact GMC</legend>
                        <div class="control-group">
                            @Html.LabelFor(model => model.Name)
                            @Html.TextBoxFor(model => model.Name)
                            <p class="error">@Html.ValidationMessageFor(model => model.Name)</p>
                        </div>
                        <div class="control-group">
                            @Html.LabelFor(model => model.Phone)
                            @Html.TextBoxFor(model => model.Phone)
                            <p class="error">@Html.ValidationMessageFor(model => model.Phone)</p>
                        </div>
                        <div class="control-group">
                            @Html.LabelFor(model => model.Email)
                            @Html.TextBoxFor(model => model.Email)
                            <p class="error">@Html.ValidationMessageFor(model => model.Email)</p>
                        </div>
                        <div class="control-group">
                            @Html.LabelFor(model => model.Message)
                            @Html.TextAreaFor(model => model.Message)
                            <p class="error">@Html.ValidationMessageFor(model => model.Message)</p>
                        </div>
                        <button type="submit" class="btn btn-primary btn-large">Send</button>
                    </fieldset>
                    <div class="control-group">
                        @foreach (var item in ViewData.ModelState)
                        {
                            if (item.Value.Errors.Any())
                            {
                                foreach (ModelError e in item.Value.Errors)
                                {
                                    <p class="error">@e.ErrorMessage</p>
                                }
                            }
                        }
                    </div>
                }
            </div>
            <!--close span7 -->
        </div>
        <!--close row-fluid-->
    </div>
    <!--close .container role="main-content" -->
</div>

Here's the partial view for the popup:

@(Html.Kendo().Window()
    .Name("ContactConfirmWindow")
    .Title("Thank you for contacting us.")
    .Content(@<text>
            <div class="pull-left">
                <img src="@Url.Content("~/Content/images/3dwhitebusinessmanthankyou.png")" alt="Thank You!" />
            </div>
            <h3>We appreciate your interest in our company. We wil be in touch with you soon.</h3>
        </text>
    )
    .Iframe(true)
    .Draggable()
    .Resizable()
    .Width(400)
    .Actions(actions => actions.Minimize().Maximize().Close())
    .Deferred()
  )

<script type="text/javascript">
    $(document).ready(function () {
        $("#ContactConfirmWindow").data("kendoWindow").open();
    });
</script>

And here's the controller action:

[HttpPost]
public ActionResult Contact(ContactViewModel contactVM)
{
    if (!ModelState.IsValid)
    {
        return View(contactVM);
    }

    var contact = new Contact()
    {
        Name = contactVM.Name,
        Email = contactVM.Email,
        Phone = contactVM.Phone,
        Message = contactVM.Message
    };

    try
    {
        new Email().Send(contact);
    }
    catch(Exception ex)
    {
        ModelState.AddModelError("EmailException", "Oops!  We are sorry, but there was a problem sending your request.  We will fix this as soon as possible.  Please try again later.");
        Console.Write(ex.Message);
        return View(contactVM);
    }
    return PartialView("ContactConfirm");
}

[Dimo]

Hello Donna,

I notice that you are making a full page submit, but only returning a partial view. Why is that?

Regards,
Dimo
Telerik

[Donna Stewart]

Well, there is only one submit button so I can just do a submit on the page and I do just want a popup to say Thanks, not a full page.  And I was basically following the documentation at Home -> Getting Started -> using kendo with aspnet mvc helpers -> window -> Overview...  But maybe I'm missing something... I guess I could re-do it and use Ajax, but not sure why I should write extra code, unless that's the only way it will work.  If that's the case, I'm confused as to how your demo works....

Thanks,
Donna

[Donna Stewart]

Ok - I agree it would be better not to do a full page post, however, I'm struggling with how to handle the data validation using the data annotations on my model.  If I use jquery and Ajax post and there is a validation error, how do I use @Html.ValidationMessageFor to display the message under the specific field?  I guess I could figure out how to use the unobtrusive client-side validation.  I just thought this would be easier than all of this... that I could just use the built-in MVC validation AND be able to show a popup on success using the Kendo window.  Obviously I need to study more...  I just keep feeling like I'm missing something so obvious and/or I need to find a new profession.  Surely I am not the only person that has ever wanted to have a form post, go to the server to validate, come back to the view if any errors, or popup a success window if successful.

 I'm open to any suggestions and/or examples of how you would do this.

Thanks so much,
Donna

[Donna Stewart]

Well, I said I needed to study more - geesh, do I feel dumb.  I just found out that the unobtrusive client-side validation is handled nicely in MVC 4.  I set the following in the web.config:
<add key="ClientValidationEnabled" value="true" />
<add key="UnobtrusiveJavaScriptEnabled" value="true" />
Works rather nicely, she says as she removes the egg from her face.  :-)

So - I guess now I can switch to using the Ajax post and get that kendo window working.

Thanks,
Donna