调用C#函数并从页面传递参数

Question

我的

_Layout.cshtml

中有一个下拉菜单，用于在我的应用程序中选择“活动项目”。

@*Build a section here that allows a user to easily switch between the projects in the application by using a dropdown menu populated with the projects*@
        <div class="container">
            <div class="row">
                <div class="col-8">
                    <select class="dropdown btn btn-secondary col-8" id="ActiveProject" asp-for="@selector.ActiveProject" asp-items="@selector.ProjectsList">
                        @DropdownText
                    </select>
                </div>
                <div class="col-4">
                    @*when user clicks this button the app should set the current project to the sleected project in the <select> statement above*@
                    <button class="btn btn-success" onclick="@selector.SetActiveProject()">Save</button>
                </div>
            </div>
            <hr />
        </div>

我有一个名为

ProjectSelector

的类，我已将其注册为服务并注入到我的

_Layout

页面中。

using ***.ASRData.Model;
using Microsoft.AspNetCore.Mvc.Rendering;
using Microsoft.EntityFrameworkCore;


namespace ***.Services
{
    public class ProjectSelector
    { 
        private readonly ASRDataContext _context;
        public IList<Project> Projects = new List<Project>();
        public List<SelectListItem>? ProjectsList { get; set;}
        public Project? ActiveProject { get; set; }

        public ProjectSelector(ASRDataContext context)
        {
            _context = context;
            Projects = _context.Projects.ToList();
            ProjectLoader();
        }

        public Project SetActiveProject(Project project)
        {
            //change isActive on all other projects to false and then change the project passed in to true
            //this will ensure that only one project is active at a time
            //this is a hacky way to do this, but it works for now
            foreach (var p in Projects)
            {
                if (p.IsActiveProject == true)
                {
                    p.IsActiveProject = false;

                    //now save all of the changes to the database using entity framework
                    _context.Projects.Update(p);
                }
            }

            project.IsActiveProject = true;
            _context.Projects.Update(project);
            //now save all of the changes to the database using entity framework
            _context.SaveChanges();

            ActiveProject = project;

            return ActiveProject;
        }

        public Project GetActiveProject()
        {
            if (ActiveProject == null)
            {
                ActiveProject = _context.Projects.First();
                return ActiveProject;
            }
            else
            {
                ActiveProject = _context.Projects.Where(x => x.IsActiveProject == true).First();
                return ActiveProject;
            }
        }

        public void ProjectLoader()
        {
            ProjectsList = _context.Projects.Select(x => new SelectListItem()
            {
                Value = x.Id.ToString(),
                Text = x.ProjectName
            }).ToList();
        }
    }
}

在我的布局页面中，我想将当前选定的项目作为参数传递到我的

_Layout

文件中此行的 onClick 部分：

<button class="btn btn-success" onclick="@selector.SetActiveProject()">Save</button>

据我了解，我可能需要使用 Ajax 来完成此操作，但我对 Web 开发非常陌生，尤其是 JavaScript / Ajax。我在这里走的路线正确吗？

Answer 1

例子太多了，我就分享一个。 以下是您可以遵循的步骤的概述：

更新 _Layout.cshtml 文件中的按钮以在单击时触发 AJAX 请求。您还需要添加 HTML 元素来显示所选项目：

<div class="container">
    <div class="row">
        <div class="col-8">
            <select class="dropdown btn btn-secondary col-8" id="ActiveProject" asp-for="@selector.ActiveProject" asp-items="@selector.ProjectsList">
                @DropdownText
            </select>
        </div>
        <div class="col-4">
            <!-- Add a div to display the selected project -->
            <div id="selectedProject"></div>
            <!-- Use JavaScript to trigger an AJAX request -->
            <button class="btn btn-success" id="saveButton">Save</button>
        </div>
    </div>
    <hr />
</div>

添加 JavaScript 代码来处理按钮单击事件并发送 AJAX 请求来设置活动项目：

<script>
    // Attach a click event handler to the button
    document.getElementById("saveButton").addEventListener("click", function () {
        // Get the selected project from the dropdown
        var selectedProjectId = document.getElementById("ActiveProject").value;

        // Send an AJAX request to set the active project
        $.ajax({
            type: "POST", // Use POST or GET depending on your API endpoint
            url: "/YourController/SetActiveProject", // Replace with your controller and action names
            data: { projectId: selectedProjectId },
            success: function (result) {
                // Update the selected project display
                document.getElementById("selectedProject").innerText = "Active Project: " + result.projectName;
            },
            error: function () {
                // Handle errors if necessary
            }
        });
    });
</script>

在 ASP.NET Core 应用程序中创建一个控制器操作来处理 AJAX 请求并设置活动项目：

[HttpPost]
public JsonResult SetActiveProject(int projectId)
{
    // Retrieve the project based on the projectId
    var project = _context.Projects.FirstOrDefault(p => p.Id == projectId);

    if (project != null)
    {
        // Call your ProjectSelector method to set the active project
        _projectSelector.SetActiveProject(project);

        return Json(new { success = true, projectName = project.ProjectName });
    }

    return Json(new { success = false });
}

确保将“YourController/SetActiveProject”替换为应用程序中的实际控制器和操作名称。通过此设置，当用户从下拉列表中选择一个项目并单击“保存”按钮时，AJAX 请求将发送到服务器设置活动项目。所选项目的名称将显示在页面上。