Update block without postback

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

Try our conversational search powered by Generative AI!

Update block without postback