跨页面携带值以用作路由参数的首选方式

Question

我想要一个 select 列表，用于列出用户 table 查询到 select 的项目。这是用

渲染的

 Options = _context.BranchAssignment
            .Where(a => a.ColleagueID == UserColleague)
            .IgnoreQueryFilters()
            .OrderBy(a => a.Branch.BranchNumber)
            .Select(a => 
             new SelectListItem
             {
                 Value = a.BranchID.ToString(),
                 Text = a.Branch.BranchName
             })                                    
             .ToList();

<form id="assignedBranch" method="post">
            <div class="row">
                <select asp-for="BranchSelect" asp-items="Model.Options" onchange="this.form.submit();"></select>
            </div>
        </form>

如您所见，这是一个非常简单的表格。我当前开发中的解决方案应该 onFormSubmit，采用 selected 选项，将其设置为 cookie 值，然后我可以为 select 列表设置 selected 选项，如果用户导航到另一个页面。

我还在调试这个问题，我想知道是否有更好的解决方案。理想情况下，我希望这个 select 列表只写一次并显示在 _layout 导航栏中，但我相信您不能从视图组件（我最后一次尝试）中读取以获取 selected 值用作OnGet中的路由参数。

如果您想象用户转到页面 A 并且 select 列表 selected 项目是选项 2 然后通过 onGet 我想加载网址。com/PageA/option2 因为路由将被设置为选项2

如果他们随后转到页面 B，则 select 列表将呈现并记住他们之前的选项 option2，因此它将加载网址。com/PageB/option2 如果他们可以更改为例如选项 3 和 OnFormSubmit webaddress.com/PageB/option3 之后将加载。

如果我以错误的方式解决这个问题，我将不胜感激推动首选流程。

Answer 1

我建议你使用 cookie 跨页面传递值，而不是使用路由参数。

我分两步实现：

首先，添加一个Onchange事件到<select>，当你选择一个选项时，Onchange事件会设置一个cookie到保存您选择的值。

其次，当您加载其他页面时，<select> 将读取 cookie 以显示您之前的选择。

这是我的代码：

DropDown List 在 _layout .cshtml

<li>
    <select id="fruit" onchange="save(this.value)">
       <option value=0>apple</option>
       <option value=1>pear</option>
       <option value=2>watermelon</option>
       <option value=3>cherry</option>
     </select>
</li>

JavaScript 在 _layout .cshtml

<script>
         //....................set Cookie............
       var saveclass = null;

        function save(cookieValue)
        {
            var sel = document.getElementById('fruit');
            saveclass = saveclass ? saveclass : document.body.className;
            document.body.className = saveclass + ' ' + sel.value;
            setCookie('theme', cookieValue, 365);
        }

        function setCookie(cookieName, cookieValue, nDays)
        {
           

            var today = new Date();
            var expire = new Date();

            if (nDays==null || nDays==0)
                nDays=1;

            expire.setTime(today.getTime() + 3600000*24*nDays);
            document.cookie = cookieName+"="+escape(cookieValue) + ";expires="+expire.toGMTString() +";path=/";
        }
        //......................read Cookie.............
         document.addEventListener('DOMContentLoaded', function() 
        {
            var themeSelect = document.getElementById('fruit');
            var selectedTheme = readCookie('theme');

            themeSelect.value = selectedTheme;
            saveclass = saveclass ? saveclass : document.body.className;
            document.body.className = saveclass + ' ' + selectedTheme;
        });

        function readCookie(name) 
        {
            var nameEQ = name + "=";
            var ca = document.cookie.split(';');
            for(var i = 0; i < ca.length; i++) 
            {
                var c = ca[i];
                while (c.charAt(0) == ' ') c = c.substring(1, c.length);
                if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
            }
            return null;
        }      
 </script>

然后你可以在其他页面上获取相同的选项

是的，你是对的。当我从 setCookie 中删除天数组件时 function.the cookie 将仅在会话存在时存在。

跨页面携带值以用作路由参数的首选方式

Preferred way to carry a value across pages to use as route parameter

c#

asp.net-core

razor-pages

model-binding