Jquery MVC Razor视图中的AJAX调用

我刚刚注意到一种奇怪的行为，对此我不太清楚。我对jQuery和AJAX非常陌生。所以可能只是缺少一些基本的东西

在我的MVC rzaor视图中，有一些AJAX操作链接，单击这些链接可以呈现包含div#StudentDetails中学生详细信息的部分视图

    <div id="mainpage">

    <h2>Registration Details</h2>
    <ul>
    @foreach(var item in Model) 
    {
        <li>
            @Ajax.ActionLink(item.Student.UserName, @*Text to be displayed *@
            "GetUserDetails", @*Action Method Name*@
            new { id = item.Student.StudentId },
                new AjaxOptions
                {
                    UpdateTargetId = "StudentDetails", @*DOM element ID to be updated *@
                    InsertionMode = InsertionMode.Replace,@*Replace the content of DOM element *@
                    HttpMethod = "GET" @*HTTP method *@,
                    OnComplete="RegisterClickHanders"
                }
            )
        </li>
    }
    </ul>
    <div id ="StudentDetails"></div>
    <br />
    <div id ="Add_Update_Details"></div>
</div>

按任意按钮时，控制器中的断点会被击中两次。我错过了什么？还是有意这样做？AJAX调用是否导致性能下降？

和您的AJAX调用都在调用控制器操作

您应该返回一个

PartialView

并将其写入空的

div

，如下所示：

$.ajax({
    type: 'POST',
    url: url,
    data: { searchText: btnvalue, searchValue: studentId },
.success(function (result) {
    $('#Add_Update_Details').html(result);
})

---

非常感谢你的帮助。只是出于好奇问了一个问题。。。那么什么时候对.html（result）使用.load（正如您所指出的那样，它强制调用了两次）？我对load函数不是非常熟悉，所以我不能说什么时候使用它是最佳的。在答案中单击“加载”时，会有一个指向文档的链接。不过，在这个场景中需要理解的重要部分是，对

url

的ajax调用和load都在调用动作

displayedclickedview

，这就是为什么您看到它两次到达断点的原因。

        $('.editDetails').click(function () {
        var btnvalue = $('.editDetails').attr("value");
        var studentId = $('.editDetails').data("student-id");

        $.ajax({
            type: 'POST',
            url: url,
            data: { searchText: btnvalue, searchValue: studentId },
            success: function () {
                $('#Add_Update_Details').load(url, { searchText: btnvalue, searchValue: studentId });
            },
            error: function (jqXHR, status, err) {//status is Error and the errorThrown is undefined
                alert('Request Status : ' + jqXHR.status + ' has issued a status text of  : ' + jqXHR.statusText);
            }
        });
    });



    $('.addDetails').click(function () {
        var btnvalue = $('.addDetails').attr("value");

        $.ajax({
            type: 'POST',
            url: url,
            data: { searchText: btnvalue },
            success: function () {
                $('#Add_Update_Details').load(url, { searchText: btnvalue });
            },
            error: function (jqXHR, status, err) {//status is Error and the errorThrown is undefined
                alert('Request Status : ' + jqXHR.status + ' has issued a status text of  : ' + jqXHR.statusText);
            }
        });

    });

$.ajax({
    type: 'POST',
    url: url,
    data: { searchText: btnvalue, searchValue: studentId },
.success(function (result) {
    $('#Add_Update_Details').html(result);
})