Question

我目前正在使用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>

我看不到一种方法来包含我通过自己的select标签设置的当前功能和样式（多选，样式）。

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

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

Answer 1

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

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

查看

Index.cshtml

import React, {Component} from 'react';
import { Table } from 'semantic-ui-react'
import Link from './Link';
import axios from 'axios';
import _ from 'lodash';

class Material extends Component {
    constructor(props){
      super(props);
      this.state={
        materials: []
    }
   }

   componentDidMount() {
    const token = localStorage.getItem('jwt');
    const total = localStorage.getItem('totalpage');
    var page;
    for (page = 1; page <= total ; page++) {
        const apiBaseUrl = Link + "api/materials/?page=" + page;

        const config = {
         headers: {
           'Authorization': "bearer " + token,
           'Accept': 'application/json',
           'Content-Type': 'application/json',
         }
        }

        axios.get(apiBaseUrl, config)
         .then((response) => {
             console.log(response.data);
            this.setState({
             materials: response.data
           })
          })
    }

   }

    render() {
        const { materials } = this.state;

        let returndata = _.isEmpty(materials) ? [] : materials.data

        return (  
            <div className="ui container"> 
            <br />
            <br />
                <Table fixed>
                    <Table.Header>
                        <Table.Row>
                            <Table.HeaderCell>UUID</Table.HeaderCell>
                            <Table.HeaderCell>Title</Table.HeaderCell>
                            <Table.HeaderCell>Description</Table.HeaderCell>
                        </Table.Row>
                    </Table.Header>

                    <Table.Body>
                    {returndata.map((item, i) => {
                        return (
                        <Table.Row key = {i}>
                            <Table.Cell>{item.uuid}</Table.Cell>
                            <Table.Cell>{item.title}</Table.Cell>
                            <Table.Cell>{item.description}</Table.Cell>
                        </Table.Row>
                        )
                    })}
                    </Table.Body>
                </Table>
            </div>
      );
    }
  }
  export default Material;

控制器

@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");
    }

请遵循相同的步骤以实现模型绑定

Answer 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"})

如何使用标准HTML实施Razor Pages模型绑定？

2 个答案: