来自多个下拉列表的 ASP.NET MVC Foreach

问题描述

我试图从视图模型中的每个下拉列表中获取一个值。我正在使用 foreach 但这似乎不起作用。有人可以帮我吗？

我正在控制器中执行 foreach。我正在为此使用实体框架和存储库方法。任何帮助都是有帮助的。

控制器

import React,{ useState,useEffect } from "react";
import { NavLink,Route,Switch,useRouteMatch,useHistory,useLocation,useParams } from 'react-router-dom';
import MainLayout from "../layouts/MainLayout";
import AuthLayout from "../layouts/AuthLayout";
import NotFound from "../pages/NotFound";
import Login from "../pages/Login";
import Welcome from "../pages/Welcome";
import Dashboard from "../pages/Dashboard";
import Locations from "../pages/Locations";
import ProtectedRoute from "./ProtectedRoute";
import Navbar from "react-bootstrap/Navbar";
import Nav from "react-bootstrap/Nav";
import { LinkContainer } from "react-router-bootstrap";
import { ReactComponent as logo } from '../images/logo.svg';
import { useAppContext } from "../libs/contextLib";
import { LinkContainer } from "react-router-bootstrap";
import { useAppContext } from "../libs/contextLib";
import axios from 'axios';
import Form from "react-bootstrap/Form";
import LoaderButton from "../components/LoaderButton";
import LoginImage from '../images/login-page-Image.png';
import FloatLabelTextBox from "../components/FloatLabelTextBox.js"
import { API_BASE_URL,ACCESS_TOKEN_NAME } from '../constants/apiConstants.js';
import { onError } from "../libs/errorLib";

export default function MainRoutes() {
    return (
        <Switch>
            <Route path={['/login','/welcome']}>
                <AuthLayout>
                    <Route path='/login' component={Login} />
                    <Route path='/welcome' component={Welcome} />
                </AuthLayout>
            </Route>            
            <ProtectedRoute exact path={['/','/locations']}>
                <MainLayout>                    
                    <Route path='/locations' component={Locations} />
                    <Route exact path='/' component={Dashboard} />
                </MainLayout>
            </ProtectedRoute>
            {/* Finally,catch all unmatched routes */}
            <Route>
                <NotFound />
            </Route>
        </Switch>
    );
}
function AuthLayout({children}) {    
    const { isAuthenticated } = useAppContext();
    return (
        <>
            <div className="AuthLayout container py-3">
                <Navbar collapSEOnSelect expand="md" className="mb-3 login-nav">
                    <LinkContainer to="/welcome">
                        <Navbar.Brand href="/welcome" className="font-weight-bold text-muted">
                            <logo />
                        </Navbar.Brand>
                    </LinkContainer>
                    <Navbar.Toggle />
                    <Navbar.Collapse className="justify-content-end">
                        <Nav activeKey={window.location.pathname}>
                            <LinkContainer to="/welcome">
                                <Nav.Link>Home</Nav.Link>
                            </LinkContainer>
                            <LinkContainer to="/login">
                                <Nav.Link>Login</Nav.Link>
                            </LinkContainer>
                        </Nav>
                    </Navbar.Collapse>
                </Navbar>
                <div className="Auth-Layout-Body">
                    {children}
                </div>
            </div>
        </>
    );
}
export default AuthLayout;    

function MainLayout({ children }) {
  const { isAuthenticated } = useAppContext();
  const { userHasAuthenticated } = useAppContext();
  const history = useHistory();
  
  function handlelogout() {
    userHasAuthenticated(false);
    console.log("log out");
    history.push("/login");
  }
  return (
    <>
      <div className="MainLayout container py-3">
        <Navbar collapSEOnSelect expand="md" className="mb-3 login-nav">
          <LinkContainer to="/">
            <Navbar.Brand href="/" className="font-weight-bold text-muted">
              Location INTEL
          </Navbar.Brand>
          </LinkContainer>
          <Navbar.Toggle />
          <Navbar.Collapse className="justify-content-end">
            <Nav activeKey={window.location.pathname}>
              <LinkContainer to="/">
                <Nav.Link>Home</Nav.Link>
              </LinkContainer>
              <LinkContainer to="/locations">
                <Nav.Link>Locations</Nav.Link>
              </LinkContainer>
              {isAuthenticated ? (
                <Nav.Link onClick={handlelogout}>logout</Nav.Link>
              ) : (<div></div>)}
            </Nav>
          </Navbar.Collapse>
        </Navbar>
        <div className="Main-Layout-Body">
          {children}
        </div>
      </div>
    </>
  );
}
export default MainLayout;    

