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