FormCollection parameter is empty while using @Ajax.BeginForm and html5 controls

Question

I'm developing ASP.NET MVC5 project with boostrap, jquery, jquery UI. Submit is working fine but FormCollection in create Action is arriving empty in HomeController. I don't know what I'm doing wrong or is missing. PLease need help. Below snippet code.

Index.cshtml:

<div class="modal fade" id="modal" tabindex="-1" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">Empleado</h4>
            </div>
            <div class="modal-body">
                @using (Ajax.BeginForm("Create", "Home", new AjaxOptions() { HttpMethod = "post" }, new { id = "dialog", name = "dialog" })) 
                {
                    <div class="panel">
                        <div class="panel-body">
                            <div class="form-group">
                                <label class="control-label">Nombres</label>
                                <input type="text" class="form-control" id="modalNombres" placeholder="Nombres" />
                            </div>
                            <div class="form-group">
                                <label class="control-label">Apellidos</label>
                                <input type="text" class="form-control" id="modalApellidos" placeholder="Apellidos" />
                            </div>
                            <div class="form-group">
                                <label class="control-label">Fecha de Nacimiento</label>
                                <input type="text" class="form-control" id="modalFechaNacimiento" placeholder="Fecha Nacimiento" />
                            </div>
                            <div class="form-group">
                                <label class="control-label">Tipo Documento</label>
                                <select class="form-control" id="modalTipoDocumento">
                                    <option class="placeholder" selected disabled value="">--- Seleccione ---</option>
                                    @foreach (var item in ViewBag.TiposDocumento)
                                    {
                                        <option value="@item.Id">@item.Descripcion</option>
                                    }
                                </select>
                            </div>
                            <div class="form-group">
                                <label class="control-label">Número de Documento</label>
                                <input type="text" class="form-control" id="modalNumeroDocumento" placeholder="Número Documento" />
                            </div>
                        </div>
                        <div class="panel-footer">
                            <button type="button" role="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
                            <button type="submit" role="button" class="btn btn-primary" id="btnGrabar">Grabar</button>
                        </div>
                    </div>
                }
            </div>
            <div class="modal-footer">

            </div>
        </div>
    </div>
</div>

HomeController is:

[HttpPost]
public ActionResult Create(FormCollection collection)
{
    try
    {
        string nombres = collection["modalNombres"];
        return RedirectToAction("Index");
    }
    catch
    {
        return View();
    }
}

score 2 · Accepted Answer · 2015-09-03T02:19:23.403

None of you <input> elements have name attributes so there is nothing sent to the server. Change

<input type="text" class="form-control" id="modalNombres" placeholder="Nombres" />

to

<input type="text" class="form-control" name="modalNombres" placeholder="Nombres" />

There is no need for id attributes unless you using javascript/jquery to refer to them.

However, I very strongly recommend you go to the MVC site and work through some basic tutorials and learn how to generate a view in MVC. You should have a model, use the strongly typed html helpers to bind to the properties of your model, and the POST method should have a parameter for the model so it is bound (you should never use FormCollection in MVC)

Note also, you using Ajax.BeginForm() which uses ajax to post the form values so return RedirectToAction("Index"); in your POST method is pointless. Ajax calls stay on the same page, they do not redirect.

FormCollection parameter is empty while using @Ajax.BeginForm and html5 controls

1 Answers1