刷新部分视图后，Ajax 重新加载页面

Question

我的 Index.cshtml 中有一个局部视图，并且在我的局部视图中有一个列表。当我单击列表项时，它会调用 selectProj() 并通过 ajax 作为测试发出警报。这就是我需要的。我的问题是我的列表中有一个按钮作为添加新项目。当我添加一个项目时，我会重新加载部分视图。重新加载部分视图后，当我单击列表项时，它会再次发出警报，但也会刷新 index.cshtml，但在刷新页面后它只会发出警报而不是刷新。我不想刷新我的索引。我想请教您对如何避免刷新的意见。非常感谢您的回答！

我在Index.cshtml下面的代码块；

<div id="projectListDiv">
      @Html.Partial("SelectProjectListPartialView", @Model)
</div>

我的局部视图是这样的......

@model Projact.Models.ViewModels.IndexViewModel

<div>
   <button id="collapsibleProjectBtn" class="collapsible">Select Project</button>
   <div class="content">
        <ul id="projectList">
        @{
           if (Model != null)
           {
             foreach (var project in Model.Projects)
                {
                    <li id="p_@project.Id"><a href="" onclick="selectProj(@project.Id, '@project.ProjectName.ToString()')">@project.ProjectName</a></li>
                }
            }
          }
          <li><button type="button">Add new project</button></li>
        </ul>
   </div>
</div>

<script type="text/javascript">

    var selectProj = function (projectId, projectName) {

        $.ajax({
            url: '@Url.Action("GetDocuments","Home")',
            contentType: "application/json; charset=utf-8",
            data: { 'projectId': projectId},
            type: 'GET',
            cache: 'false',
            dataType: 'json',
            success: function (result) {                
                alert("Test");
            }
        });        
    }
</script>

Answer 1

嗨，约翰尼，问题不是 ajax 调用，而是触发 ajax 的链接，我的意思是您的代码不会阻止它正在导航的链接的默认行为；这就是为什么它似乎正在刷新页面。

你可以试试吗？

<a href="" onclick="selectProj(event, @project.Id, '@project.ProjectName.ToString()')">

和

<script type="text/javascript">

    var selectProj = function (e, projectId, projectName) {
        e.preventDefault();

        $.ajax({
            url: '@Url.Action("GetDocuments","Home")',
            contentType: "application/json; charset=utf-8",
            data: { 'projectId': projectId},
            type: 'GET',
            cache: 'false',
            dataType: 'json',
            success: function (result) {                
                alert("Test");
            }
        });

    }
</script>