jquery - ajax with aspnet mvc never work -
i new web development , having problem ajax call load page dynamically.
this 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 controler :
public actionresult dossierenfant(string enfantid) { dossierenfantviewmodel model = new dossierenfantviewmodel(); model.enfant = personneappservice.recupererenfant(new guid(enfantid)); return view(model); }
finally 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 html.action , works fine, ajax call generate error...
this views folder : viewfolder
an idea ?
it looks have separate javascript file , javascript showed above not in view. if case, can't use url.action, because that's available in razor views.
you have 2 options in case, can either move javascript view, or can add hidden view stores value of url.action, , call element in javascript.
in view, add:
<input type="hidden" id="url" value="@url.action("dossierenfant", "enfant")"
and in ajax call:
$.ajax( { type:"get", url: $('#url').val(), data: {enfantid : id}, success: function (result) { $('#divdossierenfant').html(result); }, error: function (e) { alert('ca marche po...'); } });
Comments
Post a Comment