Model binding is Failing for Ajax.BeginForm in MVC 5

Question

My View is scaffolding-generated for listing. The model for list is:

public class LogsViewModel
{
        public string Category { get; set; }
        public string ClientIP { get; set; }
        public string StartDate { get; set; }
        public string EndDate { get; set; }
        public string Message { get; set; }
}

To filter the whole list, I am providing a bootstrap-modal form which has multiple input elements such as: category, clientip, date, and message. This modal's form uses Ajax.BeginForm in the following manner:

@using (Ajax.BeginForm(
                       new AjaxOptions
                       {
                       HttpMethod = "get",
                       InsertionMode = InsertionMode.Replace,
                       UpdateTargetId = "results"
                       }))    
                {
                    <fieldset>
                    <div class="form-group">
                        <label for="recipient-name" class="control-label">Category:</label>
                        <select class="form-control" id="Category">
                            <option>Information</option>
                            <option>General Error</option>
                        </select>
                        @*<input type="text" class="form-control" id="category">*@
                    </div>
                    <div class="form-group">
                        <label for="recipient-name" class="control-label">IP:</label>
                        <input type="text" class="form-control" id="ClientIP">
                    </div>
                    <div class="form-group" id="startDTPicker" style="position:relative">
                        <label for="recipient-name" class="control-label" id="startDate">Start Date:</label>
                        <input type="text" class="form-control" id="StartDate">
                    </div>
                    <div class="form-group" id="endDTPicker" style="position:relative">
                        <label for="recipient-name" class="control-label" id="endDate">End Date:</label>
                        <input type="text" class="form-control" id="EndDate">

                    </div>
                    <div class="form-group" id="startDTPicker">
                        <label for="recipient-name" class="control-label">Message:</label>
                        <input type="text" class="form-control" id="Message">
                    </div>


                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        <input type="submit" class="btn btn-primary" value="Show Results" />
                    </div>
                </fieldset>
           }

Then in the controller, I am trying to get these parameters (category=...). I have declared the ActionMethod as:

public ActionResult Index(LogsViewModel viewModel)
{
    //all the properties are null when the Ajax request invokes this method
}

What is causing the problem and what is the best way to deal with?

Answer 1

As i can see in your View code you don't have name attribute on all input tags. But you need them and they should match your model property names becouse they are using like keys when you post your values to server.

I mean you should change this:

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

To this for all tags:

<input type="text" name="ClientIP" class="form-control" id="ClientIP">