asp-all-route-data 未在 Asp.Net Core MVC 中调用操作方法

Question

我正在运行 Asp.Net Core 3.1 应用程序，其中我在布局中有一个左侧菜单，我通过局部视图加载。

要设置菜单链接，我使用了如下锚标记：

var allRouteData = new Dictionary<string, string>
{
    { "menuid", mID.ToString() },
    { "isCalledByMenu", "true" },
    { "where", "tab" }
};
                    
<a class="@clas" data-ajax="true" data-ajax-complete="RedirectToPage('@M.MenuUrl', '@M.MenuName',true)" data-ajax-mode="replace" data-ajax-update="#myTab" asp-action="GetSubMenu" asp-controller="Base" asp-all-route-data="@allRouteData">@M.MenuName</a>
               

因此，当页面加载时，HTML 生成如下：

<a class="nav-link btn fuse-ripple-ready" data-ajax="true" data-ajax-complete="RedirectToPage('/OrgOverview/ProfessionalServices', 'Professional Services',true)" data-ajax-mode="replace" data-ajax-update="#myTab" href="/Base/GetSubMenu?menuid=9630&amp;isCalledByMenu=true&amp;where=tab">Professional Services</a>

下面是使用的动作方法：

public IActionResult GetSubMenu(int menuid, bool? isCalledByMenu, string where = null)
{
    return ViewComponent("SubMenu", new { menuid = menuid, isCalledByMenu = isCalledByMenu, where = where });
}

在顶部的布局页面中，我分配了标签助手：

@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

但是当我点击链接时，它并没有点击这个动作方法。 更新：当我点击菜单时，它首先点击了 javascript 中的列表，我在其中进行了一些 ajax 调用：

 $('#myTab>li>a.nav-link.btn.fuse-ripple-ready').on("click", function (e) {
                        e.preventDefault();
                        var requestedPage = $(this).text();
                       
                SetCurrentPageNameSession(requestedPage, false);// ajax call to set some value.
                return true;
                    });

在 SetCurrentPageNameSession 方法中，我执行 ajax 调用以在调用操作方法之前将服务器端的菜单名称设置为某个会话。 如下：

function SetCurrentPageNameSession(CurrentPage, IsBookMark) {

                if (IsBookMark==undefined)
                    IsBookMark = false;
        var url = baseUrl+"Manage/HighlightCurrentMenu/"
        $.ajax({
            type: "POST",
            data: { CurrentPage: CurrentPage, IsBookMark: IsBookMark },
                url: url,
                dataType: "json",
                async:false,
                success: function (data) {
                var res = data.d;
            },
                error: function (xhr, ajaxOptions, thrownError) {

            }
        });
    }

然后在它锚标记之后调用action方法。

请提出建议。

Answer 1

也许你会忘记data-ajax，它对我也不起作用，我也找不到答案。您可以编写如下代码，它也可以请求GetSubMenu 并继续执行下一个逻辑。

<div id="myTab"></div>

<a class="nav-link btn fuse-ripple-ready"
   href="#">Professional Services</a>


<script>
 $('a.nav-link.btn.fuse-ripple-ready').on("click", function (e) {
     //e.preventDefault();

     $.ajax({
         url: "/Base/GetSubMenu",
         async: true,
         type: "get",
         datatype: "json",
         data: @Json.Serialize(allRouteData),
         success: function (result) {
             $('#myTab').html(result)
         }

     });

     //RedirectToPage('/OrgOverview/ProfessionalServices', 'Professional Services', true);

     var requestedPage = $(this).text();
     SetCurrentPageNameSession(requestedPage, false);// ajax call to set some value.
     return true;
});

</script>

---

评论或删除e.preventDefault();

在事件流的任何阶段调用preventDefault() 都会取消事件，这意味着不会发生通常由实现作为事件结果而采取的任何默认操作。

Answer 2

我找到了上述问题的解决方案：

问题是，当我单击菜单链接时，我习惯于首先调用它在 javascript 中的锚点单击，在那里我执行了 e.preventDefault()，然后用于执行一些 ajax 调用以传递一些值以在会话中设置。由于之后的 e.preventDefault() 调用，它没有触发 action 方法。

因为我必须将其他三个数据传递给服务器以设置某处。为此，我在锚标记数据链接属性中设置了所有三个值，用管道分隔，如下所示：

data-link="9630|true|tab|/OrgOverview/ProfessionalServices|Professional Services"

 function SetCurrentPageNameSession(CurrentPage, IsBookMark, MenuID, IsCalledByMenu, Where, PageUrl, PageName) {

        var url = baseUrl+"Manage/HighlightCurrentMenu/"
        $.ajax({
            type: "POST",
            data: { CurrentPage: CurrentPage, IsBookMark: IsBookMark, menuID: MenuID, isCalledByMenu: IsCalledByMenu, where: Where},
                url: url,
                dataType: "json",
                async:false,
                success: function (data) {
                    var res = data.d;
                    if (PageUrl != undefined && PageUrl != '' && PageUrl != null)
                        RedirectToPage(PageUrl, PageName, true, false)
            },
                error: function (xhr, ajaxOptions, thrownError) {

            }
        });

然后在这个 ajax 调用成功中，我使用传递的页面 url 重定向页面。

但我仍然想知道相同的代码在 MVC 中是如何工作的，而不是在 asp.net 核心中。

就是这样。