Question

我正在尝试建立一种关系，您点击网格1中的采购订单，网格2将显示相关项目。我一直在研究并尝试了几种不同的方法。我目前的链接是：

@Ajax.ActionLink("Select", "DisplayPOItems", new { id = Model.poList[0].ID }, new AjaxOptions
{
     UpdateTargetId = "POItems",
     HttpMethod = "GET",
     InsertionMode = InsertionMode.Replace,
})

我还试过一个动作链接：

$("#POSelect").click(function () {
     $.get('@Url.Action("DisplayPOItems","PO", new { id = Model.ID })', function () {
     $('#POItems').load(this.href);
     return false;
     });
});

或者使用ajax捕获click事件的类似块，并尝试将部分视图填充到我的表单上的div中。所有这些方法都填充了数据，但它总是重定向到... / PO / DisplayPOItems / 1，并且只显示那里的局部视图。这是我的控制器：

public PartialViewResult DisplayPOItems(int ID)
{
     ItemModel im = new ItemModel();
     return PartialView("_GridItem", im.POSearchResult(ID));
}

我在Controller上也尝试了ActionResult，但它没有帮助。如何让页面不重定向，只使用部分视图填充表单上的div？

Answer 1

几天前我处理同样的问题，我只想添加上面的答案，并使用AJAX。

您需要在主视图页面中运行两个要运行其他部分视图的java脚本。只在我的应用程序中使用unobstrusive-ajax dint帮助。

这是脚本。

<script src="~/Scripts/jquery-1.8.2.min.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>

您的视图页面也需要此

@using (Ajax.BeginForm("Search", new AjaxOptions() { UpdateTargetId = "results" }))
    {

目标ID将位于div标签

中

<div id="results">
@renderpartial("results")
</div>

这有助于在不重新加载整个页面的情况下获取内容。但是我遇到了这个问题。我实际上无法重定向到另一个视图（重定向到其他控制器操作并转到其视图）但部分页面加载工作正常。我的意思是控制在那里，但回到相同的视图，而不是移动到其他视图。

希望这有帮助。

Answer 2

如果您决定使用Ajax.ActionLink，请确保您在页面中引用了jquery.unobtrusive-ajax.js脚本：

<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>

如果您决定使用普通的jQuery，请确保您正在发送一个AJAX请求而不是当前的两个请求。还要确保在正确的位置返回false：

$('#POSelect').click(function () {
     var url = '@Url.Action("DisplayPOItems", "PO", new { id = Model.ID })';
     $.get('url', function (result) {
         $('#POItems').html(result);
     });
     return false;
});

或等同于：

$('#POSelect').click(function () {
     var url = '@Url.Action("DisplayPOItems", "PO", new { id = Model.ID })';
     $('#POItems').load(url);
     return false;
});

或者如果链接已包含正确的网址：

$('#POSelect').click(function () {
     $('#POItems').load(this.href);
     return false;
});

Answer 3

我有一个jQuery插件用于此类事情。

$ ->
    $.fn.LoadViewInline = (url,target,useInline,callback) ->
        #debugger
        $.disableEventPropagation(event);
        if(!url)
            url = $(this).data("inline-url")
        if(!useInline)
            useInline = $(this).data("inline")
        if useInline == "True" or useInline == true 
            if(!target)
                target = $(this).data "inline-target"
            if(!targetSelectorPrefix)
                targetSelectorPrefix = "#"
            $(targetSelectorPrefix + target).load url, callback
        else
            window.location.href = url
        return false

使用类似：

@Html.ActionLink("Add a Claimant", "Index", "Property", 
    new RouteValues().With("fnolid", Fnolid),
    HtmlValues.WithClass("header")
    .Data("inline-url", dataInlineNewClaimantUrl)
    .Data("inline-target", dataInlineTarget)
    .Data("inline", dataInline)
    .With("onclick", "return $(this).LoadViewInline();")

部分视图重定向而不是填充div

3 个答案: