Question

我的问题是，我在youtube上的本教程视频中完全遵循了该规则，但最后他正在教授登录功能，但最终我无法使用它，我尝试了多次，但它仍然停留在登录页面上，可以继续到登录页面。

这是youtube视频的链接

https://www.youtube.com/watch?v=tbWWkJYDR7Q&fbclid=IwAR0raDsQqpWwNkk00IFvEndhZHdYfF8Ha_NuHXxTEYKjFbtnmg_qzmEOMgo
这是我的登录页面代码

@model TestLogin.Models.User

@{
    ViewBag.Title = "Login";
}

<h2>Login</h2>

@using (Html.BeginForm()) 
{
    @Html.AntiForgeryToken()
    
    <div class="form-horizontal">
        <h4>User</h4>
        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        <div class="form-group">
            @Html.LabelFor(model => model.Username, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Username, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Username, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Password, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Password, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Password, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Log In" class="btn btn-default" />
            </div>
        </div>
    </div>
}

<div>
    @Html.ActionLink("Back to List", "Index")
</div>

这是控制器代码

        [HttpPost]
        [ValidateAntiForgeryToken]
        public ActionResult Login(User user)
        {
            if (ModelState.IsValid)
            {
                using (DataContext db = new DataContext())
                {
                    var obj = db.Users.Where(u => u.Username.Equals(user.Username) && u.Password.Equals(user.Password)).FirstOrDefault();

                    if (obj != null)
                    {
                        Session["IC"] = obj.IC.ToString();
                        Session["Username"] = obj.Username.ToString();
                        return RedirectToAction("LoggedIn");
                    }
                }
            }
            return View(user);
        }

Answer 1

在Html.BeginForm（）中设置ActionResult（登录），ControllerName（在其中登录的控制器名称）和FormMethod（Post），请参见下文：

@using (Html.BeginForm("Login","ControllerName", FormMethod.Post, new{ @id="frmLogin", @role="form"}))

Answer 2

react-datepicker之所以返回，是因为在登录页面之前，我需要插入5个字段。因此，我需要添加import React, { FC, useMemo } from 'react' import moment, { Moment } from 'moment' import { default as ReactDatePicker } from 'react-datepicker' import css from './date-picker.module.css' import ArrowIcon from '../Icons/ArrowIcon' interface Props { id: string label: string icon: JSX.Element date: Moment | null onChange: Function minDate?: Moment | null maxDate?: Moment | null selectsStart?: boolean selectsEnd?: boolean } const months = [ 'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December', ] const customHeader = ({ date, decreaseMonth, increaseMonth, prevMonthButtonDisabled, nextMonthButtonDisabled, }: any) => ( <div className={css.header}> <button className={css.backArrow} onClick={decreaseMonth} disabled={prevMonthButtonDisabled} > <ArrowIcon width={16} height={16} className={css.arrowIcon} /> </button> <span> {months[date.getMonth()]} {date.getFullYear()} </span> <button className={css.nextArrow} onClick={increaseMonth} disabled={nextMonthButtonDisabled} > <ArrowIcon width={16} height={16} className={css.arrowIcon} /> </button> </div> ) const DatePicker: FC<Props> = ({ label, icon, date, onChange, minDate, maxDate, selectsStart, selectsEnd, }) => { const dateObj = useMemo(() => (date ? date.toDate() : null), [date]) const minDateObj = useMemo(() => (minDate ? minDate.toDate() : null), [ minDate, ]) const maxDateObj = useMemo(() => (maxDate ? maxDate.toDate() : null), [ maxDate, ]) return ( <div className={css.host}> <div className={css.label}>{label}</div> <div className={`${css.wrapper}`}> {icon} <ReactDatePicker selected={dateObj} className={css.input} calendarClassName={css.calendar} showTimeSelect dateFormat="dd/MM/yyyy h:mm aa" onChange={newDate => { if (newDate) { onChange(moment(newDate)) } }} startDate={minDateObj} endDate={maxDateObj} minDate={minDateObj} maxDate={maxDateObj} selectsStart={selectsStart} selectsEnd={selectsEnd} showPopperArrow={false} popperModifiers={{ offset: { enabled: true, offset: '-28px, 4px', }, }} renderCustomHeader={customHeader} /> </div> </div> ) } export default DatePicker来解决问题

登录页面-无法使用MVC登录

2 个答案: