locked
Transform post to ajax call RRS feed

  • Question

  • User2114644362 posted

    Hey everyone,

    I have absolutely no experience with ajax so please have a little patience with me :)

    I have the following code:

    <article class="content-item">
        <div id="CheckboxLijst">
    
    
            @using (Html.BeginFormAntiForgeryPost(Url.Action("Index", "Assortiment"), FormMethod.Get))
            {
                @Html.ValidationSummary(true)
    
    
    
                for (var i = 0; i < Model.Count; i++)
                {
    
                    <div class="Textboxtcheckbox">@Html.TextBoxFor(x => x[i].TaxonomyName, new { @readonly = true, Style = "border:0; width:100%" })</div>
    
                    <div class="checkboxList">
    
                       @Html.CheckBoxListFor(
                                                              x => x[i].PostedTerms.TermIds,
                                                              x => x[i].AvailableTerms,
                                                  term => term.Id,
                                                  term => term.Name,
                                                  x => x[i].SelectedTerms
    
                                        )
                    </div>
            }
    
    
    
            }
        </div>
    
        <table class="Sortering">
    
            <tr>
                <th>@sortLink("Prijs", 1)</th>
                <th>@sortLink("Jaar", 2)</th>
            </tr>
        </table>
    
        <div id="WijnenLijst">
    
    
                <fieldset>
    
                    @helper sortLink(string name, int id)
    {
    
                   @Html.SortLink(name, id, (id == ViewBag.sortBy && ViewBag.isAsc != null ? !((bool)ViewBag.isAsc) : true))
    
    
    if (id == ViewBag.sortBy)
    {
                <span class="arrow @(ViewBag.isAsc ? "up" : "down" )"></span>
    }
    }
    
                    @foreach (var wijn in ViewBag.AlleWijnen)
                    {
    
                        @Display(wijn)
                    }
                    <div id="WijnPager">@Display(ViewBag.Pager)</div>
                </fieldset>
    </article>
    @using (Script.Foot())
    {
        <script>
            $(function () {
                $('.wijninassortiment').has('.promotiewijninassortiment').css('border', 'red 1px solid');
                $(".checkboxList").find("input:checkbox").change(function () {
    
                    $("form").submit();
                });
    
            })
        </script>
    }

    I'm posting an array of checkboxvalues and it returns a list of wines + paging and sorting, also my url stays so people can click back or copy the url to send someone.

    This is how my controller accepts the post:

     public ActionResult Index(PagerParameters pagerParameters, List<taxTermViewModel> postedTerms, int sortBy = 1, bool isAsc = true)

    The problem is off course that everytime a user clicks on a checkbox the whole page is refreshed, can anyone help me out on how to transform this to an ajax call?

    Kind regards,

    Borrie

    Friday, July 18, 2014 5:29 AM

Answers

  • User-417640953 posted

    Ajax.BeginForm(

    Url.Action("Index", "Assortiment"),

    new AjaxOptions() { UpdateTargetId = "Ajaxupdate", HttpMethod = "Get" } )

    Hi,

    thanks for your back.

    For using the Ajax.BeginForm, you can set it's parameters like below.

    Ajax.BeginForm("actionName","ControllerName",AjaxOptions)

    Please not use the Url.Action("Index", "Assortiment") it only regarded as a single action name. Try below code.

    @Ajax.BeginForm("Index", "Assortiment", new AjaxOptions(){ UpdateTargetId = "Ajaxupdate", HttpMethod = "Get"})
    {
    
    //..........
    
    }
     

    Thanks.

    Regards!

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, July 23, 2014 9:22 PM

All replies