JQuery Ajax MVC部分视图无法正常工作

时间:2014-09-14 22:25:16

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

我是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文件中,但就像我说的要求火好,所以问题不在那里。在此先感谢。

1 个答案:

答案 0 :(得分:0)

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

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