如何使用标准 HTML 实现 Razor Pages 模型绑定？答案

【问题标题】：How to implement Razor Pages model binding with standard HTML?如何使用标准 HTML 实现 Razor Pages 模型绑定？
【发布时间】：2018-09-25 21:37:56
【问题描述】：

我目前正在使用 ASP.NET MVC 构建一个 Web 应用程序。我认为有一些表单可以接收要放入响应后正文的数据。我想将这些输入附加到我的视图模型，然后将我的视图模型传回我的控制器以便处理它们。

这是我的网络应用程序中的一个示例：

<select id="ServiceSelect" size="3" style="width:600px; overflow-y:auto" multiple="multiple">
                <option value="Service 1" class="pad">Service 1 </option>
                <option value="Service 2" class="pad">Service 2</option>
                <option value="Service 3" class="pad">Service 3</option>
            </select> 

            <input type="hidden" id="service" name="service" value="" />
            
            <!-- this puts the two buttons side by side after the select -->
            <br />

            <input type="submit" name="start" value="Start Service(s)" />
            <input type="submit" name="stop" value="Stop Service(s)" />

（隐藏的输入是使用基于选择表单的 jQuery 函数填充的）

我想利用 Razor Pages 的模型绑定特性，以便在选择其中一个提交按钮时将我的隐藏输入添加到我的模型中。目前，通过 Fiddler，我可以看到它正在正确填充响应主体，但我认为本机 MVC 模型绑定可能是一种更清洁的方法。

但是，在这样的代码示例中：

<td>
     @Html.DropDownListFor(m => m.Gender /* <- this being what I want */, new List<SelectListItem>
     { new SelectListItem{Text="Male", Value="M"},
       new SelectListItem{Text="Female", Value="F"}}, "Please select")
</td>

我无法找到一种方法来包含我使用自己的选择标签（多选、样式）设置的当前功能和样式。

我是 Razor Pages 的新手，所以我不太了解它的语法，因为它是内置函数。我发现原始 HTML 更易于编码、阅读和设置样式，但无法找到任何在线资源来帮助我解决这个问题。

有没有办法在合并自己的 HTML 表单时利用 MVC/Razor Pages 模型绑定特性，而不是内置 @Html 表单的可扩展性较差（据我可能误导的知识和观点）？

【问题讨论】：

使用@Html.DropDownListFor()（或ListBoxFor()，如果你想要<select multiple>）是正确的方法。目前尚不清楚您使用它的问题是什么
这是 Razor Pages 在 asp.net-core 中吗？
它在 asp.net-mvc 中被标记，但我相信它是一样的。我从未见过 ListBoxFor();如果我要重构并走那条路，它似乎确实是我的问题的解决方案，我不一定反对。我只是好奇是否有一种方法可以在不更改当前 HTML 代码结构的情况下实现模型绑定行为，但如果有必要，我愿意这样做。
不，不一样（见链接）。如果你想要<select multiple>，那么你需要ListBoxFor() - 请参阅Why does the DropDownListFor lose the multiple selection after Submit but the ListBoxFor doesn't? 以获得解释。
但是你为什么不想使用HtmlHelper 方法，它可以为你提供双向模型绑定、客户端验证等？（您需要编写数百行附加代码才能使其与您的手册 html 一起正常工作）

标签： c# html asp.net-mvc razor

【解决方案1】：

据我了解，您正在寻找模型绑定

要实现相同的代码，您的代码应如下所示示例代码：

查看

Index.cshtml

@model WebApplication3.Models.Test
@{
ViewBag.Title = "Home Page";
}


@using (Html.BeginForm("Save", "Home", FormMethod.Post))
{
 <div class="row">
 <div class="col-md-4">
    @Html.TextBoxFor(m => m.EmployeeName)

 </div>

 <input type="submit" value="Save" />

 </div>
}

控制器

 public ActionResult Index()
    {
        Test objTest= new Test();
        objTest.EmployeeName = "Test";
        return View(objTest);
    }
  public ActionResult Save(Test obj)
    {
        return View("About");
    }

型号

 public class Test
{
    public string EmployeeName { get; set; }
}

Model Binding 也照此实现

【讨论】：

谢谢你，我真的很感激你的例子，现在对我来说很明显我将不得不使用 HtmlHelper 类。

【解决方案2】：

所以你问了很多我认为我理解的事情，但我不确定是否全部了解。

首先你需要在剃须刀页面顶部设置@model，让剃须刀了解你使用的是什么型号。

其次，如果你想要一个 POST 操作，你应该是这样的代码：

@Html.BeginForm(){
enter code here
}

您可以使用@Html.HiddenFor(model => model.service) 放置隐藏的输入

我知道你问的最后一件事是样式。

每个 Html.HiddenFor 或 Html.TextBoxFor 都有一个 htmlAttributes 对象的可选构建器值。您可以使用它将样式传递给标签，例如：

@Html.TextBoxFor(txt => txt.name, new { @class= "textbox"})

【讨论】：