C＃MVC表单：如何利用html.editorfor的优势为简单的反馈表单构建视图？

Question

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

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

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

我阅读了此文章以及其他一些链接，他们建议使用@ Html.EditorFor，因为它基于模型数据类型创建UI。

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

Answer 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自动创建视图。 在您的控制器中，右键单击“ d”以返回View（d）; 并选择“添加视图”。 将模板更改为“ create”，并将Model类更改为您的Model（在此示例中为whatModel）。 它将自动为您生成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>

Answer 2

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

嗨，希尔，第一步，创建一个如下的模型类

public class FeedBack
{
   public string  Name{get;set;}
   public string  Gender{get;set;}
   public int  Mobile-Number{get;set;}
   public string  Complaint{get;set;}

  // other additional fields


}

并在控制器的get方法中，传递如下模型

public class ComplaintController
{
    [HttpGet]
    public ActionResult Index()
    {
      FeedBack OBJFeedback = new FeedBack();    
       return View(OBJFeedback); 
    }
}

在视图中，强烈键入此模型并将所需的数据发布到控制器的post方法。

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

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

希望以上信息对您有所帮助

谢谢

卡尔提克

Answer 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 model属性并在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>

如果您不想使用submit，则可以使用ajax。