export default function Login() {
    const history = useHistory();
    const [state,setState] = useState({
        email: "",password: "",});
    const { userHasAuthenticated } = useAppContext();
    const [isLoading,setIsLoading] = useState(false);

    const handleChange = (e) => {
        setState({
            ...state,[e.target.name]: e.target.value,})
    }

    function validateForm() {
        return state.email.length > 0 && state.password.length > 0;
    }

    function handleSubmit(event) {
        event.preventDefault();

        setIsLoading(true);

        const payload = {
            "email": state.email,"password": state.password,}
        try {    
            axios.post('/api/user/login',payload,{
                headers: {
                    useCredentails: true,'x-api-key': ACCESS_TOKEN_NAME,"Access-Control-Allow-Origin": "*"
                }
            })
                .then(function (response) {
                    console.log(response);
                    //console.log('status code = ' + response.status);
                    if (response.status === 200) {
                        console.log("logged in");
                        userHasAuthenticated(true);
                        history.push("/");
                    } else {
                        console.log("not logged in");
                    }
                })
                .catch(function (error) {
                    console.log(error);
                });

        } catch (e) {
            onError(e);
            setIsLoading(false);
        }
    }

    return (
        <div className="Login-Container">
            <div className="Login-Container-Row">
                <div className="Login">
                    <p className="Login-Header">Login</p>
                    <div className="Login-Form">
                        <Form onSubmit={handleSubmit}>
                            <Form.Group size="lg" controlId="email">
                                <FloatLabelTextBox
                                    inputLabel="EMAIL"
                                    inputAutoFocus="autofocus"
                                    inputType="email"
                                    inputName="email"
                                    inputPlaceholder="Email"
                                    inputValue={state.email}
                                    handleChangeProps={handleChange}
                                />
                            </Form.Group>
                            <Form.Group size="lg" controlId="password">
                                <FloatLabelTextBox
                                    inputLabel="PASSWORD"
                                    inputAutoFocus=""
                                    inputType="password"
                                    inputName="password"
                                    inputPlaceholder="Password"
                                    inputValue={state.password}
                                    handleChangeProps={handleChange}
                                />
                            </Form.Group>
                            <LoaderButton
                                block
                                size="lg"
                                type="submit"
                                isLoading={isLoading}
                                disabled={!validateForm()}>
                                Login
                            </LoaderButton>
                            <p>Not a member? <NavLink to="/register">Get Started Here</NavLink></p>
                        </Form>
                    </div>
                </div>
                <div className="Login-Image">
                    <img src={LoginImage} />
                </div>
            </div>
        </div>
    );
}

export default function ProtectedRoute({ children,...props }) {
    const { isAuthenticated } = useAppContext();
    return (
        <Route 
          {...props} 
          render={props => (
            isAuthenticated ?
              {children} :
              <Redirect to='/login' />
          )} 
        />
    );
}

查看标记：

[HttpPost]
[ValidateAntiForgeryToken]
public async Task<IActionResult> Create(int? id,AddSaidasServicoviewmodel model,string command)
{
        if (ModelState.IsValid)
        {
            //Todo: adicionar Userhelper para ver quem cria a saida. Criar campo na tabela BD.  Ver apontamento Notepad
            if (command.Equals("submit1"))
            {
                await _saidaservicoRepository.AddSaidaServicoAsync(model);
                return RedirectToAction(nameof(Create));
            }
            else
            {
                foreach(var elementoId in model.Elementos )
                {
                    await _elementoRepository.UpdateElementoSaidaServicosAsync(model);
                }
            }

            return RedirectToAction(nameof(Index));
        }
        
        return View(model);
}

视图模型

@model FireHouseGest.web.Models.AddSaidasServicoviewmodel

@{
    ViewData["Title"] = "Create";
}

<h2>Criar</h2>

