javascriptc#ajaxasp.net-mvcasp.net-mvc-ajax

Changing InsertionMode of MVC Ajax form via JavaScript?


I wanna change some MVC Ajax Form parameters like InsertionMode or LoadingElementId via javascript at client side.
How can I do it?

sample of a MVC ajax form :

@using (Ajax.BeginRouteForm("DevicesByObjectName", new AjaxOptions
{
    InsertionMode = InsertionMode.InsertBefore,
    UpdateTargetId = "Devices",
    LoadingElementId = "LoaderContents",
    OnSuccess = "MoreDevicesOnSuccess",
    OnFailure = "MoreDevicesOnFailure",
    OnBegin = "MoreDevicesOnBegin",
    OnComplete = "MoreDevicesOnComplete",
}))
{
    <div>
        @Html.AntiForgeryToken()
        <input type="hidden" value="@Model.Object.Id" id="ObjectId" name="ObjectId" />
        <input type="hidden" value="2" id="PageNumber" name="PageNumber" />
        <input type="hidden" value="" id="Filtering" name="Filtering" />

        <div class="center-block" style="max-width: 360px;">
            <input type="submit" value=" more" class="btn btn-primary btn-lg btn-block center-block" />
        </div>
        <div id="LoaderContents" class="ajax-loader center-block hidden"></div>
    </div>
}

Solution

  • BeginRouteForm generates a <form> tag with a series of data-xxx attributes based on the AjaxOptions, for example

    <form ... data-ajax-loading="#LoaderContents" data-ajax-mode="before" ...>
    

    You can get and set these using jquery's .data() or .attr() methods. So for the form generated by you helper

    console.log($('form').data('ajax-mode')); // returns before
    $('form').data('ajax-mode', 'after'); // change the insertion mode
    console.log($('form').data('ajax-mode')); // returns after