ASP.NET MVC AJAX Update select list items when model is added to separate table

Question

The current situation: For the essence of this problem, I have two database tables/models. I'm using an AJAX form to update the displayed model data in list form from each table when a new model is created and added. In effect, the page never has to reload to display any changes to the lists.

I'm displaying the create form statically for each model above the list of items. This works fine for a model that has no foreign key dependencies. However, one of my models also has a select list in the create form that is tied to the other model list on the page.

The problem: When I add a record for the simpler model, the select list for the create form of the model with the foreign key dependency does not update to include the changes. I know why it doesn't update and I think that I need to use AJAX to either recreate the create form in-place entirely or update just the select list.

Is there a way to use the AJAX form to not only update the list of the model that I'm adding an item to but also update the div that contains the create form at the same time?

I believe I have included all the relevant code to hopefully give a clearer picture of what I'm asking

Sample Create form for the simpler model:

@using (Ajax.BeginForm("_CreateCategory", new AjaxOptions()
{
    InsertionMode = InsertionMode.Replace,
    UpdateTargetId = "list-categories"
}))
{
    @Html.AntiForgeryToken()
    <div class="form-horizontal">
        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        <div class="form-group">
            <label class="control-label col-md-2">Name: </label>
            <div class="col-md-5">
                @Html.EditorFor(model => model.Name, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Name, "", new { @class = "text-danger" })
            </div>
            <div class="col-md-5">
                <input type="submit" value="Add" class="btn btn-success" />
            </div>
        </div>
    </div>
}

Sample model with foreign key dependency

@using (Ajax.BeginForm("_CreateType", new AjaxOptions()
{
    InsertionMode = InsertionMode.Replace,
    UpdateTargetId = "list-types"
}))
{
    @Html.AntiForgeryToken()

    <div class="form-horizontal">
        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        <div class="form-group">
            <label class="control-label col-md-2">Name: </label>
            <div class="col-md-offset-1 col-md-6">
                @Html.EditorFor(model => model.Name, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Name, "", new { @class = "text-danger" })
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-md-3">Category: </label>
            <div class="col-md-6">
                @Html.DropDownList("CategoryID", null, htmlAttributes: new { @class = "form-control" })
                @Html.ValidationMessageFor(model => model.CategoryID, "", new { @class = "text-danger" })
            </div>
            <div class="col-md-3">
                <input type="submit" value="Add" class="btn btn-success" />
            </div>
        </div>
    </div>
}

Sample list partial view for the model with the foreign key

    <div id="list-types">
        <table class="table">
            <tr>
                <th>
                    @Html.DisplayNameFor(model => model.Name)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.Category.Name)
                </th>

                <th></th>
            </tr>

        @foreach (var item in Model) {
            <tr>
                <td>
                    @Html.DisplayFor(modelItem => item.Name)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Category.Name)
                </td>

                <td>
                    @using (Ajax.BeginForm("DeleteType", new { id = item.ID }, new AjaxOptions()
                    {
                        InsertionMode = InsertionMode.Replace,
                        UpdateTargetId = "list-types"
                    }))
                    {
                        @Html.AntiForgeryToken()
                        <button type="submit" class="no-default">
                            <span class="glyphicon glyphicon-remove"></span>
                        </button>
                    }
                </td>
            </tr>
        }

        </table>
    </div>

Controller action for adding simpler model

    [HttpPost]
    [ValidateAntiForgeryToken]
    public ActionResult _CreateCategory([Bind(Include = "ID, Name")] Category category)
    {
        if (ModelState.IsValid)
        {
            db.Categories.Add(category);
            db.SaveChanges();
        }
        var categories = db.Categories;
        return PartialView("_ListCategories", categories.ToList());
    }

Sample Index page code that displays the lists and create forms

<div class="col-lg-4 block">
    <h3>Categories</h3>
    @Html.Action("_CreateCategory")
    @Html.Action("_ListCategories")
</div>
<div class="col-lg-4 block">
    <h3>Types</h3>
    @Html.Action("_CreateType")
    @Html.Action("_ListTypes")
</div>

Answer 1

You wont be able to do this easily using the Ajax.BeginForm() method, and in any case, its unnecessary extra overhead to be returning the whole table again when your only adding one row to it.

Replace Ajax.BeginForm() with just <form id="createcategory"> and use $.ajax() to submit the form to create a new Category, and return its ID. In the success callback, you can then add a new row to the table and add a new <option> element to the <select> in the 2nd form

var url = '@Url.Action("_CreateCategory")'
var categorySelect = $('#CategoryID');
$('#createcategory').submit(function() {
    if (!$(this).valid()) {
        return; // exit and display validation errors
    }
    var category = $(this).find('input[name="Name"]').val(); // see notes below
    var formdata = $(this).serialize();
    $.post(url, formdata, function(result) {
        if (result.success) {
            // Add option
            categorySelect.append($('<option></option>').val(result.id).text(category));
            // Add new table row
            .... // You have not shown the view for _ListCategories but it might be somethng like
            var cell = $('<td></td>').text(category);
            var row = $('<tr></tr>').append(cell);
            $('#yourTableID').append(row);
        } else {
            .... // check for errors, update the associated placeholder generated by ValidationMessageFor()
        }
    }).fail(function (result) {
        // Oops something went wrong
    });
}

$('#createtype').submit(function() {
    // similar to above, but just add new table row based on the values of the form controls
});

and the controller method would be

[HttpPost]
[ValidateAntiForgeryToken]
public JsonResult _CreateCategory(Category category)
{
    if (ModelState.IsValid)
    {
        db.Categories.Add(category);
        db.SaveChanges();
        // Get the new ID
        int id = category.ID;
        return Json(new { success = true, id = id });
    }
    // Get the validation errors
    var errors = ModelState.Keys.Where(k => ModelState[k].Errors.Count > 0).Select(k => new { propertyName = k, errorMessage = ModelState[k].Errors[0].ErrorMessage });
    return Json(new { success = false, errors = errors });
});

A few side notes:

1. Your view includes 2 form controls for Name so your generating duplicate id attributes which is invalid html. Consider removing the id attribute (using new { id = "" } or giving one of them a different id attribute.
2. You do not need the [Bind] attribute, and in any case you not sending a value for ID so that should be excluded if your do keep it.
3. Your editing data so you should be using a view model, and in the case of the 2nd model, it will contain properties int SelectedCategory and IEnumerable<SelectListItem> CategoryList and use DropDownListFor(m => m.SelectedCategory, Model.CategoryList, "Please select", new { ... }) in the view
4. Use @Html.LabelFor(m => m.yourProperty) to correctly generate your <label> elements (a <label> is an accessibility element and clicking on it sets focus to the associated control which does not happen with your current code)