asp.net mvc，如果在視圖中不起作用

Question

從index角度來看，這是我代碼的一部分

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

問題是，當我第一次加載它時，一切正常，控制器方法被命中，所有博客都被加載，這就是視圖的外觀

但是當我從下拉列表中選擇一個國家時，沒有匹配該國家的博客

它在視圖（是局部視圖）中命中if條件（在視圖中放入斷點，我檢查是否正在執行條件或正在執行條件，並且通過if條件） 但是“ if”的內容未加載到瀏覽器中。 我仍然得到與以前相同的內容。 知道為什么我的內容沒有被更新嗎？

更新：

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

在瀏覽器響應中

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

Answer 1

正如其他人建議的那樣，您不會更新div內容。 這樣，您就不會在AJAX調用完成時注意到更改。

為了減輕.ajax() ，除了.ajax() ，jQuery還提供了.load()方法，該方法自動將返回的內容饋送到匹配的元素中。 因此，您的JavaScript可能如下所示：

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

Answer 2

創建頁面后，Razor將所有@替換為其值，以生成整個 HTML頁面。 這就是為什么在調試模式下，您的@Html.DisplayText被@Html.DisplayText原因。

但是，在加載頁面時，將考慮if ，並且如果條件為false，則看不到內部HTML。

要更新DOM，必須使用success ajax調用的data參數。 該參數由_BlogsGrid方法的返回自動設置。

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

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

Answer 3

初始加載后，您無需更新數據。 您的ajax調用返回部分視圖的html內容。 您必須手動將其更新為DOM。 給您的容器div一個id 。

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

然后在您的ajax成功回調中：

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

現在，您的ajax返回的任何內容都將綁定到blogs-grid div

Answer 4

您的ajax成功函數對服務器響應不起作用。 它只是在瀏覽器控制台中打印成功。

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

您的html響應是成功函數的第一個參數。 您可以查看jquery documentantion以獲得更好的理解（ http://api.jquery.com/jquery.ajax/ ）

要替換頁面的內容，成功函數應如下所示：

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