使用 ViewModel 提交 POST

Question

我正在创建一个网站，您可以在其中为游戏创建活动。我有一个创建页面。创建新Event时，页面有一个GameID字段。我正在尝试使用 ViewModel，以便可以显示游戏的名称并选择它，而不是 ID。

public class EventCreateVM
    {
        public Events Event { get; set; }
        public IEnumerable<SelectListItem> Games { get; set; }
    }

public class Events
{
    public int EventID { get; set; }
    public int GameID { get; set; }
    [DisplayName("Event Name")]
    public string EventName { get; set; }
    public string Server { get; set; }
    [DisplayName("Max Players")]
    public int MaxPlayers { get; set; }
    public string Type { get; set; }
    public string Platform { get; set; }
    public string Description { get; set; }
    [DisplayName("Event Time")]
    public DateTime DateTime { get; set; }
}

我更改了“创建”页面，以便它可以与 ViewModel 一起使用

@model AgileTeamFour.UI.ViewModels.EventCreateVM

@{
    ViewData["Title"] = "Create";
}
<h1>Create</h1>

<h4>Events</h4>
<hr />
<div class="row">
    <div class="col-md-4">
        <form asp-action="Create" asp-controller="Event">
            <div asp-validation-summary="ModelOnly" class="text-danger"></div>
           @*  <div class="form-group">
                <label asp-for="Event.EventID" class="control-label"></label>
                <input asp-for="Event.EventID" class="form-control" />
                <span asp-validation-for="Event.EventID" class="text-danger"></span>
            </div> *@
            <div class="form-group">
    <label asp-for="Event.GameID" class="control-label"></label>
    <select asp-for="Event.GameID" class="form-control" asp-items="Model.Games"></select>
    <span asp-validation-for="Event.GameID" class="text-danger"></span>
</div>
            <div class="form-group">
                <label asp-for="Event.EventName" class="control-label"></label>
                <input asp-for="Event.EventName" class="form-control" />
                <span asp-validation-for="Event.EventName" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="Event.Server" class="control-label"></label>
                <input asp-for="Event.Server" class="form-control" />
                <span asp-validation-for="Event.Server" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="Event.MaxPlayers" class="control-label"></label>
                <input asp-for="Event.MaxPlayers" class="form-control" />
                <span asp-validation-for="Event.MaxPlayers" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="Event.Type" class="control-label"></label>
                <input asp-for="Event.Type" class="form-control" />
                <span asp-validation-for="Event.Type" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="Event.Platform" class="control-label"></label>
                <input asp-for="Event.Platform" class="form-control" />
                <span asp-validation-for="Event.Platform" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="Event.Description" class="control-label"></label>
                <input asp-for="Event.Description" class="form-control" />
                <span asp-validation-for="Event.Description" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="Event.DateTime" class="control-label"></label>
                <input asp-for="Event.DateTime" class="form-control" />
                <span asp-validation-for="Event.DateTime" class="text-danger"></span>
            </div>
            <div class="form-group">
                <input type="submit" value="Create" class="btn btn-primary" />
            </div>
        </form>
    </div>
</div>

<div>
    <a asp-action="Index">Back to List</a>
</div>

@section Scripts {
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
}

并更改了控制器。

public ActionResult Create()
{
    var games = GameManager.Load(); 
    var viewModel = new EventCreateVM
    {
        Event = new Events(),
        Games = games.Select(g => new SelectListItem
        {
            Value = g.GameID.ToString(),
            Text = g.GameName
        }).ToList()
    };
    return View(viewModel);
}

[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Create(EventCreateVM viewmodel)
{
    try
    {
        if (ModelState.IsValid)
        {
            int eventID = 0;
            EventManager.Insert(ref eventID, viewmodel.Event.GameID, viewmodel.Event.EventName, viewmodel.Event.Server, viewmodel.Event.MaxPlayers, viewmodel.Event.Type, viewmodel.Event.Platform, viewmodel.Event.Description, viewmodel.Event.DateTime);
            return RedirectToAction(nameof(Index));
        }
        return View(viewmodel);
    }
    catch
    {
        return View();
    }
}

该页面使游戏选择列表变得清晰。但是当我尝试按下提交按钮时，页面只是刷新并且不会在数据库中创建任何内容。

据我所知，有效负载形式似乎很好。帖子200，好像没有遇到错误。如果我不使用视图模型更改，则创建函数可以正常工作。我已经尝试了几个小时来解决这个问题，但没有任何运气。任何建议将不胜感激。

Answer 1

根据您的代码，提交表单时，请求将使用 GET 而不是 POST（HTTP 方法）发送到“Event/Create”API。

您可以通过使用

GET

和

POST

将断点放置在“Event/Create”API（方法）的第一行代码中来进行调试。这将帮助您确定“Event/Create”API（使用 POST 方法）是否被命中。

总而言之，将

method="POST"

属性添加到

<form>

元素，以确保表单提交到正确的 API。

<form asp-action="Create" asp-controller="Event" method="POST">
    ...
</form>