JQuery Ajax MVC部分视图不起作用答案

【问题标题】：JQuery Ajax MVC Partial View Not workingJQuery Ajax MVC部分视图不起作用
【发布时间】：2014-09-14 22:25:16
【问题描述】：

我是 Asp.Net MVC 和 JQuery 的新手。我正在尝试通过 JQUery 和 AJAX 使用我的控制器的部分视图来更新我的页面。但是我在 Chrome 开发者工具中检查了它似乎不起作用，它似乎成功地进行了调用，它只是永远不会更新我的页面。

这是我的代码：

索引页面：

@{
ViewBag.Title = "Home Page";
}
@section featured {
<section class="featured">
    <div class="content-wrapper">
        <hgroup class="title">
            <h1>Nav</h1>

        </hgroup>
        <p>
           Click to show Nav
        </p>
    </div>
</section>
}

<div id="nav"></div>

@section Scripts{
@Scripts.Render("~/bundles/jqueryval")

<script type="text/javascript">
    $(function () {
        $(".navLink").click(function (ev) {                
            ev.preventDefault();
            loadNav("/Home/_NavItems");
            return false;
        });

        function loadNav(url) {
            $.get(url, function (data) {
                $('#div').html(data);

            });
        }




    });

    </script>

}

就像我说的那样，信息是通过开发人员工具传递的，所以我的函数会触发并且我的部分视图是正确的，所以我不确定我是否可能在我的 JQuery 中遗漏了一些东西。但这里是代码。

控制器中的部分视图：

 public PartialViewResult _NavItems()
    {
        List<NavItem> model = new List<NavItem>();
        model.Add(new NavItem(1, "asd", "asdas"));
        model.Add(new NavItem(2, "asd", "asdas"));
        model.Add(new NavItem(3, "asd", "asdas"));

        return PartialView(model);
    }


Actually View:

@model IEnumerable<PartialViewsTest2.Models.NavItem>



<p>
   @Html.ActionLink("Create New", "Create")
</p>
<table>
   <tr>
       <th>
        @Html.DisplayNameFor(model => model.Name)
    </th>
    <th>
        @Html.DisplayNameFor(model => model.NameLast)
    </th>
    <th></th>
</tr>

@foreach (var item in Model) {
<tr>
    <td>
        @Html.DisplayFor(modelItem => item.Name)
    </td>
    <td>
        @Html.DisplayFor(modelItem => item.NameLast)
    </td>
    <td>
        @Html.ActionLink("Edit", "Edit", new { id=item.Id }) |
        @Html.ActionLink("Details", "Details", new { id=item.Id }) |
        @Html.ActionLink("Delete", "Delete", new { id=item.Id })
    </td>
</tr>
}

</table>

就像我说的，我对 MVC 和 Jquery 很陌生，所以如果有任何遗漏，请告诉我。我的链接在 _layout 文件中，但就像我说的那样，请求很好，所以问题不存在。提前致谢。

【问题讨论】：

function loadNav(url) { 中的$('#div').html(data); 是错字吗？您似乎没有带有id="div" 的元素。你是说$('#nav').html(data)
:( 是的，先生，这是一个错误。花了四个小时尝试新事物，这是一个错误命名的 div，哇。谢谢伙计。它现在可以工作了。@StephenMuecke
@StephenMuecke 无论如何我可以代表你吗？

标签： jquery asp.net-mvc asp.net-ajax

【解决方案1】：

您的函数正在使用id="div" 更新一个元素，该元素似乎不存在。你确实有一个带有id="nav" 的元素，所以将函数更改为

function loadNav(url) {
  $.get(url, function (data) {
    $('#nav').html(data);
  });
}

【讨论】：