AJAX功能只更新

Question

我使用ASP的MVC 4與jQuery 1.10.2

我試圖更新的局部視圖中的表和調試的JavaScript似乎是類似於巫術沿（至少我以任何方式）。

在第一次調用我的ajax函數時，更新按預期發生。任何後續的呼叫都沒有註冊。

我已閱讀了幾篇文章和計算器的答案，其中包括設置cache = false，閱讀開發人員工具中的網絡選項卡以瞭解發生的情況。

從第二個建議我可以看到第一個呼叫返回200狀態響應，但第二個呼叫似乎什麼都不做。

我已經在腳本中放置了警報框，在第一次調用時，所有顯示和數據更新，但在第二次調用時什麼也沒有發生，爲什麼？

腳本

$("#resultsPerPage").change(function() { 
    alert("pre") 
    var selectedText = parseInt($(this).find(":selected").text()) 
    call_PropertyTable("", 1, selectedText); 
    alert("post") 
}) 

    //calls _PropertyTable Partial view 
function call_PropertyTable(param, val, resultsPerPage) { 
    $("#hdnCurrentPage").text(val); 
    alert("pre-ajax") 
    $.ajax({ 
     cache: false, 
     url: "_PropertyTable", 
     type: "get", 
     data: { 'param': param, 'value': val, 'resultsPerPage': resultsPerPage }, 
     success: function (data) { 
      $("#properties").html(data); 
     } 
    }); 
    alert("post-ajax") 
} 

視圖

<div id="properties"> 
    @{Html.RenderPartial("_PropertyTable", Model);} 
</div> 

局部視圖

//^^^other data not updating after first ajax call^^^ 
<select id="resultsPerPage" name="dataTables-example_length" aria-controls="dataTables-example" class="form-control input-sm"> 
       <option value="10" @{if (ViewBag.PageRange == 10) { ViewBag.Selected = "selected"; } else { ViewBag.Selected = ""; }} @ViewBag.Selected>10</option> 
       <option value="25" @{if (ViewBag.PageRange == 25) { ViewBag.Selected = "selected"; } else { ViewBag.Selected = ""; }} @ViewBag.Selected>25</option> 
       <option value="50" @{if (ViewBag.PageRange == 50) { ViewBag.Selected = "selected"; } else { ViewBag.Selected = ""; }} @ViewBag.Selected>50</option> 
      </select> records per page 

控制器

public ActionResult _PropertyTable(string param, int value = 1, int resultsPerPage = 10) 
    { 
     ViewBag.PageRange = resultsPerPage; 
     //other stuff 
     return PartialView(properties); 
    } 

Answer 1

您的腳本將用id="resultsPerPage"替換<select>元素，以便您附加處理程序的原始<select>元素不再存在，因此事件永遠不會被調用。您需要使用.on()函數使用事件委託。

更換

$("#resultsPerPage").change(function() { 
    .... 
}); 

與

編輯

一些建議，以改善你的代碼。不清楚爲什麼你有一個單獨的call_PropertyTable()功能，所以我剛剛結合這些簡單起見。

var properties = $('#properties'); // cache elements your repeatedly refer to 
properties.on('change', '#resultsPerPage', function() { 
    var selectedText = $(this).val(); // all that's required 
    $.ajax({ 
    cache: false, 
    url: '@Url.Action("_PropertyTable")', // don't hard code your url's 
    type: "get", 
    data: { param: '', value: 1, resultsPerPage: selectedText}, // no need to quote property names 
    success: function (data) { 
     properties.html(data); 
    } 
}); 

或者更簡單地使用$。得到（）快捷

$.get('@Url.Action("_PropertyTable")', { param: '', value: 1, resultsPerPage: selectedText}, function(data) { 
    properties.html(data); 
}); 

不用手動創建的標記，使用視圖模型，並強烈綁定到您模特屬性使用HTML輔助

public class SampleViewModel 
{ 
    public int PageRange { get; set; } 
    public SelectList PageRangeList { get; set; } 
    .... 
} 

public ActionResult _PropertyTable(string param, int value = 1, int resultsPerPage = 10) 
{ 
    IEnumerable<int> pageRanges = new List<int>{ 10, 25, 50 }; 
    SampleViewModel model = new SampleViewModel() 
    { 
    PageRange = resultsPerPage, 
    PageRangeList = new SelectList(pageRanges), 
    .... 
    }; 
    return PartialView(model); 
} 

，並在局部視圖使用

@model SampleViewModel 
.... 
@Html.DropDownListFor(m => m.PageRange, Model.PageRangeList) 

請注意，您不清楚爲什麼您需要在部分視圖中生成下拉列表，而不是在主視圖中（在<div id="properties">元素外部）生成下拉列表，以便它不是代表與原來的html完全相同（因此不需要使用事件代理）。