Question

Please be patient with me while I try to explain my issue.

I’m Posting My Form Back to Controller and updating the model and passing it back into the view. This works correctly if I use a submit button, but not if I use a non-submit button and try to post back with javascript.

I’ve tried looking for this issue, but I’m not sure how to word it so I can get any results close to it.

Basically

1. CORRECT – when I click the AddDetail button which is input type=”submit”, my controller gets called and the model gets updated and passed back to the view and the elements are correctly displayed on the page.

2. INCORRECT – when I click the AddDetail1 button which is input type=”button”, my javascript is called when the button is clicked, the controller method is called, the FormCollection and Model is passed into the controller correctly. The Model gets updated and passed back to the view, but none of the elements are being displayed on the page.

I’ve stepped through this code 100 times and everything I see is exactly the same right down to the elements being set in the view. The only difference is the Submit Button will render the controls, but the Other Button won’t render anything. I’ve viewed the html source after hitting each button and the Submit Button shows the controls, but there are no Controls when I click the Other Button.

I’ve even added an @Model.cases.count on the page – Initially it shows 0 which is correct, but after post back it shows 1 for the submit button and when I step through the code for the other button, it shows 1, but when the page is finally finished and everything is rendered, it shows 0 even though it was 1 when I was stepping through the code.

Very Frustrating

Any Ideas would be greatly appreciated.

Here’s my simplified view

@model CASA.ViewModels.CaseViewModel

<script type="text/javascript">
    $(function () {
        $("#AddDetail1").click(function () {
            var form = $(':input');
            //var action = form.attr("action");
            var serializedForm = form.serialize();
            var url = '@Url.Action("CreateCase")';
            //$.post(url, serializedForm);
            $.ajax({
                url: url,
                data: serializedForm,
                type: 'POST',
                success: function (response) {
                    alert(response);
                    // process the results from the controller action

                    //  window.location.href = response.Url;
                }

            });
        });
    });
@using (Html.BeginForm())
{
    @Html.ValidationSummary(true)

    @if (Model.cases != null && Model.cases.Count > 0)
        {
            for (int i = 0; i < Model.cases.Count; i++)
            {
                <tr>
                    <td>
                        @Html.TextBoxFor(m => m.cases[i].CaseNumber, new { @class = "textbox" })
                    </td>
                    <td>
                        @Html.TextBoxFor(m => m.cases[i].FirstName, new { @class = "nameTextbox" })
                    </td>
                    <td>
                        @Html.TextBoxFor(m => m.cases[i].LastName, new { @class = "nameTextbox" })
                    </td>
                    <td>
                        @Html.EditorFor(m => m.cases[i].DOB)
                    </td>
                    <td>
                        @Html.RadioButtonListFor(m => m.cases[i].Sex, Model.radiobuttons.RadioButtonListItems)
                    </td>
                </tr>
            }
        }

<input type="submit" value="+" id="AddDetail" class="button" />
<input type="button" value="+" id="AddDetail1" class="button" />
}

Here’s My Controller:

[HttpPost]
        public ActionResult CreateCase(FormCollection collection, CaseViewModel model)
        {
            if (ModelState.IsValid)
            {
                model.cases.Add(new CASA_Cases
                {
                    CaseNumber = collection["CaseNumber"],
                    FirstName = collection["FirstName"],
                    LastName = collection["LastName"],
                    DOB = Convert.ToDateTime(collection["DOB"]),
                    Sex = collection["Sex"]
                });

                UpdateModel(model);
                if (submit.Count() > 0)
                {
                    model.cases.ForEach(item =>
                        {
                            if (model.group.ID == null)
                            {
                                model.group.ID = Guid.NewGuid();
                                model.group.UserID = Utilities.Utilities.GetUserID;
                            }

                            item.CASA_CaseGroups_ID = model.group.ID;
                        });
                }
            }
            return View(model);
        }

Answer 1

Thanks again for all the suggestions.

Here’s what solved my issue.

I Made the view above a PartialView and changed the jQuery to

<script type="text/javascript">
    $(function () {
        $("#AddDetail1").click(function () {
            var form = $(':input');
            var serializedForm = form.serialize();
            var url = '@Url.Action("CreatePartialView")';
            $.ajax({
                url: url,
                data: serializedForm,
                type: 'POST',
                success: function (response) {
                    $("#result").html(response);
                }
            });
        });
    });
</script>

Next I created an actual view to hold the PartView as follows

<div id="result">
@model CASA.ViewModels.CaseViewModel

@using (Ajax.BeginForm(new AjaxOptions { UpdateTargetId = "result" }))
{
        @Html.Partial("CasePartialView", Model)
}
</div>

Finally, I modified the Controller to Return the PartialView as Follows

[HttpPost]
        public PartialViewResult CreatePartialView(FormCollection collection, CaseViewModel model)
        {
            //Determine if submit button was clicked
            IEnumerable<string> submit = collection.AllKeys.Where(n => n.ToLower().Equals("submit"));

            model.cases.Add(new CASA_Cases
            {
                CaseNumber = collection["CaseNumber"],
                FirstName = collection["FirstName"],
                LastName = collection["LastName"],
                DOB = Convert.ToDateTime(collection["DOB"]),
                Sex = collection["Sex"]
            });


            return PartialView("CasePartialView",model);
        }

Thanks again for all the suggestions