如何解决来自多个下拉列表的 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;
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。