在MVC 5客户端添加项目选择列表ASP

Question

我想了解更多关于MVC 5的内容，所以我正在为自己编写一个博客网站以了解更多信息。

我已经设置了标签的选择列表，并希望能够从创建博客条目页面添加新标签，而不必记住在创建新帖子之前设置标签。我正在考虑显示引导模式窗口的“添加标签”按钮，用户可以在其中添加新标签。

这里是我的控制器操作：

public ViewResult CreateBlogPost() 
{ 
    CreateEditBlogViewModel viewModel = new CreateEditBlogViewModel(); 
    viewModel.BlogPost = new Core.BlogPost(); 

    viewModel.BlogPost.ShortBody = "<p>Something short and sweet to describe the post</p>"; 
    viewModel.BlogPost.Body = "<p>Enter something blog worthy here...</p>"; 

    viewModel.Tags = new SelectList(_blogRepo.BlogTags(), "Id", "Name"); 
    viewModel.Categories = new SelectList(_blogRepo.BlogCategories(), "Id", "Name"); 

    return View(viewModel); 
} 

这里是在视图中的HTML：

<div class="row"> 
    <div class="form-group"> 
     @Html.LabelFor(m => m.BlogPost.Tags, new { @class = "col-md-2 control-label" }) 
     <div class="col-md-10"> 
     @Html.ListBoxFor(m => m.SelectedTags, Model.Tags, new { @class = "form-control chosen-select", @data_placeholder = "Start typing to see a list of tags" }) 
     </div> 
    </div> 
</div> 

<div class="row"> 
    <!-- Button trigger modal --> 
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#tagModal"> 
      Add Tag 
    </button> 
</div> 

这里是我的模态窗口局部视图：

@using (Html.BeginForm("SaveTag", "Home", FormMethod.Post, new { id = "tag-form" })) 
{ 
    @Html.AntiForgeryToken() 

    <!-- Modal --> 
    <div class="modal fade" id="tagModal" tabindex="-1" role="dialog" aria-labelledby="tagModalLabel"> 
     <div class="modal-dialog" role="document"> 
      <div class="modal-content"> 
       <div class="modal-header"> 
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
        <h4 class="modal-title" id="tagModalLabel">Enter a name for a new tag</h4> 
       </div> 
       <div class="modal-body"> 
        <input type="text" id="Name" placeholder="Enter a new tag name" /> 
       </div> 
       <div class="modal-footer"> 
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
        <button type="submit" class="btn btn-primary">Save changes</button> 
       </div> 
      </div> 
     </div> 
    </div> 

} 

是否有可能在客户端添加标签，将其保存到数据库中，然后将其添加到我的标签选择列表机智豪特刷新页面？

PS：仅供参考我使用从here选择的多选。

@section scripts { 
    <script type="text/javascript" src="~/Scripts/chosen.jquery.min.js"></script> 
    <script type="text/javascript"> 
     $(".chosen-select").chosen() 
    </script> 
} 

编辑：我已经更新了所有，使视图给用户的模式窗口中输入新的标签名称的代码的问题。我只是不确定如何发布不离开页面导航，所以我猜测需要某种类型的Ajax文章。然后如何处理从该帖子返回的数据。那么如何将新的持久记录添加到选择列表中？

我知道标签没有传递给控制器​​方法，因为它没有绑定到任何类型的模型，而是因为我在父视图上使用视图模型，我不知道我会如何处理这里也是。

Answer 1

为了在您需要发布新的标签Name使用AJAX，到保存BlogTag并返回其新ID值的控制方法的观点动态地添加新BlogTag。你的控制器的方法会是这样的

[HttpPost] 
public JsonResult CreateTag(string name) 
{ 
    BlogTag tag = new BlogTag(){ Name = name }; 
    db.BlogTags.Add(tag); 
    db.SaveChanges(); 
    return Json(tag.ID); 
    // If the above code could result in an error/exception, catch it and return 
    // return Json(null); 
} 

然后在视图中，处理对话框提交按钮后的值，并更新标签列表

var url = '@Url.Action("CreateTag")'; 
var tagList = $('#SelectedTags'); 
$('#tag-form').submit(function() { 
    var tagName = $('#Name').val(); 
    $.post(url, { name: tagName }, function(id) { 
    if (id) { 
     // add the new tag to the list box 
     tagList.append($('<option></option>').val(id).text($('#Name').val())); 
     // trigger the chosen update 
     tagList.trigger("chosen:updated"); 
    } else { 
     // Oops - display an error message? 
    } 
    }).fail(function (result) { 
    // Oops - display an error message? 
    }); 
    return false; // cancel the default submit 
}); 

附注：我会建议你创建一个查看模型BlogTagVM（包含具有验证属性的Name的属性）以及生成对话框html的关联分部视图（如_AddBlogTag.cshtml），以便在主视图中可以使用@Html.Partial("_AddBlogTag", new BlogTagVM())，这将允许您使用强类型html助手，并包括de客户端验证。

另请注意，嵌套的<form>元素无效，因此请确保对话框的html位于视图的主<form>标记之外。

Answer 2

我正在做类似的事情，我想这可能会有帮助。在我的情况下，我正在将一个列表中的值“移动”到另一个列表中（从“可用”到“已用”），然后保存“已用”列表的值。无论如何，在控制器中，“used”列表显示为一个字符串数组。这里是我的代码：

 public ActionResult PinchHit(FormCollection form, LineupViewModel lvm, String[] UsedPlayers) 
     { 
[Snip] 
      if (ModelState.IsValid && lineupResults.IsValid) 
      { 
[Snip] 
       foreach (String usedID in UsedPlayers) 
       { 
        gameState.HomeUsedPlayersIDs.Add(Convert.ToInt32(usedID)); 
       } 
       uow.Repository<GameState>().Update(gameState); 
       uow.SaveChanges(); 
       return RedirectToAction("Index", "GameSummary"); 
      } 
[Snip] 
      return View(lvm2); 
     } 

希望有所帮助。

每我的评论：

这里是我使用无需重新加载页面，从数据库中检索数据的AJAX回拨机制，你可以用它来保存数据到数据库，而不是。

<script type="text/javascript"> 
     function getPositions(id, control) { 
      $.ajax({ 
       url: "@Url.Action("GetPositions", "Lineup")", 
       data: 
       { 
        id: id 
       }, 
       dataType: "json", 
       type: "POST", 
       error: function() { 
        alert("An error occurred."); 
       }, 
       success: function (data) { 
        $(control).html(""); 
        $.each(data, function (i, item) { 
         $(control).append("<option value=\"" + item.Value + "\">" + item.Text + "</option>"); 
        } 
        ); 
       } 
      }); 
     } 
</script> 

然后控制器：

[HttpPost] 
    public ActionResult GetPositions(int id) 
    { 
     Player player = uow.Repository<Player>().GetById(id); 
     if (player == null) 
     { 
      return (null); 
     } 
     List<SelectListItem> positionList = new SelectList(player.Positions, "ID", "ShortName").ToList(); 
     return Json(positionList); 
    } 

漂亮的标准的东西真的。