asp.net mvc if else 在视图中不工作

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

事情是当我第一次加载它时一切正常，控制器方法被命中并且所有博客都被加载这就是视图的样子

但是当我从下拉列表中 select 一个国家时，没有与该国家相匹配的博客

它在视图中命中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

创建页面时，Razor 将所有 @ 替换为它们的值以生成整个 HTML 页面。这就是为什么在调试模式下，你的 @Html.DisplayText 被命中了。

但是，当您加载页面时，if 会被考虑在内，如果条件为假，您将看不到内部 HTML。

要更新您的 DOM，您必须使用 success ajax 调用的 data 参数。此参数由 _BlogsGrid 方法的 return 自动设置。

您可以通过修改您的 success 回调来查看它。注意data参数应该是第一个参数

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

Answer 2

您没有在初始加载后更新数据。您的 ajax 调用 returns 局部视图的 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 3

您的 ajax 成功函数对服务器响应没有任何作用。它只是在浏览器控制台中打印成功。

您需要在成功功能上使用服务器响应，并将页面的实际内容替换为新内容。

您的 html 响应是成功函数的第一个参数。您可以查看 jquery 文档以获得更好的理解 (http://api.jquery.com/jquery.ajax/)

要替换您页面的内容，成功函数应该是这样的：

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

Answer 4

正如其他人所建议的，您没有更新 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>

asp.net mvc if else 在视图中不工作

asp.net mvc if else not working in view

c#

asp.net

asp.net-mvc

partial-views