AJAX Calls in MVC Razor View

Question

Я только заметил странное поведение, о котором я не совсем уверен. Я довольно новичок в jQuery и AJAX. Поэтому вполне может быть недостаток в некоторых основах.

В моем представлении MVC rzaor есть некоторые ссылки AJAX Action, которые при нажатии отображают частичный вид, содержащий детали студента в 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> 

После того, как вид визуализируется с деталями, редактировать или добавлять кнопки можно нажимать и соответствующие частичные будут выданы.

<script> 
//Event Delegation 
//$(function() { 
//One can also use Event Delegation as stated above to handle dynamically added elements i.e. the elements 
//that are added after the page is first loaded. 
function RegisterClickHanders() { 

    var url = '@Url.Action("DisplayClickedView","Private")'; // Name of the action method you want to call and the name of the 
    //controller the action method resides 
      $('.editDetails').click(function() { 
       var btnvalue = $('.editDetails').attr("value"); 
       var studentId = $('.editDetails').data("student-id"); 

         $('#Add_Update_Details').load(url, { searchText: btnvalue, searchValue: studentId }); 
      }); 

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

       $('#Add_Update_Details').load(url, { searchText: btnvalue }); 
      }); 

} 
</script> 

В мой контроллер, когда я кладу контрольные точки:

они получают ударил один раз, который предназначен. Но когда я заменяю ajax-вызовы следующим образом:

 $('.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 причиной удара производительности?

Answer 1

.load и ваш вызов ajax вызывают действие вашего контроллера.

Вы должны вернуть PartialView и записать его на пустой div как это:

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