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 
    } 
} 

我讀this和幾個他們建議使用等環節@ 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）;並選擇「添加視圖」。將模板更改爲「創建」和Model類到您的模型（在本例中爲whateverModel）。它會自動爲您導入生成的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); 
    } 
} 

而在一個視圖，強烈鍵入此模型並將數據發佈到控制器發佈方法。

這裏是強類型的視圖的例子：http://www.c-sharpcorner.com/UploadFile/abhikumarvatsa/strongly-typed-views-in-mvc/

重要提示：在取得動作的方法，因爲你不希望在視圖中默認顯示的任何值，即使你不通過模型對象時，它會以同樣的方式工作。

希望以上資料是有用的

感謝

KARTHIK

Answer 3

如果你想使用@ Html.EditorFor，那麼肥大傳遞模型到view.What做@ Html.EditorFor做？這使得像

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

html標籤所以，如果你不想對模型傳遞給視圖，那麼你需要寫原始的HTML標籤像上面。保持html標籤的名稱屬性與mvc的模型屬性相同是很重要的，因爲當您要將數據發佈到控制器時，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。