c# mvc 表单：如何利用使用 html.editorfor 的好处为简单的反馈表单构建视图？

Posted 2023-03-27

【中文标题】c# mvc 表单：如何利用使用 html.editorfor 的好处为简单的反馈表单构建视图？

【英文标题】：c# mvc form: how to build view for simple feedback form leveraging the benefit of using html.editorfor?

【发布时间】：2017-12-07 03:26:48

【问题描述】：

我有简单的输入表单（主要用于反馈），其中包含以下字段： 姓名、性别、手机号码、投诉文本。 （为简化起见，我没有在表单上提及任何 POST 操作或提交按钮）

目前，我创建了以下 MVC 结构：

public class ComplaintController

    [HttpGet]
    public ActionResult Index()
    
       return View(); //This view displays the complaint form with all above fields
    

我阅读了 this 和其他几个链接，他们建议使用 @html.EditorFor，因为它基于模型数据类型创建 UI。

目前，我没有将任何模型传递给 [HttpGet] 视图。如果我想使用@Html.EditorFor，我需要将我的模型传递给 [HttpGet] 索引视图，我该怎么做？创建此类 MVC 表单的最佳做法是什么？

【问题讨论】：

如果您只想输出用户提交的内容，在 MVC 中有很多方法可以执行，如果您希望在 db. SaveChanges，你可以做一个 return RedirectToAction("ComfirmationView",yourModel)，然后把它传递给一个 ActionResult Comfirmation(YourModel yourModel)

我想你弄糊涂了，我改写了这个问题。删除了所有不必要的细节。请检查

你应该使用'@model YourModel'，你在视图顶部添加这个代码，或者当你添加视图时有一个选项创建强类型视图，检查这个并在模型类下选择你的模型类..read more

【参考方案1】：

你的控制器：

    public ActionResult Index()
    
        whateverModel d = new whateverModel();
        return View(d);
    

    [HttpPost]
    [ValidateAntiForgeryToken]
    public ActionResult Index(whateverModel m)
    

        if (ModelState.IsValid)
        

           //its valid, update your database or do soemthing useful here
           return RedirectToAction("Success");
        
        //its not valid reload the page and let data annotations show the error
        return View(m);
    

将代码放入控制器后，您就可以让 Visual Studio 自动创建您的视图。在您的控制器中，右键单击返回 View(d) 中的“d”；并选择“添加视图”。将模板更改为“创建”，将模型类更改为您的模型（本示例中的任何模型）。它将使用导入的模型和已经为您生成的编辑器自动为您生成 chtml 页面。下面的示例自动生成视图。你可以从事造型等工作。

cshtml:

    @model YourSolution.Models.whateverModel

    @
        ViewBag.Title = "Whatever";
        Layout = "~/Views/Shared/_Layout.cshtml";
    

    <h2>Whatever</h2>

    @using (Html.BeginForm()) 
    
        @Html.AntiForgeryToken()

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

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

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

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

【讨论】：

这会有所帮助，但推荐的做法是像在“View(d);”中那样在 httpget 中初始化这些空白对象。这将有助于自动创建视图，否则这是不必要的内存分配，因为这个模型永远不会被使用？

由于不可为空的类型，建议这样做。让我们忽略大多数人在模型初始构造函数中为属性设置一些值的事实。假设为简单起见，您有一个客户模型，其中包含一个 int custID，您将其用作数据库中的主键。在视图中，您不想显示 custID，因此将其设置为隐藏字段。继续并在您的 http get 中初始化模型并观察它在提交时流向您的帖子然后删除初始化并观察当您点击“if(ModelState.IsValid)”行时帖子中会发生什么。

这并不是说你不能围绕这个编程来真正微调你的内存利用率，你只需要弄清楚它是否值得，因为小的简单对象不会占用太多内存所有和大型复杂对象很可能会让您在构造函数中初始化一些属性，只是为了正常的业务逻辑。我想我所说的只是要注意。

