Press Ctrl / CMD + C to copy this to your clipboard.
This post will be reported to the moderators as potential spam to be looked at
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"> } }
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
If doing ajax is necessary to do, then ajax. Is there an other way?
So should I use Ajax.BeginForm instead of Html.BeginUmbracoForm?
You will need to use ajax begin form you can also do it with Ajax.ActionLink then you wont need begin form
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.
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
what do you return in your controller?
ok, so I did this now
return PartialView("Newsletter", model);
but now it redirects url to http://localhost:1760/umbraco/Surface/Newsletter/HandleSubscription?
DOH!
Figured it out! It was my version of jquery.unobtrusive-ajax.js that was too old.....stupid!
Thanks for your help, Ismail!
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
is working on a reply...
Write your reply to:
Upload image
Image will be uploaded when post is submitted
Surface Controller, Post form, async update
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:
My View:
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
If doing ajax is necessary to do, then ajax. Is there an other way?
So should I use Ajax.BeginForm instead of Html.BeginUmbracoForm?
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
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
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.
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
what do you return in your controller?
ok, so I did this now
but now it redirects url to http://localhost:1760/umbraco/Surface/Newsletter/HandleSubscription?
DOH!
Figured it out! It was my version of jquery.unobtrusive-ajax.js that was too old.....stupid!
Thanks for your help, Ismail!
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
is working on a reply...