surface controller post form async update - Using Umbraco 7

Go to solution

Press Ctrl / CMD + C to copy this to your clipboard.

Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at

Tom 119 posts 447 karma points

Sep 02, 2014 @ 11:09

Surface Controller, Post form, async update

Using Umbraco 7

So I have this Surface Controller (SC) to add a email to a newsletter-list.

It works, but I would like it to only update the SC and not the whole page, when submitting.

How do I do that?

My controller:

public class NewsletterController : SurfaceController
    {

        public async Task<ActionResult> Index()
        {
            var model = new Models.NewsletterViewModel();
            if (TempData["ReturnValue"] != null)
            {
                model.ReturnValue = TempData["ReturnValue"];
                TempData["ReturnValue"] = null;
            }
            return PartialView("Newsletter", model);
        }


        [HttpPost]
        public ActionResult HandleSubscription(Models.NewsletterViewModel model)
        {
            if (!ModelState.IsValid)
            {
                return CurrentUmbracoPage();
            }                
            var returnValue = new MyApiController().SignUpNewsletter(model.Email);
            TempData["ReturnValue"] = returnValue;
            return CurrentUmbracoPage();
        }
    }

My View:

@model Models.NewsletterViewModel

@using (Html.BeginUmbracoForm<Controllers.NewsletterController>("HandleSubscription", FormMethod.Post))
{    
    if(Model.ReturnValue != null){
        if (Model.ReturnValue.IsSuccess == true)
        {
            if (Model.ReturnValue.ExtraReturnObj == "Added")
            { 
                <span>Thanks for your subscription!</span> 
            }
            if (Model.ReturnValue.ExtraReturnObj == "Removed")
            {
               <span>Subscription canceled!</span>
            }
        }            
    }
    if(Model.ReturnValue == null)
    {

            @Html.TextBoxFor(m => m.Email, new { placeholder = "Email" })

            @Html.ValidationMessageFor(m => m.Email)

            <input id="submit" type="submit" class="theme_button" value="Tilmeld">  
    }

}

Copy Link

Ismail Mayat 4511 posts 10090 karma points MVP 2x admin c-trib

Sep 02, 2014 @ 11:18

0

Tom,

Do not quite understand what you are asking, are you trying to do ajax or hoping for ajax like result so only partial update happens rather than the whole page refresh?

Regards

Ismail

Copy Link
Tom 119 posts 447 karma points

Sep 02, 2014 @ 11:20

0

If doing ajax is necessary to do, then ajax. Is there an other way?

Copy Link
Tom 119 posts 447 karma points

Sep 02, 2014 @ 12:33

0

So should I use Ajax.BeginForm instead of Html.BeginUmbracoForm?

Copy Link
Ismail Mayat 4511 posts 10090 karma points MVP 2x admin c-trib

Sep 02, 2014 @ 12:46

0

Tom,

You will need to use ajax begin form you can also do it with Ajax.ActionLink then you wont need begin form

Regards

Ismail

Copy Link
Tom 119 posts 447 karma points

Sep 02, 2014 @ 13:05
0
wouldn't ActionLink create a link to click and then it would do the action?

On my masterview i've got @Html.Action("Index", "Newsletter"), which renders the surface controller view.

How do I change this
```
@using (Html.BeginUmbracoForm<Controllers.NewsletterController>("HandleSubscription", FormMethod.Post))
```
to be ajax?

My guess is something like @using (Ajax.BeginForm........ and then i need to hijack the submit action with js. But I can't get it right.
Copy Link

Ismail Mayat 4511 posts 10090 karma points MVP 2x admin c-trib

Sep 02, 2014 @ 13:15

Tom,

I have

            @using (Ajax.BeginForm("SaveReview", "AdminReviewSurface", new AjaxOptions { UpdateTargetId = "formContainer", InsertionMode = InsertionMode.Replace, LoadingElementId = "processing" }))
            {
                <div id="formContainer">
                    @Html.Partial("Admin/Reviews/EditReviewForm", Model)
                </div>
            }

And in my editreviewform,

 <div class="modal-body replyForm" id="replyForm">
        @Html.ValidationSummary(true)
        @Html.AntiForgeryToken()
        @Html.HiddenFor(model => model.Id)
        @Html.HiddenFor(model => model.Gravatar)
        @Html.HiddenFor(model => model.UserId)
        @Html.HiddenFor(model => model.Region)
        @Html.HiddenFor(model => model.Approved)
        @Html.HiddenFor(model => model.Rating)        
        @Html.HiddenFor(model => model.WebSite)
        @Html.HiddenFor(model => model.ProductId)
        <div class="form-group">
            @Html.LabelFor(model => model.Title, "Review title")
            @Html.EditorFor(model => model.Title)
            @Html.ValidationMessageFor(model => model.Title)
        </div>
        <div class="form-group">
            @Html.LabelFor(model => model.Comment, "Review text")
            @Html.TextAreaFor(model => model.Comment, new { placeholder = Html.DisplayNameFor(model => model.Comment), @cols = 80, @rows = 10 })
            @Html.ValidationMessageFor(model => model.Comment)
        </div>

        <br />
        @Html.ValidationMessageFor(model => model.Comment)

        @if (!ViewData.ModelState.IsValid)
        {
            //used to writeout non model specific errors
            foreach (var errors in ViewData.ModelState.Values.Select(modelState => modelState.Errors).Where(errors => errors.Any()))
            {
                @WriteOutErrors(errors)
            }
        }

    </div>

In my controller if there is an error i send back different view with error message

Copy Link

Tom 119 posts 447 karma points

Sep 02, 2014 @ 13:17

0

what do you return in your controller?

Copy Link
Tom 119 posts 447 karma points

Sep 02, 2014 @ 13:29
0
ok, so I did this now
```
return PartialView("Newsletter", model);
```
but now it redirects url to http://localhost:1760/umbraco/Surface/Newsletter/HandleSubscription?
Copy Link
Tom 119 posts 447 karma points

Sep 02, 2014 @ 15:11

0

DOH!

Figured it out! It was my version of jquery.unobtrusive-ajax.js that was too old.....stupid!

Thanks for your help, Ismail!

Copy Link
Mike Chambers 635 posts 1252 karma points c-trib

Mar 10, 2016 @ 14:26

0

Incase others come across this I just spent a few hours banging my head against this.. only to realise that the ms cdn isn't the latest version...

so don't use this... http://ajax.aspnetcdn.com/ajax/mvc/3.0/jquery.unobtrusive-ajax.js

Copy Link
is working on a reply...

Please Sign in or register to post replies