ajax with aspnet mvc never work

Question

I am new to web development and am having a problem with my ajax call to load a page dynamically.

This is my JS :

$(function () {
$('.trEnfant').on('click', function (e) {
    var id = $(this).attr("id");

    $.ajax(
    {
        type:"Get",
        url: '@Url.Action("DossierEnfant", "Enfant")',
        data: {enfantId : id},
        success: function (result) 
        {
            $('#divDossierEnfant').html(result);
        },
        error: function (e)
        {
            alert('ca marche po...');
        }
    });
});
});

Now this is my controler :

public ActionResult DossierEnfant(string enfantId)
{
    DossierEnfantViewModel model = new DossierEnfantViewModel();
    model.Enfant = personneAppService.RecupererEnfant(new Guid(enfantId));
    return View(model);
}

Finally my cshtml :

<div>
<div class="row">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title">Enfants</h3>
        </div>
        <div class="panel-body">
            <div class="row">
                <div class="col-lg-2">
                    <button class="btn btn-primary btn-block"><i class="fa fa-plus-circle"></i> @L("Ajouter")</button>
                </div>
                <div class="col-lg-10">
                    <table class="table table-bordered table-condensed table-hover">
                        @foreach (var item in Model.Enfants)
                        {
                            <tr id=@item.Id class="trEnfant">
                                <td class="col-md-6">@item.Nom</td>
                                <td class="col-md-5">@item.Prenom</td>
                                <td class="col-md-1 text-center">
                                    <a class="btn btn-warning btn-xs" role="button" href="#"><i class="fa fa-minus-circle"></i></a>
                                </td>
                            </tr>
                        }
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
<div id="divDossierEnfant" class="row">
</div>

I tried going live with html.action and it works fine, but my ajax call always generate error...

this is my views folder : viewfolder

An idea ?

What error do they generate? And where have you put the JS? By default, ASP.NET MVC projects include the jQuery library, but you must put any script which is in the View for a specific page inside a `@section Scripts {}`. This is because the reference to the jQuery library is included near the bottom of the rendered HTML; your script will only work if after the jQuery reference, but that will only happen if you put it in a script secton. — , Oct 27 '15 at 17:21
`@Url.Action` may need to be enclosed if that is intended to be processed by the server as I'm not sure that is typical JS code. — JB King, Oct 27 '15 at 20:47
http://stackoverflow.com/questions/6278694/url-action-parameters in the answer has some special syntax using "<%:" at the start that may be what you are missing within your JS to translate things properly. — JB King, Oct 27 '15 at 21:25

score 0 · Answer 1 · answered Oct 28 '15 at 15:39

It looks like you have a separate javascript file and that the javascript you showed above is not in your view. If that is the case, you can't use Url.Action, because that's only available in razor views.

You have two options in this case, you can either move the javascript to your view, or you can add a hidden to your view that stores the value of Url.Action, and call that element in your javascript.

In your view, add:

<input type="hidden" id="url" value="@Url.Action("DossierEnfant", "Enfant")"

And in your ajax call:

$.ajax(
{
    type:"Get",
    url: $('#url').val(),
    data: {enfantId : id},
    success: function (result) 
    {
        $('#divDossierEnfant').html(result);
    },
    error: function (e)
    {
        alert('ca marche po...');
    }
});

ajax with aspnet mvc never work

1 Answers1