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

Question

I have simple input form (basically for feedback) with following fields: Name, Gender, Mobile-Number, Complaint text. (To simplify I am not mentioning any POST action OR submit button on the form)

Currently, I have created following MVC structure:

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

I read this and several other links where they suggest to use @Html.EditorFor as it creates UI based on model data-type.

Currently, I am not passing any model to the [HttpGet] view. If I want to use @Html.EditorFor, I need to pass my model to [HttpGet] Index View, how can I do that? What is best pratise to create such MVC forms?

Answer 1

Your Controller:

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

Once you have your code in the controller then you can have visual studio auto-create your view. In your controller, right click the "d" in return View(d); and select "Add View." Change the Template to "create" and Model class to your Model (whateverModel in this example). It will auto generate the chtml page for you with the model imported and the editors already generated for you. Example auto generated view below. The you can work on styling and such.

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

Currently, I am not passing any model to the [HttpGet] view. If I want to use @Html.EditorFor, I need to pass my model to [HttpGet] Index View, how can I do that?

Hi sahil ,As a first step , create one model class like below

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


}

And in the controller get method ,pass a model like below

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

And in a view , strongly type this model and post the data as you want to the controller post methods.

Here is the example of strongly typed view : http://www.c-sharpcorner.com/UploadFile/abhikumarvatsa/strongly-typed-views-in-mvc/

Important Note : In the get action method , since you dont want to display any values by default in the view , even if you dont pass model object it will work in the same way.

Hope the above information was useful

Thanks

Karthik

Answer 3

If you want to use @Html.EditorFor, then you mast pass the model to the view.What does @Html.EditorFor do? It makes the html tag like

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

So if you do not want to pass the model to the view then you need to write the raw html tag like above. It is important to keep the html tag's name property same as the mvc's model property because when you want to post the data to the controller the name property of the html tag will map the mvc model property and get the corresponding value at the Controller method.

At the view(somthing.cshtml) you can use html tags, because .cshtml==.cs+html . So the whole code look like

Controller methods

 public ActionResult FeedBack()
 {
     return View();
 }



[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult FeedBack(FeedBackModel Model)
{
    var feedBack = Model;
     return View();
 }

And the 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>

If you do not want to use submit then you can use ajax.