文章/答案/技术大牛

发布

社区首页 >问答首页 >将隐藏字段值绑定到Razor页面中字段后面的代码。

问将隐藏字段值绑定到Razor页面中字段后面的代码。
EN

Stack Overflow用户

提问于 2022-11-08 22:29:46

回答 1查看 54关注 0票数 0

我在Razor页面上有一个隐藏字段，每当主用户拖放用户到“避免”容器中时，我就会将用户的值附加到使用javascript的值中。(这是一个团队建设者应用程序)。

<input id="AvoidPseudoList" type="hidden" aria-valuetext="" asp-for="AvoidPseudoList" >

javascript如下：

<script type="text/javascript">
        $(function () {
        $('#submit').on('click', function (evt) {
            const avoid = document.getElementById("avoidContainer");
            const avoidInput=document.getElementById("AvoidPseudoList");
            
            for(const child of avoid.children)
            {
                console.log(child);
                avoidInput.ariaValueText+=" "+child.innerHTML;
            }
            evt.preventDefault();
            $.post('', $('form').serialize(), function () {
                
            });
        });
    });
    </script>

后面的代码如下：

[BindProperty]
public string AvoidPseudoList{get;set;}

当我console.log隐藏的值时，我可以看到它成功地将用户附加到ariaValueText属性，但是在调试时，AvoidPseudoList后面的代码仍然设置为null。

TeamBuilderStudent.cshtml的完整代码

@page
@model StudyBuddy.Pages.TeamBuilder.TeamBuilderStudentsModel
@{
    ViewData["Title"]="Team Builder for Students";
}

<div class="container">
    <form method="Post">
        <h1>Welcome @User.Identity.Name </h1>
        <p>When is your preferred time to work?</p>
        <input type="checkbox" name="AreChecked" value="M"> Morning <br>
        <input type="checkbox" name="AreChecked" value="A"> Afternoon <br>
        <input type="checkbox" name="AreChecked" value="E"> Evening <br>

        <p>Select students that you would like to work with</p>
       @* <select name="preferred" class="preferred">
            <option value="">Select a classmate</option>
            @foreach (var classmate in Model.UserList)
            {
                <option value=@classmate.UserName>@classmate.UserName</option>
            }
        </select>
        <br>
         <p>Select students that you want to avoid</p>
        <select name="avoid">
            <option value="">Select a classmate</option>
            @foreach (var classmate in Model.UserList)
            {
                <option value=@classmate.UserName>@classmate.UserName</option>
            }
        </select> *@
        <div class="row">
            <div class="col">
                <h2>Avoid</h2>
            </div>

            <div class="col">
                <h2>Student List</h2>
            </div>

            <div class="col">
                <h2>Prefer</h2>
            </div>
        </div>
        
        <div class="row">
            <div class="col containerD" id="avoidContainer">
                
                
            </div>

            <div class="col containerD">
                        @foreach (var classmate in Model.UserList)
                        {
                            <p class="draggable" draggable="true">@classmate.UserName</p>
                        }
            </div>

            <div class="col containerD" id="prefer">
            </div>
        </div>
        

        <input id="AvoidPseudoList" type="hidden" aria-valuetext="" asp-for="AvoidPseudoList" >


        <br>
        <button id="submit" class="btn btn-primary"> Update Preferences</button>
    </form>
        
@section scripts
{
    <script type="text/javascript">
        $(function () {
        $('#submit').on('click', function (evt) {
            const avoid = document.getElementById("avoidContainer");
            const avoidInput=document.getElementById("AvoidPseudoList");
            
            for(const child of avoid.children)
            {
                console.log(child);
                avoidInput.ariaValueText+=" "+child.innerHTML;
            }
            console.log(avoidInput);
            evt.preventDefault();
            $.post('', $('form').serialize(), function () {
                
            });
        });
    });
    </script>
    <script type="text/javascript">
        const draggables = document.querySelectorAll('.draggable')
        const containers = document.querySelectorAll('.containerD')

        draggables.forEach(draggable => {
        draggable.addEventListener('dragstart', () => {
            draggable.classList.add('dragging')
        })

        draggable.addEventListener('dragend', () => {
            draggable.classList.remove('dragging')
        })
        })

        containers.forEach(container => {
        container.addEventListener('dragover', e => {
            e.preventDefault()
            const afterElement = getDragAfterElement(container, e.clientY)
            const draggable = document.querySelector('.dragging')
            if (afterElement == null) {
            container.appendChild(draggable)
            } else {
            container.insertBefore(draggable, afterElement)
            }
        })
        })

        function getDragAfterElement(container, y) {
        const draggableElements = [...container.querySelectorAll('.draggable:not(.dragging)')]

        return draggableElements.reduce((closest, child) => {
            const box = child.getBoundingClientRect()
            const offset = y - box.top - box.height / 2
            if (offset < 0 && offset > closest.offset) {
            return { offset: offset, element: child }
            } else {
            return closest
            }
        }, { offset: Number.NEGATIVE_INFINITY }).element
        }
    </script>
}
    
