【问题标题】:Retrieve database value from Shared layout从共享布局中检索数据库值
【发布时间】:2021-03-12 18:41:08
【问题描述】:

我在 _layout 中添加了一个显示当前余额的共享 div(因为我希望它显示在网站的所有页面中。)

现在,金额是硬编码的,我写了 3000$ , 如何从数据库中检索此值? _layout 页面没有控制器。 我在 Google 中看到了使用 @Html.Action 的选项, 这不起作用(我只有 Html.ActionLink)

这是_layout中的部分:

<div class="container-fluid">
    <div class="row">
        <h1 class="col-6"></h1>
        <h1 class="col-4 text-center" style="font-size:30px;font-weight:bold;color:forestgreen;border-style:inset">
            <img src="~/Images/Coin.jpg" alt="Site Logo" style="height:30px; width: 30px" />
            Current Balance : 3000$
        </h1>
        </div>
        <main role="main" class="pb-3">
            @RenderBody();
        </main>
    </div> 

创建的 HomeController :

【问题讨论】:

    标签: asp.net-mvc asp.net-core asp.net-mvc-3 razor


    【解决方案1】:

    在 Asp.net Core 中,要执行控制器操作并渲染视图,您可以使用 View Components。如果要使用 RenderAction 方法,则必须添加 HtmlHelperViewExtensions,并在 Html Helper 中添加 @Html.RenderAction() 方法,更多详细信息可以查看this thread

    在您的场景中,我建议您可以使用 JQuery Ajax 调用 action 方法并从数据库中获取数据,然后在 Ajax 成功方法中更新页面内容。您可以参考以下示例:

    控制器中的代码:

        public IActionResult GetMessage()
        {
            //query database, and get the data.
            return Content("10000$");
        }
    

    Layout.cshtml 中的代码:
    添加&lt;span&gt; 显示返回数据:

            <div id="txt_navbar_output">
                <h4 class="col-4 text-center" style="font-size:16px;font-weight:bold;color:forestgreen;border-style:inset;">
                    <img src="~/Images/Coin.jpg" alt="Site Logo" style="height:30px; width: 30px" />
                    Current Balance : <span id="returndata">3000$</span>
                </h4>
            </div>
    

    页面加载后,使用JQuery Ajax调用action方法获取数据,然后更新内容。

    <script>
        $(function () {
            $.ajax({
                type: "Get",
                url: "/Home/GetMessage",
                success: function (data) {
                    //update the page content.
                    $('#returndata').html(""); //clear the content
                    $('#returndata').html(data); //add the latest data.
                },
                error: function (response) {
                    console.log(response.responseText);
                }
            });
        });
    </script>
    

    输出如下:值已更改为“10000$”。

    编辑

    关于“Uncaught ReferenceError: $ is not defined at (index)”错误,好像是JQuery引用没有添加成功,尝试在JQuery脚本前添加JQuery引用:

        <script src="~/lib/jquery/dist/jquery.min.js"></script>
        <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
        <script src="~/js/site.js" asp-append-version="true"></script>  
        <script>
            $(function () {
                $.ajax({
                    type: "Get",
                    url: "/Home/GetMessage",
                    success: function (data) {
                        //update the page content.
                        $('#returndata').html(""); //clear the content
                        $('#returndata').html(data); //add the latest data.
                    },
                    error: function (response) {
                        console.log(response.responseText);
                    }
                });
            });
        </script>
    

    您也可以使用 CDN 参考:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    

    _layout.csthml 资源如下:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>@ViewData["Title"] - Test</title>
        <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
        <link rel="stylesheet" href="~/css/site.css" />
    
    </head>
    <body>
        <header>
            <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
                <div class="container">
                    <a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">Test</a>
                    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent"
                            aria-expanded="false" aria-label="Toggle navigation">
                        <span class="navbar-toggler-icon"></span>
                    </button>
                    <div class="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse">
                        <ul class="navbar-nav flex-grow-1">
                            <li class="nav-item">
                                <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Index">Home</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
                            </li>
                        </ul>
                    </div>
                    <div id="txt_navbar_output">
                        <h4 class="col-4 text-center" style="font-size:16px;font-weight:bold;color:forestgreen;border-style:inset;">
                            <img src="~/Images/Coin.jpg" alt="Site Logo" style="height:30px; width: 30px" />
                            Current Balance : <span id="returndata">3000$</span>
                        </h4>
                    </div>
                </div>
    
            </nav>
        </header>
        <div class="container">
            <main role="main" class="pb-3">
                @RenderBody()
            </main>
        </div>
    
        <footer class="border-top footer text-muted">
            <div class="container">
                &copy; 2020 - Test - <a asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
            </div>
        </footer> 
        <script src="~/lib/jquery/dist/jquery.min.js"></script>
        <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
        <script src="~/js/site.js" asp-append-version="true"></script>
    
        @RenderSection("Scripts", required: false)
        <script>
            $(function () {
                $.ajax({
                    type: "Get",
                    url: "/Home/GetMessage",
                    success: function (data) {
                        //update the page content.
                        $('#returndata').html(""); //clear the content
                        $('#returndata').html(data); //add the latest data.
                    },
                    error: function (response) {
                        console.log(response.responseText);
                    }
                });
            });
        </script>
    
    </body>
    </html>
    

    【讨论】:

    • 您好,您在Ajax 中的url 是Home/GetMessage... 共享文件夹中没有Home 文件夹,请问在哪里可以添加GetMessage?我可以为共享文件夹中的 _layout.cshtml 创建控制器吗?
    • 否,不在共享文件夹中创建控制器。在您的 MVC 应用程序中,在 Controllers 文件夹中添加 HomeController,然后在 HomeController 中添加 GetMessage 操作方法,您可以检查 this screenshot
    • 你能发送你的整个_layout吗?由于某种原因,我创建了 homeController(在主线程中添加了屏幕截图)ajax 无法正常工作....得到“Uncaught ReferenceError: $ is not defined at (index):120
    • @Kobi关于“Uncaught ReferenceError: $ is not defined at (index)”错误,看来是JQuery引用没有添加成功,尝试在JQuery脚本前添加JQuery引用。跨度>
    • 是的,404 错误与端点模式有关。尝试修改代码如下:app.UseEndpoints(endpoints =&gt;{ endpoints.MapControllerRoute( name: "default", pattern: "{controller=Home}/{action=Index}/{id?}"); endpoints.MapControllerRoute(name: "area", pattern: "{area=Admin}/{controller=Home}/{action=Index}/{id?}"); endpoints.MapRazorPages();});
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多