JQuery在部分視圖中沒有被調用

Question

我有一個視圖，它有一些jQuery將視圖中的部分視圖（通過按鈕單擊）加載到div中。這工作沒有問題。然而，在部分視圖中，我有一個非常相似的jQuery，它會在第一個局部視圖中將另一個局部視圖加載到div中，但這不起作用，它幾乎看起來像第一個局部視圖中的jQuery不存在加載。

我嘗試過尋找解決方案，但是我還沒有設法找到答案。我也在@Ajax.ActionLink中重新創建了jQuery函數，但是我試圖避免Microsoft傭工，因爲我正在嘗試學習jQuery。

這裏是包含了jQuery的第一部分視圖似乎並不工作，同時也包含了不工作的@Ajax.ActionLink：

@model MyProject.ViewModels.AddressIndexViewModel 

<script> 
    $(".viewContacts").click(function() { 
     $.ajax({ 
      url: '@Url.Action("CustomerAddressContacts", "Customer")', 
      type: 'POST', 
      data: { addressID: $(this).attr('data-addressid') }, 
      cache: false, 
      success: function (result) { 
       $("#customerAddressContactsPartial-" + $(this).attr('data-addressid')) 
         .html(result); 
      }, 
      error: function() { 
       alert("error"); 
      } 
     }); 
     return false; 
    }); 
</script> 
<table class="customers" style="width: 100%"> 
    <tr> 
     <th style="width: 25%"> 
      Name 
     </th> 
     <th style="width: 25%"> 
      Actions 
     </th> 
    </tr> 
</table> 
    @foreach (Address item in Model.Addresses) 
    { 
    <table style="width: 100%; border-top: none"> 
     <tr id="address-id-@item.AddressID"> 
      <td style="width: 25%; border-top: none"> 
       @Html.DisplayFor(modelItem => item.Name) 
      </td> 
      <td style="width: 25%; border-top: none"> 
       <a href="#" class="viewContacts standardbutton" data-addressid="@item.AddressID">ContactsJQ</a> 
       @Ajax.ActionLink("Contacts", "CustomerAddressContacts", "Customer", 
        new { addressID = item.AddressID }, 
        new AjaxOptions { UpdateTargetId = "customerAddressContactsPartial-" + @item.AddressID, HttpMethod = "POST" }, 
        new { @class = "standardbutton"}) 
      </td> 
     </tr> 
    </table> 
    <div id="customerAddressContactsPartial-@item.AddressID"></div> 
    } 

如果有人能說明什麼我在這裏做錯了，以及如何要解決它，那麼我將非常感激。

非常感謝。

Answer 1

我也重新創建一個@ jQuery函數Ajax.ActionLink 的正常工作，但我試圖避開微軟助手 因爲我想學習jQuery。

如果您不知道，在ASP.NET MVC 3中，Ajax。* helper使用jQuery，與他們使用Microsoft Ajax腳本的ASP.NET MVC 2相反。在您的視圖和部分視圖中放入JavaScript代碼也被認爲是不好的做法。

我會推薦你​​在一個函數內部的一個單獨的javascript文件中進行外部化。

function ajaxifyViewContactsLink() { 
    $('.viewContacts').click(function() { 
     $.ajax({ 
      url: this.href, 
      type: 'GET', 
      cache: false, 
      context: this, 
      success: function (result) { 
       // see the updated markup of the partial below 
       // that works with this: 
       $(this).closest('.address') 
         .find('.results') 
         .html(result); 
      }, 
      error: function() { 
       alert("error"); 
      } 
     }); 
     return false; 
    }); 
} 

您還沒有顯示你如何呈現這個部分，我想你再次使用AJAX，所以在success回調這個AJAX調用，一旦你注射局部到DOM您調用ajaxifyViewContactsLink功能。

現在您只需局部包含它應該包含 - 標記：

@model MyProject.ViewModels.AddressIndexViewModel 
<table class="customers" style="width: 100%"> 
    <tr> 
     <th style="width: 25%"> 
      Name 
     </th> 
     <th style="width: 25%"> 
      Actions 
     </th> 
    </tr> 
</table> 
@foreach (Address item in Model.Addresses) 
{ 
    <div class="address"> 
     <table style="width: 100%; border-top: none"> 
      <tr id="address-id-@item.AddressID"> 
       <td style="width: 25%; border-top: none"> 
        @Html.DisplayFor(modelItem => item.Name) 
       </td> 
       <td style="width: 25%; border-top: none"> 
        @Html.ActionLink(
         "ContactsJQ", 
         "CustomerAddressContacts", 
         "Customer", 
         new { addressid = item.AddressID }, 
         new { @class = "viewContacts" } 
        ) 
       </td> 
      </tr> 
     </table> 
     <div class="results"></div> 
    </div> 
} 

Answer 2

你缺少

$(function(){ 
//code goes here 
}) 

周圍的腳本。該頁面並沒有意識到有jQuery被執行。

編輯

，你可以在返回的腳本中使用一個eval。如下所示。我知道的一種黑客，但仍然應該讓你工作。

function (data, textStatus, jqXHR) 
      { 
       var $scripts = undefined; 
       if ($(data).has('script')) 
       { 
        $scripts = $(data).filter('script'); 
       } 
       //APPEND YOUR HTML To the page. then run the scripts that are contained. 

       if ($scripts != undefined) 

        $scripts.each(function() 
        { 
         if ($(this).attr('src') != '' && $(this).attr('src')) 
          $.getScript($(this).attr('src')); 
         else 
          eval(this.innerHTML || this.innerText); 
        }); 

      }; 

這將是Ajax調用

Answer 3

在控制器我有行動的成功作用。

public ActionResult ShowAllState() 
     { 
      return PartialView("_State", CityRepository.AllState); 
     } 

「_State」是我的局部視圖。

在視圖中我有按鈕。當我點擊這個按鈕，然後我的部分視圖預示着所有的狀態數據。

<h5> 
    Page Lode With Jquery</h5> 
<input type="button" value="Lode Form" id="btnLode" /> 

<script type="text/javascript"> 
    $(function() { 
     $("#btnLode").click(function() { 
      $("#LodeForm").load("/City/ShowAllState", function() { 
       alert("Your page loaded Successfully !!!!!!!"); 
      }); 
     }); 
    }); 

</script> 

<div id="LodeForm"> 
</div> 

我把我所有的狀態數據放在「LodeForm」div中。

我認爲這很好的幫助你....

Answer 4

你必須重新裝上單擊處理程序，將新加載元素每次你重裝了AJAX的元素。