AJAX調用MVC剃刀視圖

Question

我剛剛注意到一個我不太確定的奇怪行爲。我對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> 

在視圖獲取與細節渲染後，可以單擊編輯或添加按鈕，並呈現適當的部分視圖。

<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> 

在我的控制器，當我把我的斷點：

他們得到準確擊中一次，其目的。但是，當我將阿賈克斯調用替換爲：

 $('.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); 
})