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');
        },