Search code examples
jqueryajaxasp.net-mvcajax.beginform

Using Ajax.BeginForm from a partial view, form action uses parent controller, not the controller defined


This is a bit odd because a couple of weeks ago this was working fine. Here is what I have..

I have a partial view _subscribe that has the ajax form

@model m60_mbt.Models.Subscriber

@{bool? subscribed = (bool?)Session["subscribed"];}

@if (subscribed == true)
{
    <div class="subscribe text-center animated fadeInUp">
    <h1>
        Thank you for subscribing to our newsletter.
    </h1>

</div>
}

else
{
<div class="row">       

        <h1><i class="fa fa-paper-plane"></i><span>Subscribe to stay in the loop</span></h1>

        @using (Ajax.BeginForm("Create", "Subscriber", new AjaxOptions
        {
            HttpMethod = "POST",
            InsertionMode = InsertionMode.Replace,
            UpdateTargetId = "subscribe_target"

        }, new { id = "Subscribe" }))
        {
        @Html.AntiForgeryToken()

        @Html.ValidationSummary(true)


            @Html.TextBoxFor(model => model.EmailAddress, new { @placeholder = "Your email address" })

            <input id="sub_but"  type="submit" value="Subscribe" />
            <br />
            @Html.ValidationMessageFor(model => model.EmailAddress)



        }


    </div>
}

This is placed inside a view.

<section class="subscribe text-center" id="subscribe_target">
    <h1><i class="fa fa-paper-plane"></i><span>Subscribe to stay in the loop</span></h1>
    <div id="subscribe_form">
        @Html.Partial("_subscribe", new m60_mbt.Models.Subscriber());
    </div>
</section>

But when the page is rendered the form action changes to:

<form action="/Home/Create?Length=10" data-ajax="true" data-ajax-method="POST" data-ajax-mode="replace" data-ajax-update="#subscribe_target" id="Subscribe" method="post">

Any ideas?

/* Edit */ Here is my RouteConfig

public class RouteConfig
{
    public static void RegisterRoutes(RouteCollection routes)
    {
        routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

        routes.MapRoute(
            name: "Default",
            url: "{controller}/{action}/{id}",
            defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
        );
    }
}

Solution

  • It looks like that you have recently added html attribute new { id = "Subscribe" }. Due to this change , controller is being considered as route value. To make it working you have to add one more parameter for route values in between controller name and ajax setting. So, Your code look like this if I assign route value as null..

    @using (Ajax.BeginForm("Create", "Subscriber", null, new AjaxOptions
        {
            HttpMethod = "POST",
            InsertionMode = InsertionMode.Replace,
            UpdateTargetId = "subscribe_target"
    
        }, new { id = "Subscribe" }))
        {
        @Html.AntiForgeryToken()
    
        @Html.ValidationSummary(true)
    
    
            @Html.TextBoxFor(model => model.EmailAddress, new { @placeholder = "Your email address" })
    
            <input id="sub_but"  type="submit" value="Subscribe" />
            <br />
            @Html.ValidationMessageFor(model => model.EmailAddress)
    
    
    
        }