Question

I am working on creating a blog with ASP.Net 4, MVC 3, Razor and C#.
There are 2 seperate tables. 1 for the actual blog post and a relationship table for categories.
The categories displays as a dropdown.
I want to add the ability to add a new category using Ajax so the user does not lose what they have already entered into the form.
What would be the best way to accomplish this?
Here is what I have right now.

Controller Code

public ActionResult Create()
    {
        ViewBag.category_id = new SelectList(_db.Categories, "id", "category_name");
        return View();
    } 

Razor View

@model NPP.Models.News

@{
    ViewBag.Title = "Create News Item";
}

<h2>Create News Item</h2>

<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>

@using (Html.BeginForm()) {
@Html.ValidationSummary(true)
<fieldset>
    <legend>News</legend>

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

    <div class="editor-label">
        @Html.LabelFor(model => model.news_content, "Content")
    </div>
    <div class="editor-field">
        @Html.TextAreaFor(model => model.news_content)
        @Html.ValidationMessageFor(model => model.news_content)
    </div>

    <div class="editor-label">
        @Html.LabelFor(model => model.news_teaser, "Teaser (optional)")
    </div>
    <div class="editor-field">
        @Html.TextAreaFor(model => model.news_teaser)
        @Html.ValidationMessageFor(model => model.news_teaser)
    </div>

    <div class="editor-label">
        @Html.LabelFor(model => model.category_id, "Category")
    </div>
    <div class="editor-field">
        @Html.DropDownList("category_id", String.Empty)
        @Html.ValidationMessageFor(model => model.category_id)
    </div>

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

<div>
    @Html.ActionLink("Back to List", "Index")
</div>

Thanks for any help in advance. My layout page includes jquery which I would prefer to use.

Answer 1

Add another controler method to return you a list of categories, something like:

public JsonResult Categories()
{
  return Json(DB.GetCategorys(), JsonRequestBehavior.AllowGet);
}

Then on the client side, use ajax to get your categories and bind them to your drop down, something like:

$.ajax({
  url: 'http://myserver/myapp/mycontroller/Categories',
  success: function(data) {
       $('#dropCategorys').html('');
       $.each(data, function(i, e) {
           $('#dropCategorys').append('<option value="' + 
              e.category_id + '">' + e.category_name + '</option>');
       }
  }
});

This won’t save your current selected item, but you can always check that before clearing the list, and reset it afterwards.