Добавить категорию Динамически ASP.Net 4 MVC3 C#

Question

Я работаю над созданием блога с ASP.Net 4, MVC 3, Razor и C#. Есть 2 отдельных стола. 1 для фактического сообщения в блоге и таблицы отношений для категорий. Категории отображаются в раскрывающемся меню. Я хочу добавить возможность добавления новой категории с помощью Ajax, чтобы пользователь не потерял то, что уже ввел в форму. Что было бы лучшим способом добиться этого? Вот что я имею прямо сейчас.

Controller Код

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

Razor Посмотреть

@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> 

Спасибо за помощь в заранее. Моя страница макета включает jquery, который я бы предпочел использовать.

Answer 1

Добавить другой метод Controler вернуть вам список категорий, что-то вроде:

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

Тогда на стороне клиента, использовать AJAX, чтобы получить свои категории и привязать их к своему падению вниз, что-то вроде:

$.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>'); 
     } 
    } 
}); 

Это не будет сохранять текущий выбранный элемент, но вы всегда можете проверить это, прежде чем очищать список, и затем сбросить его.

Answer 2

Создание категории отдельно через AJAX - это не единственный вариант. Вы могли бы иметь модель представления, как это:

public class CategoryViewModel 
{ 
    public string name { get; set; } 
    public int id { get; set; } 
} 

public class CreateNewsViewModel 
{ 
    public string news_title { get; set; } 
    public string news_content { get; set; } 
    public string news_teaser { get; set; } 
    public string CategoryViewModel category { get; set; } 
} 

изменить вид на поле категории:

<div class="editor-label"> 
    @Html.LabelFor(model => model.category, "Category") 
</div> 
<div class="editor-field"> 
    @Html.DropDownListFor(model => model.category.id, ViewBag.category_id) 
    @Html.EditorFor(model => model.category.name) <!-- only show when creating a new category --> 
    @Html.ValidationMessageFor(model => model.category) 
</div> 

Тогда ваши действия будут выглядеть примерно так:

[HttpPost, ActionName("Create")] 
public ActionResult DoCreate(CreateNewsViewModel model) 
{ 
    if (ModelState.IsValid) 
    { 
     if (model.category.id == 0) 
     { 
      // create your new category using model.category.name 
     } 

     // create an entity from the model and save to your database 

     return RedirectToAction("Index", "News"); // do whatever you wish when you're done 
    } 

    return View("Create", model); // show Create view again if validation failed 
} 

Это более или менее от верхней части головы, так что дайте мне знать, если я заблокировал любые части.