1

ASP.Net 4、MVC 3、Razor、C＃でブログの作成に取り組んでいます。2つの別々のテーブルがあります。実際のブログ投稿の場合は1、カテゴリの場合は関係テーブル。カテゴリはドロップダウンとして表示されます。ユーザーがフォームにすでに入力した内容を失わないように、Ajaxを使用して新しいカテゴリを追加する機能を追加したいと思います。これを達成するための最良の方法は何でしょうか？これが私が今持っているものです。

コントローラコード

public ActionResult Create()
    {
        ViewBag.category_id = new SelectList(_db.Categories, "id", "category_name");
        return 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>

よろしくお願いします。私のレイアウトページには、使用したいjqueryが含まれています。

4

2 に答える 2

2

次のようなカテゴリのリストを返す別のコントローラメソッドを追加します。

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

これにより、現在選択されているアイテムは保存されませんが、リストをクリアする前にいつでも確認して、後でリセットすることができます。

于 2012-06-19T23:16:31.377 に答える
0

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
}

これは多かれ少なかれ私の頭のてっぺんから外れているので、私が何かの部分を強化したかどうか私に知らせてください。

于 2012-06-19T23:20:02.490 に答える