MVC 5 Ajax.Actionlink returns result, but does not render in DOM

Question

Gentlemen, I’m having trouble displaying a list of results in my view.

The idea is, by clicking on a dropdown value, I make an asynchronous query to popular the next dropdown. I refer to the controller by the Ajax.Actionlink method, why I don’t want to reload the page, or display the id in the url:

<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">

                            int count_pai = 0;

                            while (count_pai < LPPai.Count)
                            {
                                <li>
                                    @Ajax.ActionLink(LPPai[count_pai].valor, "AbrirChamado", new { id_pai = LPPai[count_pai].id }, null, new AjaxOptions()
                               {
                                   HttpMethod = "GET",
                                   UpdateTargetId = "dropdown_menu_problemas_filho",
                                   InsertionMode = InsertionMode.Replace
                               })
                                </li>

                                count_pai++;
                            }
                        }

</ul>

Then by clicking on a "li" element, I send the element id to the controller and return the search result to the target DOM "dropdown_menu_problemas_child".

The return of the search should be rendered in the element below:

<ul id="dropdown_menu_problemas_filho" class="dropdown-menu" aria-labelledby="dropdownMenu1">

                        @if (LPFilho != null)
                        {
                            int count_filho = 0;

                            while (count_filho < LPFilho.Count)
                            {
                                <li>@LPFilho[count_filho].valor</li>

                                count_filho++;
                            }
                        }
</ul>

And debugging the view by Razor, the list really is populated:

So far so good. The problem is that after that, nothing happens! No value is rendered in the DOM, even if no error occurs, and the loop ending smoothly.

I already tried to display the values with @Html.Displaytext, put only @Lpfilho[count_filho]. value without tags, and everything else! Nothing works.

Does anyone have any idea why values are not rendered? Is there a better (or more correct) way to accomplish this task? Thank you very much.

Answer 1

I don’t know what you did.. but Express install jQuery.Unobtrusive.Ajax

search in Nuget manager: "Microsoft.jQuery.Unobtrusive.Ajax" searches for the latest version.