asp.net 将隐藏字段值绑定到Razor页面中的代码隐藏字段

在我的Razor页面上有一个隐藏字段，每当主用户将用户拖放到“avoid”容器中时，我都会使用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>

你知道我应该做些什么来正确地绑定这些值吗？谢谢！

asp.net 将隐藏字段值绑定到Razor页面中的代码隐藏字段

1条答案

相关问题

热门标签

最新问答