Model data not being propagated trough form to controller ASP.NET MVC4

Question

I am new to the ASP.NET MVC framework and taking a course to get my self up to speed with it. In doing so I am working on a project to cover all the important content and I have now ran into problem :

I have a page set up to simply display some html content to the client and then if a user wishes to participate, they can click a button to show a Form which they can then use to fill in some required data. The following is the javascript used to show the appropriate tag :

<script>
$(document).ready(function(){
$("#btnOneWayTrip").click(function () {
    $("#TripFromPlaceHoler").show();
});

$("#TripFromPlaceHoler").hide();
});

and in the 'TripFromPlaceHoler' div I simply Have a form placed inside it, the form's markup looks like this :

@using (Html.BeginForm("CreateOneWayTrip","Trips")) {
@Html.ValidationSummary(true)

<fieldset>
    <legend>TestTripClass</legend>

    <div class="editor-label">
        @Html.LabelFor(model => model.TripID)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.TripID)
        @Html.ValidationMessageFor(model => model.TripID)
    </div>

    <div class="editor-label">
        @Html.LabelFor(model => model.StartPoint)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.StartPoint)
        @Html.ValidationMessageFor(model => model.StartPoint)
    </div>

    <div class="editor-label">
        @Html.LabelFor(model => model.EndPoint)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.EndPoint)
        @Html.ValidationMessageFor(model => model.EndPoint)
    </div>

    <div class="editor-label">
        @Html.LabelFor(model => model.StartTime)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.StartTime)
        @Html.ValidationMessageFor(model => model.StartTime)
    </div>

    <p>
        <input type="submit" value="Create" />
    </p>
</fieldset>
}

My Controller looks like this :

public class TripsController : Controller
{
    //
    // GET: /Trip/

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

    [HttpPost]
    public ActionResult CreateOneWayTrip(Models.TestTripClass model)
    {
        //Do something with model here


        return Redirect("~/Trips/Index");
    }
}

Here is my Test Model that is referred to a couple of times :

public class TestTripClass
{
    public string TripID { get; set; }
    public string StartPoint { get; set; }
    public string EndPoint { get; set; }
    public DateTime StartTime { get; set; }

}

When I fill in the form, and press the submit button, only a blank model returns when I debug and inspect the parameter of my 'CreateOneWayTrip' ActionResult, called 'model' (as seen in the above code). Why is this happening? Feel free to share any suggestions since I am new to MVC.

As a overview, here is the code inside my .cshtml file :

@model TransNex.Models.TestTripClass
@{
    ViewBag.Title = "Index";
}

<div class="row">
    <div class="col-lg-6" id="TripFromPlaceHoler">

        @using (Html.BeginForm("CreateOneWayTrip", "Trips"))
        {

            <fieldset>
                <legend>Create One Way Trip</legend>

                <div class="editor-label">
                    @Html.LabelFor(model => model.TripID)
                </div>
                <div class="editor-field">
                    @Html.EditorFor(model => model.TripID)
                </div>

                <div class="editor-label">
                    @Html.LabelFor(model => model.StartPoint)
                </div>
                <div class="editor-field">
                    @Html.EditorFor(model => model.StartPoint)
                </div>

                <div class="editor-label">
                    @Html.LabelFor(model => model.EndPoint)
                </div>
                <div class="editor-field">
                    @Html.EditorFor(model => model.EndPoint)
                </div>

                <div class="editor-label">
                    @Html.LabelFor(model => model.StartTime)
                </div>
                <div class="editor-field">
                    @Html.EditorFor(model => model.StartTime)
                </div>

                <p>
                    <input type="submit" value="Create" />
                </p>
            </fieldset>
        }
    </div>
</div>

<script>
$(document).ready(function(){
    $("#btnOneWayTrip").click(function () {
        $("#TripFromPlaceHoler").show();
    });

    $("#TripFromPlaceHoler").hide();
});

</script>

Answer 1

ASP.NET MVC model binder is not very well in deserializing complex types. You could do this in different ways: one way is to have a hidden element on the form with the name of the mising attribute in the model. the other way is to take one of the approaches available related to complex model bindings, for this take a look at these pages for complex model binding: http://erraticdev.blogspot.ca/2010/12/sending-complex-json-objects-to-aspnet.html How to post an array of complex objects with JSON, jQuery to ASP.NET MVC Controller?

Answer 2

The problem is creating view from a Partial View. If you move your htmls on directly root page(without partial), submit button will fill your model class.

Answer 3

I figured it out. A while back a defined by own Editor Template for string values(by creating the 'EditorTemplates' folder under the 'Shared' folder. The template was called String.cshml and contained the following code :

<input type="text" class="form-control">

When you call the Html.EditorFor helper, by default it creates a tag with all the relevant markup shown here :

<input data-val="true" id="StartPoint" name="StartPoint" type="text" value="" />

However since Override the default string editor, the tag is no longer rendered correctly.

The 'name' property helps MVC to map control values to relevant class properties, so when I defined my own templates, I never gave a means for MVC to know which values belong to which model properties.