<h4>Saída Serviço</h4>
<hr />
    <div class="row">
        <div class="col-md-4">
            <form asp-action="Create">
                <div asp-validation-summary="ModelOnly" class="text-danger"></div>
    
    
                <div class="container">
    
                    <div class="row">
                        <div class="text-center">
                            <div class="col-md-3 text-center">
                                <div class="form-group">
                                    <label asp-for="ServicoId" class="control-label"></label>
                                    <select asp-for="ServicoId" asp-items="Model.Servicos" class="form-control"></select>
                                    <span asp-validation-for="ServicoId" class="text-danger"></span>
                                </div>
                            </div>
                            <div class="col-md-3 text-center">
                                <div class="form-group">
                                    <label asp-for="ViaturaId" class="control-label"></label>
                                    <select asp-for="ViaturaId" asp-items="Model.Viaturas" class="form-control"></select>
                                    <span asp-validation-for="ViaturaId" class="text-danger"></span>
                                </div>
                            </div>
    
                        </div>
                    </div>
                    <div class="form-group">
                        <input type="submit" name="command" value="submit1" class="btn btn-default" />
                    </div>
                </div>
                <div class="container">
                    <div class="row">
                        <div class="col-lg-2 text-center">
                            <div class="form-group">
                                <label asp-for="ElementoId" class="control-label"></label>
                                <select asp-for="ElementoId" asp-items="Model.Elementos" class="form-control"></select>
                                <span asp-validation-for="ElementoId" class="text-danger"></span>
                            </div>
                        </div>
                        <div class="col-lg-2 text-center">
                            <div class="form-group">
                                <label asp-for="ElementoId" class="control-label"></label>
                                <select asp-for="ElementoId" asp-items="Model.Elementos" class="form-control"></select>
                                <span asp-validation-for="ElementoId" class="text-danger"></span>
                            </div>
                        </div>
                        <div class="col-lg-2 text-center">
                            <div class="form-group">
                                <label asp-for="ElementoId" class="control-label"></label>
                                <select asp-for="ElementoId" asp-items="Model.Elementos" class="form-control"></select>
                                <span asp-validation-for="ElementoId" class="text-danger"></span>
                            </div>
                        </div>
                        <div class="col-lg-2 text-center">
                            <div class="form-group">
                                <label asp-for="ElementoId" class="control-label"></label>
                                <select asp-for="ElementoId" asp-items="Model.Elementos" class="form-control"></select>
                                <span asp-validation-for="ElementoId" class="text-danger"></span>
                            </div>
                        </div>
                        <div class="col-lg-2 text-center">
                            <div class="form-group">
                                <label asp-for="ElementoId" class="control-label"></label>
                                <select asp-for="ElementoId" asp-items="Model.Elementos" class="form-control"></select>
                                <span asp-validation-for="ElementoId" class="text-danger"></span>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <input type="submit" name="command" value="submit2" class="btn btn-default" />
                    </div>
                </div>          
                <div class="form-group">
                    <label asp-for="Adecorrer" class="control-label"></label>
                    <input asp-for="Adecorrer" class="form-control" />
                    <span asp-validation-for="Adecorrer" class="text-danger"></span>
                </div>
                <div class="form-group">
                    <label asp-for="Inicio" class="control-label"></label>
                    <input asp-for="Inicio" class="form-control" />
                    <span asp-validation-for="Inicio" class="text-danger"></span>
                </div>
                <div class="form-group">
                    <label asp-for="Fim" class="control-label"></label>
                    <input asp-for="Fim" class="form-control" />
                    <span asp-validation-for="Fim" class="text-danger"></span>
                </div>
    
            </form>
        </div>
    </div>

这就是我所拥有的。接受建议。

解决方法

在编码之前，您需要了解以下事项：

1.Model Binding 通过匹配输入的 name 来查找并绑定属性。

2.如果你有多个同名的输入，你需要设置一个List<T>类型参数来接收所有的值。

3.Dropdownlist 获取选中的选项值（不是文本），请确保值的类型与匹配属性的类型相同。 （例如 ElementoId 是 int 类型，所以 Elementos 中每个 SelectListItem 的值应该是 int 或者它可以转换为 int）：

var model = new AddSaidasServicoViewModel()
{
    Elementos = new List<SelectListItem>() {
                new SelectListItem() { Value = "1",Text = "Elementos1" },new SelectListItem() { Value = "2",Text = "Elementos2" },new SelectListItem() { Value = "3",Text = "Elementos3" }
                },//....
};

4.Dropdownlist 选择的值将通过搜索asp-for="xxx" 的相同名称来匹配属性。 （例如 asp-for="ElementoId" 将生成 html:id="ElementoId" name="ElementoId"，因此此输入值将与模型中的属性 ElementoId 匹配）

5.虽然你有两个提交按钮，但提交按钮总是提交所有输入值，它们在同一个表单。

像下面那样更改您的代码，您将在 List<string> ElementoId 中收到所有选定的 ElementoId 值：

[HttpPost]
[ValidateAntiForgeryToken]
public async Task<IActionResult> Create(int? id,AddSaidasServicoViewModel model,List<string> ElementoId,string command)
{
    if (ModelState.IsValid)
    {
        //TODO: adicionar Userhelper para ver quem cria a saida. Criar campo na tabela BD.  Ver apontamento Notepad
        if (command.Equals("submit1"))
        {
            //...
        }
        else
        {
            foreach (var elementoId in ElementoId)
            {
                //....
            }
        }

        return RedirectToAction(nameof(Index));
    }

    return View(model);
}

,

感谢 Rena 的回答。这就是我所做的。

public async Task UpdateElementosSaidasAsync(AddSaidasServicoViewModel model,List<string> Elementos)
    {
        int SaidaServicos = _context.SaidaServicos.Max(item => item.Id);
        var Saida = await _context.SaidaServicos.FindAsync(SaidaServicos);



        if (Elementos == null)
        {
            return;
        }

        else
        {
            foreach (var elementoId in Elementos)
            {

                var updateElementoSaida = _context.Elementos.Where(e => e.Id == Convert.ToInt32(elementoId)).FirstOrDefault();
                updateElementoSaida.saidaServico = Saida;
                await _context.SaveChangesAsync();

            }

        }

        return;
    }