【参考方案2】：

目前，我没有将任何模型传递给 [HttpGet] 视图。如果我想要 要使用@Html.EditorFor，我需要将我的模型传递给 [HttpGet] 索引 查看，我该怎么做？

嗨，sahil，第一步，创建一个如下所示的模型类

public class FeedBack

   public string  Nameget;set;
   public string  Genderget;set;
   public int  Mobile-Numberget;set;
   public string  Complaintget;set;

  // other additional fields

然后在控制器的 get 方法中，传递一个如下所示的模型

public class ComplaintController

    [HttpGet]
    public ActionResult Index()
    
      FeedBack OBJFeedback = new FeedBack();    
       return View(OBJFeedback); 
    

在视图中，强类型化这个模型，然后根据需要将数据发布到控制器的发布方法。

这里是强类型视图的例子：http://www.c-sharpcorner.com/UploadFile/abhikumarvatsa/strongly-typed-views-in-mvc/

重要提示：在 get 操作方法中，由于您不想在视图中默认显示任何值，即使您不传递模型对象，它也会以相同的方式工作。

希望以上信息对你有用

谢谢

卡提克

【讨论】：

这会有所帮助，但建议在 httpget 中初始化此类空白对象，就像在“View(OBJFeedback);”中所做的那样。这将有助于自动创建视图，否则这是不必要的内存分配，因为这个模型永远不会被使用？

是的，你完全正确，这有助于自动创建视图，否则这是不必要的内存分配。所以不要在 httpget 中创建模型对象 .thanks karthik

很好，但是我如何在没有任何模型的情况下利用 Html.Editorfor 的功能呢？还有其他出路吗？

是的，您可以将模型放在视图中，而无需从 httpget 方法传递。这样你就可以利用所有强类型 html 帮助器的特性，比如 editorfor 和 textboxfor。

【参考方案3】：

如果你想使用@Html.EditorFor，那么你将模型传递给视图。@Html.EditorFor 是做什么的？它使html标签像

<input class="text-box single-line" id="Name" name="Name" type="text" value="">

因此，如果您不想将模型传递给视图，则需要像上面那样编写原始 html 标记。保持 html 标签的 name 属性与 mvc 的 model 属性相同很重要，因为当您想将数据发布到控制器时，html 标签的 name 属性将映射 mvc 模型属性并在 Controller 方法中获取相应的值。

在视图（somthing.cshtml）中，您可以使用 html 标签，因为 .cshtml==.cs+html 。所以整个代码看起来像

控制器方法

 public ActionResult FeedBack()
 
     return View();
 



[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult FeedBack(FeedBackModel Model)

    var feedBack = Model;
     return View();
 

还有风景

<form action="/Home/FeedBack" method="post" id="feedBackForm">
    @Html.AntiForgeryToken()
    <hr>
    <div class="form-group">
        <div class="col-md-5">
            <label for="Name">Name</label>
        </div>
        <div class="col-md-5">
            <input class="text-box single-line" name="Name" type="text">
        </div>
        </div>
    <div class="form-group">
        <div class="col-md-5">
            <label for="Name">Gender</label>
        </div>
        <div class="col-md-5">
            <select name="Gender">
                <option value="male">Male</option>
                <option value="female">Female</option>
            </select>
        </div>
        </div>
    <div class="form-group">
        <div class="col-md-5">
            <label for="Name">MobileNumber</label>
        </div>
        <div class="col-md-5">
            <input class="text-box single-line" name="MobileNumber" type="text">
        </div>
        </div>
    <div class="form-group">
        <div class="col-md-5">
            <label for="Name">Complaint</label>
        </div>
        <div class="col-md-5">
            <textarea class="text-box single-line" name="Complaint"></textarea>
        </div>
        </div>


    <div class="col-md-5">
        <input type="submit" value="Create" class="btn btn-default">
    </div>
</form>

如果你不想使用提交，那么你可以使用 ajax。