После обновления частичного просмотра Ajax перезагружает страницу

Question

У меня есть частичное представление в моем Index.cshtml и список в моем частичном представлении.Когда я щелкаю элемент списка, он вызывает selectProj () и оповещает через ajax как Test.Это то, что мне нужно.Моя проблема в том, что в моем списке есть кнопка «Добавить новый проект».Когда я добавляю проект, я перезагружаю частичное представление.После перезагрузки частичного представления, когда я щелкаю элемент списка, он снова выдает предупреждение, но также обновляет 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>