带有aspnet mvc的ajax永远无法工作

Posted 2023-03-05

【中文标题】带有aspnet mvc的ajax永远无法工作

【英文标题】：ajax with aspnet mvc never work

【发布时间】：2016-01-27 05:54:37

【问题描述】：

我是 Web 开发的新手，我的 ajax 调用动态加载页面时遇到问题。

这是我的 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...');
        
    );
);
);

现在这是我的控制器：

public ActionResult DossierEnfant(string enfantId)

    DossierEnfantViewModel model = new DossierEnfantViewModel();
    model.Enfant = personneAppService.RecupererEnfant(new Guid(enfantId));
    return View(model);

最后是我的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>

我尝试使用 html.action 并运行良好，但我的 ajax 调用总是产生错误...

这是我的意见文件夹： viewfolder

一个想法？

【问题讨论】：

错误是什么？

它们会产生什么错误？你把JS放在哪里了？默认情况下，ASP.NET MVC 项目包含 jQuery 库，但您必须将特定页面的视图中的任何脚本放在 @section Scripts 中。这是因为对 jQuery 库的引用包含在呈现的 HTML 的底部附近；你的脚本只有在 jQuery 引用之后才能工作，但只有当你把它放在脚本部分时才会发生这种情况。

我总是有一个未找到的错误...并且显示警报

你有一个名为DossierEnfant.cshtml的视图？

@Url.Action 如果打算由服务器处理，可能需要括起来，因为我不确定这是典型的 JS 代码。

【参考方案1】：

您似乎有一个单独的 javascript 文件，并且您上面显示的 javascript 不在您的视图中。如果是这种情况，则不能使用 Url.Action，因为它仅在 razor 视图中可用。

在这种情况下，您有两个选择，您可以将 javascript 移动到您的视图中，或者您可以添加一个隐藏的视图来存储 Url.Action 的值，然后在您的 javascript 中调用该元素。

在您看来，添加：

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

在你的 ajax 调用中：

$.ajax(

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