i'm new mvc 5, razor , puzzled on problem. i'm creating jquery draggable/droppable page users can drag item "available item" unordered list on "selected item" unordered list.
when item dropped, use javascript add list item ul. when form's submit button clicked , form submitted, stop default submission taking place calling event.preventdefault() method. loop through id's of selected items, put them array, , post them controller method. works well.
if error occurs, want render error message @ top of response page in new table column. not rendered (it's not in page source). took awhile figure out looks it's event.preventdefault() method causes -- if take out, shows error message fine of course controller method called twice.
any appreciated why happens.
update: have added code should compile , reproduce issue:
- run it, , leave "enter data set name:" textbox empty (which error)
- click "add data set" button , won't see error message.
- comment out event.preventdefault() in form submit javascript function
- run it, doing same thing , see error message (in red font).
class:
public class datasourcefield { private int id; public int id { { return id; } set { id = value; } } private string text; public string text { { return text; } set { text = value; } } } model:
public class datasetmaintmodel : modelbase { public int[] insertselfields { get; set; } public list<datasourcefield> availcolumnlist { get; set; } public string exceptionmsg { get; set; } public string datasetnameinsert { get; set; } public datasetmaintmodel() { } } razor view:
@using totestmgmt @model totestmgmt.models.datasetmaintmodel @{ viewbag.title = "cm lot search"; } @mvchtmlstring.create("<table border=\"1\" style=\"margin:20px;\">") @mvchtmlstring.create("<tr><td style=\"width:45px;\" class=\"mainlayoutheader\">") @mvchtmlstring.create("data set maintenance</td>") @if (model != null && model.exceptionmsg != null) { <td class="errormsg" style="padding-left:15px; padding-top:8px;" colspan="4"> @html.displayfor(model => model.exceptionmsg) </td> } @mvchtmlstring.create("</tr>") @mvchtmlstring.create("<tr><td colspan=\"3\" class=\"layoutcolumn\" style=\"width:") @mvchtmlstring.create("vertical-align:top; padding-top:6px;\">") @mvchtmlstring.create("<div class=\"outerdivthinborder\">") @mvchtmlstring.create("<table border=\"1\" class=\"contenttable\" style=\"margin-bottom:10px;\" height=\"400px\" width=\"100%\">") @mvchtmlstring.create("<tr height=\"30px\"><td class=\"smallheadercolor\" colspan=\"2\">") @mvchtmlstring.create("<b>add new data set</b></td></tr>") @using (html.beginform("insertdataset", "datasetmaint", formmethod.post)) { if (model != null) { @mvchtmlstring.create("<tr height=\"25px\"><td class=\"leftindent\" style=\"padding-top:8px; vertical-align: top; width:30%;\" >") @mvchtmlstring.create("enter data set name:<br>") @html.textboxfor(model => model.datasetnameinsert, new { @style = "width:97%;", @class = "leftindent" }) @mvchtmlstring.create("</td>") @mvchtmlstring.create("<td align=\"left\" style=\"padding-left:15px; vertical-align:bottom; width:30%;\">") @mvchtmlstring.create("<input class=\"greybutton\" type=\"submit\" value=\"add data set\" name=\"insertdatasetsubmit\"/></td></tr>") @mvchtmlstring.create("<tr height=\"25px\"><td style=\"padding-top:3px;\" class=\"leftindent\" width=\"90px\" colspan=\"3\">") @mvchtmlstring.create("available fields</td></tr>") @mvchtmlstring.create("<tr height=\"300px\"><td style=\"vertical-align:top;\" class=\"leftindent\">") <div id="availcolsdiv"> <ul style="margin-left:-35px;"> @foreach (datasourcefield item in model.availcolumnlist) { <li class="dragclass" id="@item.id" title="@item.text">@item.text</li> } </ul> </div> @mvchtmlstring.create("</td><td style=\"vertical-align:top; width:40%;\" class=\"leftindent\">") <div id="selectedcolsdiv"> <ul style="margin-left:-20px;"> @*<li class="placeholder">add items here</li>*@ </ul> </div> @mvchtmlstring.create("</td></tr>") } } @mvchtmlstring.create("</table></div></td></tr></table>") @section javascript { <script src="~/scripts/myjavascript.js"></script> } javascript:
$(function () { $("#availcolsdiv li").draggable({ appendto: "body", helper: "clone", refreshpositions: true }); $("#selectedcolsdiv").droppable({ accept: ":not(.ui-sortable-helper)", drop: function (event, ui) { var id = $(ui.draggable).attr('id'); $(this).find(".placeholder").remove(); $('<li class="dropclass droplistitem" id="' + id + '" title="' + ui.draggable.text() + '"></li>').text(ui.draggable.text()).appendto(this); } }).sortable({ items: "li:not(.placeholder)", sort: function () { $(this).removeclass("ui-state-default"); } }); }); $('form').on('submit', function (event) { //stop default submission event.preventdefault(); var ids = []; $('.droplistitem').each(function (index, value) { var id = $(value).prop('id'); ids.push(id); }); $.post( '/datasetmaint/insertdataset', { requestmodel: { insertselfields: ids, datasetnameinsert: $('#datasetnameadd').val() }, ids: ids } ); }); controller method:
public class datasetmaintcontroller : controller { [httpget] public actionresult datasetmaintadd(int id = 1, string successmsg = null) { datasetmaintmodel responsemodel = null; try { responsemodel = new datasetmaintmodel(); responsemodel.availcolumnlist = populateavaillist(); return view(responsemodel); } catch (exception ex) { responsemodel.exceptionmsg = ex.message; return view("datasetmaintadd", responsemodel); } } [httppost] public actionresult insertdataset(datasetmaintmodel requestmodel, int[] ids) { datasetmaintmodel responsemodel = new datasetmaintmodel(); try { //validate required values if (string.isnullorwhitespace(requestmodel.datasetnameinsert)) { responsemodel.availcolumnlist = populateavaillist(); throw new exception("please enter data set name"); } responsemodel.datasetnameinsert = requestmodel.datasetnameinsert; responsemodel.availcolumnlist = populateavaillist(); return view("datasetmaintadd", responsemodel); } catch (exception ex) { modelstate.remove("exceptionmsg"); responsemodel.exceptionmsg = ex.message; return view("datasetmaintadd", responsemodel); } } public list<datasourcefield> populateavaillist() { list<datasourcefield> availcolumnlist = new list<datasourcefield>(); datasourcefield field = new datasourcefield { id = 1, text = "item 1" }; availcolumnlist.add(field); field = new datasourcefield { id = 2, text = "item 2" }; availcolumnlist.add(field); return availcolumnlist; } } css:
#availcolsdiv { float: left; background-color: #e5e4e2; border-radius: 5px; overflow: visible; width: 290px; height: 450px; margin: 5px; overflow-y: scroll; overflow-x: hidden; } #availcolsdiv ul{ height: 750px; float: left; } #selectedcolsdiv { float:left; background-color: #e5e4e2; border-radius: 5px; overflow:visible; width: 290px; height: 450px; margin: 5px; max-height: 450px; overflow-y: scroll; } .dragclass { background-color: #ffff99; border: 1px solid black; border-radius: 5px; padding: 5px; margin: 10px; width: 220px; list-style-type:none; } .dropclass { background-color: #ffff99; border: 1px solid black; border-radius: 5px; padding: 5px; margin: 10px; width: 220px; list-style-type:none; } #availcolsdiv li, #selectedcolsdiv li { cursor: pointer; } .errormsg { font-size: 14px; font-weight: 600; color: red; }
