我有模型(代码优先)&数据库(SQL Server)设置有多对多关系&播种精细:
地方可以有很多标签(例如餐厅,酒吧,咖啡厅) - 标签可以属于很多地方。
Place
[ScaffoldColumn(false)]
public virtual int PlaceID { get; set; }
[Required(ErrorMessage = "Place Name is required")]
[StringLength(100)]
public virtual string Name { get; set; }
[Required]
public virtual string Address {get;set;}
public virtual string ImageLogo {get;set;}
public virtual string ImageBackground {get;set;}
Tag
public virtual int TagID { get; set; }
[Required]
public virtual string Name { get; set; }
[Required]
public virtual string NamePlural { get; set; }
public virtual ICollection<Place> Places { get; set; }
EF Migrations已生成一个包含TagID&amp;的联结表。 PlaceID和我可以在Seed方法中添加多个标签的地方。大约有50个标签 - 都是种子。
我想要做的是创建一个创建视图表单 - 允许用户从所有标签中进行选择 - 可能带有复选框(打开备选方案),一些异步文本框等?然后将其与模型一起保存。
这些数据将由管理员输入 - 输入速度最重要(不一定是100%白痴证明)。
我还需要能够编辑这个地方 - 让这些标签适当地显示出来以便删除或添加其他标签。
处理删除地点的最佳方法 - 首先删除联结表中的记录?
上述所有方法的最佳做法是什么?
感谢。
答案 0 :(得分:1)
我认为最好和最简单的方法是,您可以创建Place
视图,并在其底部放置fieldset
为其分配标记。
对于fieldset,您应该选择两个部分视图:一个用于创建,另一个用于编辑。创建的部分视图应该是这样的:
@model myPrj.Models.PlaceTagInfo
@{
var index = Guid.NewGuid().ToString();
string ln = (string)ViewBag.ListName;
string hn = ln + ".Index";
}
<tr>
<td>
<input type="hidden" name="@hn" value="@index" />
@Html.LabelFor(model => model.TagID)
</td>
<td>
@Html.DropDownList(ln + "[" + index + "].TagID",
new SelectList(new myPrj.Models.DbContext().Tags, "ID", "TagName"))
</td>
<td>
<input type="button" onclick="$(this).parent().parent().remove();"
value="Remove" />
</td>
</tr>
通过在创建场所视图中调用此局部视图ajaxly,您可以为每个标记渲染一些元素。每行元素都包含一个标签,一个包含标签的DropDownList,以及一个删除按钮,只需删除创建的元素。
在创建位置视图中,您有一个裸表,其中包含您通过局部视图创建的元素:
<fieldset>
<legend>Place Tags</legend>
@Html.ValidationMessageFor(model => model.Tags)</label>
<table id="tblTags"></table>
<input type="button" id="btnAddTag" value="Add new tag"/>
<img id="imgSpinnerl" src="~/Images/indicator-blue.gif" style="display:none;" />
</fieldset>
并且您有以下脚本为每个标记创建一行元素:
$(document).ready(function () {
$("#btnAddTag").click(function () {
$.ajax({
url: "/Controller/GetPlaceTagRow/Tags",
type: 'GET', dataType: 'json',
success: function (data, textStatus, jqXHR) {
$("#tblTags").append(jqXHR.responseText);
},
error: function (jqXHR, textStatus, errorThrown) {
$("#tblTags").append(jqXHR.responseText);
},
beforeSend: function () { $("#imgSpinnerl").show(); },
complete: function () { $("#imgSpinnerl").hide(); }
});
});
});
操作方法GetPlaceTagRow
如下所示:
public PartialViewResult GetPlaceTagRow(string id = "")
{
ViewBag.ListName = id;
return PartialView("_CoursePostPartial");
}
你完成了创建...你的问题的整个解决方案有很多代码用于视图,部分视图,控制器,ajax调用和模型绑定。我试图向你展示道路,因为我真的无法在这个答案中发布所有这些内容。
希望这个答案有用并引导您。