jquery - Dynamically add item to collection -
i have view adding element collection: adds me element html, when call actionresult model.tagmodelsis still empty(at start empty).
<div id="tags_div"> <label id="add_tag">hello</label> @foreach (var item in model.tagmodels) { <div class="editor-field"> @html.editorfor(model => item.name) @html.validationmessagefor(model => item.name) </div> }</div> <script type="text/javascript"> $(document).ready(function () { var $newdiv1 = $('<div class="ui-button-text"><input class="text-box single-line" id="item_name" name="item.name" type="text" value="b" /><span class="field-validation-valid" data-valmsg-for="item.name" data-valmsg-replace="true"></span></div>'); $("#add_tag").live("click", function () { $(this).append($newdiv1); return false; }); }); </script> here viewmodel:
public class questiontagviewmodel { public questionmodel questionmodel { get; set; } //private list<tagmodel> _tagmodels=new list<tagmodel>(){new tagmodel(){name = "a"},new tagmodel(){name = "b"}}; private list<tagmodel> _tagmodels = new list<tagmodel>(); public list<tagmodel> tagmodels { { return _tagmodels; } set { _tagmodels = value; } } } why there no update on model? when change others properties static elements ok
edit mhollis:
thanks anton reply :)
now have
<script type="text/javascript"> $(document).ready(function () { $("#additem").click(function () { $.ajax({ url: this.href, cache: false, success: function (html) { $("#tags_div").append(html); } }); return false; }); }); </script> and tags_div:
<div id="tags_div"> <label id="add_tag">hello</label> @html.actionlink("add another...", "blankeditorrow", null, new { id = "additem" }) @foreach (var item in model.tagmodels) { <div class="editor-field"> @html.editorfor(model => item.name) </div> }</div> and partialviewresult method:
public partialviewresult blankeditorrow() { var x=partialview("tagrow", new tagmodel()); return x; } and partial view:
@*@using szamam.models @model tagmodel <div class="editor-field"> @html.editorfor(model => model.name) @html.validationmessagefor(model => model.name) </div>*@ <div class="editor-field"> <input class="text-box single-line" id="[0].name" name="[0].name" type="text" value="b" /> </div> element adding when fie actionresult, collection empty :/
so there should reason:/
it's because inputs you're adding through javascript have id of "item_name" , name of "item.name". need have name of "tagmodels[0].name", "tagmodels[1].name", "tagmodel[2].name". note: going off information found here
update
ok, went ahead , took time make work given data provided. thankfully needing similar project i'm working on right now, unfortunately project in vb.net, did code in c# (obviously). note: code copy , paste clean project, except lack of using statements.
view
@model mvcapplication1.models.questiontagviewmodel @{ layout = null; } <!doctype html> <html> <head> <script src="../../scripts/jquery-1.5.1.js" type="text/javascript"></script> <script src="../../scripts/jquery-ui-1.8.11.js" type="text/javascript"></script> <script src="../../scripts/jquery.unobtrusive-ajax.js" type="text/javascript"></script> <script src="../../scripts/jquery.validate.js" type="text/javascript"></script> <script src="../../scripts/jquery.validate.unobtrusive.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function() { var re = /\[(.*?)\]/ ; $("#add_tag").click(function() { var name = $(".tagrows:last>input").attr("name"); var m = re.exec(name); var itemnumber = parseint(m[1]) + 1; var $newdiv1 = $('<div class="tagrows"><input class="text-box single-line" id="tagmodels' + itemnumber + '__name" name="tagmodels[' + itemnumber + '].name" type="text"><span class="field-validation-valid" data-valmsg-for="tagmodels[' + itemnumber + '].name" data-valmsg-replace="true"></span></div>'); $(".tagrows:last").after($newdiv1); return false; }); }); </script> <title>tagstest</title> </head> <body> @using (html.beginform()) { <div id="tags_div"> <label id="add_tag"> hello</label> @for (int = 0; < model.tagmodels.count; i++) { <div class="tagrows"> @html.editorfor(model => model.tagmodels[i].name) @html.validationmessagefor(model => model.tagmodels[i].name) </div> } </div> <input type="submit" name="submit" value="submit" /> } </body> </html> model
namespace mvcapplication1.models { public class questiontagviewmodel { //private list<tagmodel> _tagmodels=new list<tagmodel>(){new tagmodel(){name = "a"},new tagmodel(){name = "b"}}; private list<tagmodel> _tagmodels = new list<tagmodel>(); public list<tagmodel> tagmodels { { return _tagmodels; } set { _tagmodels = value; } } } public class tagmodel { public string name { get; set; } } } controller
namespace mvcapplication1.controllers { public class homecontroller : controller { public actionresult tagstest() { var tagmodels = new list<tagmodel>(); tagmodels.add(new tagmodel() { name = "tag1" }); tagmodels.add(new tagmodel() { name = "tag2" }); tagmodels.add(new tagmodel() { name = "tag3" }); var model = new questiontagviewmodel() { tagmodels = tagmodels }; return view(model); } [httppost] public actionresult tagstest(questiontagviewmodel model) { return null; } } }
Comments
Post a Comment