c# - EditorFor Field for List object that maps to a different model? -

i have fieldset in view users can create post @ same time have list of tags can selected @ creation time , associated in many many relationship in ef post, creates relationship between post , tag in posttagmap upon saving post. want add in field in view user can "create" tag (type in name) aswell selecting tags cant figure out last issue in jquery make work.

view:

@model myblogger.models.post @using(html.beginform()) {   // controls post   ....   <div id="tags">     (int = 0; < tag.count; i++)     {       var id = string.format("tag{0}", tag[i].id);       var ischecked = tag[i].isassigned ? "checked" : null;       <div class="tag">         <input id="@id" type="checkbox" name="selectedtags" value="@tag[i].id" @ischecked />         <label for="@id">@tag[i].name</label>       </div>     }   </div>   <button id="addtag" type="button">add new tag</button>   <div id="dialog" style="display:none">   @html.action("createtag") } 

post controller:

// returns partial view form create new tag [childactiononly] public actionresult createtag() {   tag model = new tag();   return partialview(model); }  [httppost] public actionresult createtag(tag model) {   // save tag   db.tags.add(model);   db.savechanges();   return json(new { id = model.id, name = model.name }); } 

partial view:

@model myblogger.models.tag @using(html.beginform()) {   // controls tag   ....   <button id="createtag" type="button">create</button> } 

postcontroller

[childactiononly] public actionresult createtag() {   tag model = new tag();   return partialview(model); }  [httppost] public actionresult createtag(tag model) {   // save tag   db.tags.add(model);   db.savechanges();   return json(new { id = model.id, name = model.name }); } 

script

var dialog = $('#dialog'); var tags = $('#tags'); var url = '@url.action("createtag")'; $('#addtag').click(function() {   dialog.show(); }); $('#createtag').click(function() {   var form = $(this).closest('form');   $.post(url, form.serialize(), function(data) {     if(data) {       var id = tags.children('.tag').length;       var div = $('<div></div>').addclass('tag');       .... stuck here       div.append($('<label></label>').attr('for', id).text(data.name));       tags.append(div);       form.get(0).reset(); // reset controls defaults       dialog.hide(); // hide dialog     } 

create additional methods in controller creating new tag

postcontroller

// returns partial view form create new tag [childactiononly] public actionresult createtag() {   tag model = new tag();   return partialview(model); }  [httppost] public actionresult createtag(tag model) {   // save tag   db.tags.add(model);   db.savechanges();   return json(new { id = model.id, name = model.name }); } 

partial view

@model myblogger.models.tag @using(html.beginform()) {   // controls tag   ....   <button id="createtag" type="button">create</button> } 

main view

@model myblogger.models.post @using(html.beginform()) {   // controls post   ....   <div id="tags">     // not sure trying existing code,     (int = 0; < tag.count; i++)     {       var id = string.format("tag{0}", tag[i].id);       var ischecked = tag[i].isassigned ? "checked" : null;       <div class="tag">         <input id="@id" type="checkbox" name="selectedtags" value="@tag[i].id" @ischecked />         <label for="@id">@tag[i].name</label>       </div>     }   </div>   <button id="addtag" type="button">add new tag</button>   .... } <div id="dialog" style="display:none">   @html.action("createtag") </div> // outside main form tags! 

script

var dialog = $('#dialog'); var tags = $('#tags'); var url = '@url.action("createtag")'; $('#addtag').click(function() {   dialog.show(); }); $('#createtag').click(function() {   var form = $(this).closest('form');   $.post(url, form.serialize(), function(data) {     if(data) {       var id = tags.children('.tag').length;       var div = $('<div></div>').addclass('tag');       div.append($('<input/>').val(data.id).attr({ type: 'checkbox', name: 'selectedtags', id: id }).prop('checked', true));       div.append($('<label></label>').attr('for', id).text(data.name));       tags.append(div);       form.get(0).reset(); // reset controls defaults       dialog.hide(); // hide dialog     }   }); }); 

refer this fiddle example of how might style dialog , tag checkboxes , labels

side notes:

1. i recommend start using view models represent properties need display/edit in view.
2. tables tabular data, not layout.