ASP.NET MVC 5中的Ajax(部分视图)不起作用 - 总是只打开部分视图

时间:2014-04-04 12:05:50

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

我有一个问题,点击它应该刷新页面的一部分(局部视图)只打开新页面"选择" (这是应该在索引页面中显示的部分)。我试着用这个教程http://csharp-video-tutorials.blogspot.sk/2013/09/part-92-ajax-with-aspnet-mvc.html来做这个,但我不知道出了什么问题 - 我也没有在这个论坛上找到任何关于它的内容。

共享_Layout中的资源:

@Scripts.Render("~/bundles/jquery")

内部地图/索引:

@Ajax.ActionLink("All", "GetTracks",
                new AjaxOptions
                {
                    HttpMethod = "GET", // HttpMethod to use, GET or POST
                    UpdateTargetId = "mytestdiv", // ID of the HTML element to update
                    InsertionMode = InsertionMode.Replace // Replace the existing contents
                })

<div id="mytestdiv">
</div>

地图控制器(我知道这只是使用Viewbag的不好解决方案 - 它只是暂时的):

public PartialViewResult GetTracks()
{
    List<int> trackIDs = new List<int>();

    var queryTrack = from dTrack in db.track
                        where dTrack.device_id == 1
                        select dTrack.id;

    foreach (int trackId in queryTrack)
    {
        trackIDs.Add(trackId);
    }

    ViewBag.trackIDs = trackIDs;
    return PartialView("SelectTrackView");
}

我想用Ajax重新加载,位于〜/ Views / Map / SelectTrackView.cshtml中:

<select id="SelectTrack" name="idTrack" class="form-control" style="margin:20px" onchange="selectTrack()">

    @foreach (int number in ViewBag.trackIDs)
    {
        if (ViewBag.selectedidTrack == @number)
        {
            <option value="@number" selected="selected">@number</option>
        }
        else
        {
            <option value="@number">@number</option>
        }
    }
</select>

感谢您的帮助。

1 个答案:

答案 0 :(得分:7)

您的页面中是否有对jquery.unobtrusive-ajax.js的引用?

如果不是这些帮助者生成的data- *标签不会被篡改,链接将被视为“正常”链接。

编辑:

我认为你需要这个包:Microsoft jQuery Unobtrusive Ajax

如果您不想使用此软件包,只需输入

即可
<script>
(function($){
    $(document).on("click","a[data-ajax='true']", function(e){
        e.preventDefault();
        $("#"+ $(this).attr("data-ajax-update")).load(this.href);
    });
})(jQuery);
</script>