Pop up window from Controller

5 posts, 1 answers
  1. Donna Stewart
    Donna Stewart avatar
    127 posts
    Member since:
    Apr 2009

    Posted 03 Oct 2013 Link to this post

    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:8773972834 " class="tele">877.397.2834</a><br />
                                <strong>phone (local):</strong> <a href="tel:9015079307 " class="tele">901.507.9307</a><br />
                                <strong>fax:</strong> 901.507.9329<br />
                                <strong>email:</strong><span class="gmcgreenlink"><a href="mailto:info@greenmountainconsulting.com">info@greenmountainconsulting.com</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");
    }

  2. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 04 Oct 2013 Link to this post

    Hello Donna,

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

    Regards,
    Dimo
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Donna Stewart
    Donna Stewart avatar
    127 posts
    Member since:
    Apr 2009

    Posted 04 Oct 2013 Link to this post

    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
  5. Donna Stewart
    Donna Stewart avatar
    127 posts
    Member since:
    Apr 2009

    Posted 04 Oct 2013 Link to this post

    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
  6. Answer
    Donna Stewart
    Donna Stewart avatar
    127 posts
    Member since:
    Apr 2009

    Posted 04 Oct 2013 Link to this post

    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
Back to Top
UI for ASP.NET MVC is VS 2017 Ready