</div>

TeamBuilderStudent.cshtml.cs的完整代码

@page
@model StudyBuddy.Pages.TeamBuilder.TeamBuilderStudentsModel
@{
    ViewData["Title"]="Team Builder for Students";
}

<div class="container">
    <form method="Post">
        <h1>Welcome @User.Identity.Name </h1>
        <p>When is your preferred time to work?</p>
        <input type="checkbox" name="AreChecked" value="M"> Morning <br>
        <input type="checkbox" name="AreChecked" value="A"> Afternoon <br>
        <input type="checkbox" name="AreChecked" value="E"> Evening <br>

        <p>Select students that you would like to work with</p>
       @* <select name="preferred" class="preferred">
            <option value="">Select a classmate</option>
            @foreach (var classmate in Model.UserList)
            {
                <option value=@classmate.UserName>@classmate.UserName</option>
            }
        </select>
        <br>
         <p>Select students that you want to avoid</p>
        <select name="avoid">
            <option value="">Select a classmate</option>
            @foreach (var classmate in Model.UserList)
            {
                <option value=@classmate.UserName>@classmate.UserName</option>
            }
        </select> *@
        <div class="row">
            <div class="col">
                <h2>Avoid</h2>
            </div>

            <div class="col">
                <h2>Student List</h2>
            </div>

            <div class="col">
                <h2>Prefer</h2>
            </div>
        </div>
        
        <div class="row">
            <div class="col containerD" id="avoidContainer">
                
                
            </div>

            <div class="col containerD">
                        @foreach (var classmate in Model.UserList)
                        {
                            <p class="draggable" draggable="true">@classmate.UserName</p>
                        }
            </div>

            <div class="col containerD" id="prefer">
            </div>
        </div>
        

        <input id="AvoidPseudoList" type="hidden" aria-valuetext="" asp-for="AvoidPseudoList" >


        <br>
        <button id="submit" class="btn btn-primary"> Update Preferences</button>
    </form>
        
@section scripts
{
    <script type="text/javascript">
        $(function () {
        $('#submit').on('click', function (evt) {
            const avoid = document.getElementById("avoidContainer");
            const avoidInput=document.getElementById("AvoidPseudoList");
            
            for(const child of avoid.children)
            {
                console.log(child);
                avoidInput.ariaValueText+=" "+child.innerHTML;
            }
            console.log(avoidInput);
            evt.preventDefault();
            $.post('', $('form').serialize(), function () {
                
            });
        });
    });
    </script>
    <script type="text/javascript">
        const draggables = document.querySelectorAll('.draggable')
        const containers = document.querySelectorAll('.containerD')

        draggables.forEach(draggable => {
        draggable.addEventListener('dragstart', () => {
            draggable.classList.add('dragging')
        })

        draggable.addEventListener('dragend', () => {
            draggable.classList.remove('dragging')
        })
        })

        containers.forEach(container => {
        container.addEventListener('dragover', e => {
            e.preventDefault()
            const afterElement = getDragAfterElement(container, e.clientY)
            const draggable = document.querySelector('.dragging')
            if (afterElement == null) {
            container.appendChild(draggable)
            } else {
            container.insertBefore(draggable, afterElement)
            }
        })
        })

        function getDragAfterElement(container, y) {
        const draggableElements = [...container.querySelectorAll('.draggable:not(.dragging)')]

        return draggableElements.reduce((closest, child) => {
            const box = child.getBoundingClientRect()
            const offset = y - box.top - box.height / 2
            if (offset < 0 && offset > closest.offset) {
            return { offset: offset, element: child }
            } else {
            return closest
            }
        }, { offset: Number.NEGATIVE_INFINITY }).element
        }
    </script>
}
    
</div>

知道我该怎么做才能正确地绑定这些价值观吗？谢谢!

javascript

asp.net

asp.net-core

razor

razor-pages

回答 1

Stack Overflow用户

发布于 2022-11-09 03:08:32

如果要将值从页面绑定到后端，可以在value标记中添加<input />属性。您需要value属性来绑定input的值

<input id="AvoidPseudoList" type="hidden" aria-valuetext="" value="" asp-for="AvoidPseudoList" >

在Js代码中，可以添加代码：

//..........
for(const child of avoid.children)
{
      console.log(child);
      avoidInput.ariaValueText+=" "+child.innerHTML;
      avoidInput.value +=" "+child.innerHTML;
}
//.........

然后可以将值绑定到后端。

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/74367864

复制

相似问题

问将隐藏字段值绑定到Razor页面中字段后面的代码。
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问将隐藏字段值绑定到Razor页面中字段后面的代码。EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问将隐藏字段值绑定到Razor页面中字段后面的代码。
EN