Update block without postback

Five New Optimizely Certifications are Here! Validate your expertise and advance your career with our latest certification exams. Click here to find out more

AI OnAI Off

Home / Forums / Developers (Main Products) Forum / CMS 7.5 - 11 /

Vote:

Hi,

I would like to create a block that allows users to sign up for a newsletter. My problem is that I dont know how to confirm the signup without doing a post-back and updating the block that way. Can I use Ajax.ActionLink? What I have is pretty much;

Index.cshtml;

<div class="panel panel-primary">
    <img src="@Model.TopImage" alt="" class="img-responsive" />
    <div class="panel-body">
        <div class="margin-bottom-10">

            <h3><i class="fa fa-envelope fa-grey"></i>@Html.PropertyFor(x => x.MainHeader)</h3>
            <p>
                @Html.PropertyFor(x => x.MainBody)
            </p>
            @using (Html.BeginForm("RegisterSubscription", "NewsLetterBlock", FormMethod.Post, new { @class = "form-group" }))
            {
                    <input type="email" name="email" value="" class="form-control margin-bottom-10" placeholder="E-mailadress" />
                    <p>
                        <button class="btn btn-primary btn-rounded btn-block" id="mailbtn" type="submit"><i class="fa fa-envelope"></i>@Html.Translate("/newsletterblock/send")</button>
                    </p>
           }
            <p class="small">
                @Html.PropertyFor(x => x.Disclaimer)
            </p>
        </div>
    </div>
</div>

NewsLetterBlockController.cs;

 public class NewsLetterBlockController : BlockController<NewsLetterBlock>
    {

        private IBlockViewModelFactory _viewModelFactory { get; set; }

        public NewsLetterBlockController(IBlockViewModelFactory viewModelFactory)
        {
            _viewModelFactory = viewModelFactory;
        }

        public override ActionResult Index(NewsLetterBlock currentBlock)
        {
            var model = _viewModelFactory.CreateBlockViewModel<NewsLetterBlockViewModel>(currentBlock);
            return View(model);
        }

        [HttpPost]
        public ActionResult RegisterSubscription(NewsLetterBlock currentBlock, string email)
        {
            //validate and trigger javascript function from here?
        }

Thanks!

#86076

May 13, 2014 14:39

Henrik Fransas

Vote:

You should use Ajax.BeginForm instead of Html.BeginForm, read more here:

http://singulartechnologies.com/asp-net-mvc-ajax-beginform-sample-code

It can be a little tricky to get to work, but it works

#86078

May 13, 2014 15:20

Vote:

Hey Henrik, thanks for your reply. I changed my code but im still not getting it to work, still getting that terrible redirect happening.

NewsLetterBlock/Index.cshtml:

<div class="panel panel-primary">
    <img src="@Model.TopImage" alt="" class="img-responsive" />
    <div class="panel-body">
        <div class="margin-bottom-10">

            <h3><i class="fa fa-envelope fa-grey"></i>@Html.PropertyFor(x => x.MainHeader)</h3>
            <p>
                @Html.PropertyFor(x => x.MainBody)
            </p>
            <div id="mydiv">
                     @Html.Partial("Partials/SubmitEmail", Model)
            </div>
            <p class="small">
                @Html.PropertyFor(x => x.Disclaimer)
            </p>
        </div>
    </div>
</div>

NewsLetterBlock/Partials/SubmitEmail.cshtml:

@using (Ajax.BeginForm("EmailValidation", "NewsLetterBlock", new AjaxOptions { UpdateTargetId = "mydiv" }))
            {
               <div id="formwrapper">
                    <input type="email" name="email" value="" class="form-control margin-bottom-10" placeholder="E-mailadress" />
                    <p>
                        <button class="btn btn-primary btn-rounded btn-block" id="mailbtn" type="submit"><i class="fa fa-envelope"></i>@Html.Translate("/newsletterblock/send")</button>
                    </p>
               </div>
           }

NewsLetterBlockController:

   [AcceptVerbs(HttpVerbs.Post)]
        public PartialViewResult EmailValidation(string email)
        {
            if (email != null)
            {
                return PartialView("Partials/Success");
            }
            return PartialView("Partials/SubmitEmail");
        }

#86079

May 13, 2014 16:01

Henrik Fransas

Vote:

You seem to have the same problem as many others and that is with unobtrosivejavascriptenable. Read more on these pages:

http://stackoverflow.com/questions/8273819/asp-net-mvc-3-0-ajax-beginform-is-redirecting-to-a-page

http://weblogs.asp.net/owscott/archive/2010/11/17/mvc-3-ajax-redirecting-instead-of-updating-div.aspx

http://bradwilson.typepad.com/blog/2010/10/mvc3-unobtrusive-ajax.html

http://forums.asp.net/t/1651222.aspx?Ajax+BeginForm+not+displaying+PartialView+always+redirects+to+new+page

#86095

May 13, 2014 21:01

Vote:

Thank you Henrik, life-saver!

#86111

May 14, 2014 10:30

This topic was created over six months ago and has been resolved. If you have a similar question, please create a new topic and refer to this one.