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。