2017-09-13 138 views
-1

工作這是我從視圖中的部分代碼稱爲indexasp.net的MVC不考慮

<div class="box-body"> 
        @{ Html.RenderAction("_BlogsGrid",new {country=""});} 
    </div> 
    ... 
    ... 
<script> 
    $("#SelectedCountry").change(function() { 
     var selectedCountry = $(this).val(); 
     $.ajax({ 
      url: '@Url.Action("_BlogsGrid","Blog")' + '?country=' + selectedCountry, 
      sucess: function(xhr, data) { 
       console.log('sucess'); 
      }, 
      error: function (err) { 
       console.log(err); 
      } 

    }); 
    }); 
</script> 

這裏是控制器動作代碼

public ActionResult _BlogsGrid(string country) 
{ 
    var blogs = _blogService.GetBlogWithCountryName(country).ToList(); 
    var blogsList = BlogMapper.ToBlogIndex(blogs); 
    return PartialView(blogsList); 
} 

,這裏是_BlogsGrid視圖

@model Blog.BlogsList 
<div class="pull-right"> 
    @Html.DropDownListFor(m => m.SelectedCountry, new SelectList(Model.CountriesList), "Select a country", new { @class = "form-control" }) 
</div> 
<br /> 
<br /> 
@if (Model.Blogs.Count == 0) 
{ 
    <div class="box-group"> 
     <h4>Sorry we couldn't find any blog related to the country you asked for.</h4> 
     @Html.DisplayText("Hello world!") 
    </div> 
} 
else 
{ 
    <div class="box-group" id="accordion"> 
     @foreach (var blog in Model.Blogs) 
     { 
      @*Some code*@ 
     } 
    </div> 
} 

事情是當我第一次加載它everythi NG正常工作,控制器方法被擊中,所有的博客得到加載是這樣的觀點看起來如何 enter image description here

但是當我從下拉式列表中選擇一個國家,也沒有博客匹配該國 enter image description here

它碰到if條件(在視圖中放置一個斷點,檢查條件是否正在執行,否則條件正在執行,如果條件成立)(這是局部視圖) enter image description here 但內容「如果「未在瀏覽器中加載。 我仍然收到與以前相同的內容。任何想法爲什麼我的內容沒有被更新?

更新:

<div id="grid" class="box-body"> 
         @{ Html.RenderAction("_BlogsGrid",new {country=""});} 
</div> 

<script> 
    $("#SelectedCountry").change(function() { 
     var selectedCountry = $(this).val(); 

     $.ajax({ 
      url: '@Url.Action("_BlogsGrid","Blog")' + '?country=' + selectedCountry, 
      sucess: function (data) { 
       $('#grid').html(data); 
      }, 
      error: function (err) { 
       console.log(err); 
      } 

    }); 
    }); 
</script> 

在瀏覽器響應 enter image description here

但仍然是我的div沒有更新。

+0

我沒有看到任何代碼,將更新內容。你的ajax調用只是以'console.log'方式執行,不做任何事情來更新頁面。 –

+0

你在ajax'sucess'回調裏面做什麼?這是這個職位或實際代碼的虛擬代碼嗎? – adiga

+0

您的ajax函數會在id爲「SelectedCountry」的元素髮生變化時觸發,您忘記將其放入選擇標籤參數中,因此它應該像「@ Html.DropDownListFor(m => m.SelectedCountry,new SelectList Model.CountriesList),「選擇一個國家」,新的{@class =「form-control」,id =「SelectedCountry」})' – Tiramonium

回答

2

正如其他人的建議,你不更新您的div內容。當AJAX調用完成時,您不會注意到有任何變化。

爲了方便起見,除了.ajax()之外,jQuery還提供了.load()方法,該方法自動將返回的內容提供給匹配的元素。所以你的javascript可能看起來像這樣:

<script> 
    $("#SelectedCountry").change(function() { 
     var selectedCountry = $(this).val(); 
     $("div.box-body").load('@Url.Action("_BlogsGrid","Blog")', 'country=' + selectedCountry); 
    }); 
</script> 
+0

沒有工作。它甚至沒有提出要求 – Cybercop

+0

@Cyber​​cop在我的例子中有一個錯字。你複製/粘貼了嗎?我現在糾正了它... –

0

創建頁面時,Razor將其全部值替換爲@以生成整個頁面的整個。這就是爲什麼在調試模式下,您的@Html.DisplayText被擊中。

但是,當您加載頁面時,會考慮if,如果該條件爲false,則不會看到內部HTML。

要更新您的DOM,您必須使用success ajax調用的data參數。此參數通過您的_BlogsGrid方法的返回自動設置。

您可以通過修改success回調看到它。請注意,data參數應該是第一個參數

sucess: function(data) { 
    console.log(data); 
}, 
+0

我不要讓你。當計數爲0時,其他語句不會被觸發。反正當計數爲0而不是舊內容時,您建議更新我的內容 – Cybercop

0

您在初始加載後沒有更新數據。你的ajax調用返回你的局部視圖的HTML內容。您必須手動將其更新到DOM。給你的容器分區id

<div id="blogs-grid" class="box-body"> 
    @{ Html.RenderAction("_BlogsGrid",new {country=""});} 
</div> 

,然後在阿賈克斯成功回調:

sucess: function(data) { 
    $('#blogs-grid').html(data); 
}, 

現在任何內容返回你的Ajax將被綁定到blogs-grid DIV

+0

我在我的ajax調用中沒有使用數據參數。也許我需要設置數據參數,以便我可以獲取內容。 – Cybercop

+0

@Cyber​​cop你已經添加了它,但順序錯誤。 「ajax」成功回調中的第一個參數是從服務器返回的數據。 – adiga

+0

我做了你所說的但仍然無效。我可以在瀏覽器中看到,我得到了一些html響應,這是我想要的,但我的div沒有被更新。我將更新我的答案,以便您可以看到發生了什麼 – Cybercop

0

你的Ajax成功功能不做任何處理服務器響應。它只是在瀏覽器控制檯中打印成功。

您需要在成功功能上使用服務器響應,並用新內容替換頁面的實際內容。

您的html響應是成功函數的第一個參數。 你可以看一下jQuery的documentantion更好undertanding(http://api.jquery.com/jquery.ajax/

要更換你的網頁的內容成功函數應該是這樣的:

sucess: function(data) { 
      $("div.box-body").html(data); 
      console.log('sucess'); 
     },