javascript - jQuery code doesn’t work properly after submitting Ajax.BeginForm in asp.net mvc -
i tried minimize huge problem small 1 created new sample web project; mvc-empty in vs. created 1 view named „index” in home controller. index view code:
@model webapplication16.viewmodels.home.indexvm @{ viewbag.title = "index"; } @html.partial("~/views/home/_orders.cshtml", model.orders) @section scripts{ <script src="~/scripts/jquery.validate.js"></script> <script src="~/scripts/jquery.validate.unobtrusive.js"></script> <script src="~/scripts/jquery.unobtrusive-ajax.js"></script> <script> $("#type").change(function () { $('#order-current > img').remove(); var currentorder = "#type_" + $("#type").find('option:selected').text(); var $img = $(currentorder).clone(); $img.removeclass("hidden"); $("#order-current").append($img); $("#ajax-form").submit(); }); </script> } home controller code:
public class homecontroller : controller { [httpget] public actionresult index() { indexvm datavm = new indexvm(); getcontrolsdatasource(datavm.orders); return view(datavm); } private static void getcontrolsdatasource(ordersvm datavm) { list<selectlistitem> typecontroldatasource = new list<selectlistitem>(); foreach (var en in enum.getvalues(typeof(typeenum))) { selectlistitem item = new selectlistitem(); item.text = en.tostring(); item.value = ((int)en).tostring(); typecontroldatasource.add(item); } datavm.typecontroldatasource = typecontroldatasource; } [httppost] public actionresult pay(indexvm datavm) { getcontrolsdatasource(datavm.orders); if (modelstate.isvalid) { datavm.orders.info = "info bla bla bla"; return partialview("~/views/home/_orders.cshtml", datavm.orders); } else { return view(datavm); } } } there partial view named “_orders”, rendered on index view.the code of _orders partial view:
@model webapplication16.viewmodels.home.ordersvm @using (ajax.beginform("pay", "home", new ajaxoptions { insertionmode = insertionmode.replace, updatetargetid = "result", }, new { id = "ajax-form" })) { <div id="result"> <div id="order-current"> </div> <div> @html.textboxfor(x => x.name, new { @class = "form-control", style = "margin-top:10px;", id = "name" }) @html.validationmessagefor(x => x.name) </div> <div> @html.dropdownlistfor(x => x.type, model.typecontroldatasource, new { @class = "form-control", style = "margin-top:10px;", id = "type", }) @html.validationmessagefor(x => x.type) </div> <div> <p>@model.info</p> </div> <button type="submit" class="btn btn-primary" name="ok"> ok</button> </div> } <div id="orders-container"> <img id="type_i" src="~/app_images/type_i.png" class="img-responsive hidden" /> <img id="type_ii" src="~/app_images/type_ii.png" class="img-responsive hidden" /> <img id="type_iii" src="~/app_images/type_iii.png" class="img-responsive hidden"/> </div> index model described class indexvm: public class indexvm { public indexvm() { this.orders = new ordersvm(); } public ordersvm orders { get; set; } } _orders model described class ordersvm:
public class ordersvm { [required] public string name { get; set; } public string info { get; set; } [required] public typeenum type { get; set; } public list<selectlistitem> typecontroldatasource { get; set; } } public enum typeenum { i, ii, iii } after change of value in dropdownlistfor control id=”type”, picture hidden field should injected jquery code located in index view container id=”order-current” , after operation ajax-form should submitted. works after calling
return partialview("~/views/home/_orders.cshtml", datavm.orders); from homecontroller, field info updated injected picture “order-current” div container gone. tried see what’s wrong in google chrome using f12 button , there no errors appeared infinite loop in “browserlink” script. can’t explain why. want see injected picture in container id=”order-current after submitting ajax-form. how , did wrong?
thanks friend solved problem. after updating “result” container, events added jquery controls located in container unpinned. that’s why crashes. way make work correctly create function , pin event oncomplete of ajaxbeginform. after each update of result container via ajax, function called. made small mistake in home controller because inserted wrong view model class. after changes, looks this; home controller code:
public class homecontroller : controller { [httpget] public actionresult index() { indexvm datavm = new indexvm(); getcontrolsdatasource(datavm.orders); return view(datavm); } private static void getcontrolsdatasource(ordersvm datavm) { list<selectlistitem> typecontroldatasource = new list<selectlistitem>(); foreach (var en in enum.getvalues(typeof(typeenum))) { selectlistitem item = new selectlistitem(); item.text = en.tostring(); item.value = ((int)en).tostring(); typecontroldatasource.add(item); } datavm.typecontroldatasource = typecontroldatasource; } [httppost] public actionresult pay(ordersvm datavm) { getcontrolsdatasource(datavm); if (modelstate.isvalid) { datavm.info = "info bla bla bla"; return partialview("~/views/home/_orders.cshtml", datavm); } else { return view(datavm); } } } index view:
@model webapplication16.viewmodels.home.indexvm @{ viewbag.title = "index"; } @html.partial("~/views/home/_orders.cshtml", model.orders) <div id="orders-container"> <img id="type_i" src="~/app_images/type_i.png" class="img-responsive hidden" /> <img id="type_ii" src="~/app_images/type_ii.png" class="img-responsive hidden" /> <img id="type_iii" src="~/app_images/type_iii.png" class="img-responsive hidden" /> </div> @section scripts{ <script src="~/scripts/jquery.validate.js"></script> <script src="~/scripts/jquery.validate.unobtrusive.js"></script> <script src="~/scripts/jquery.unobtrusive-ajax.js"></script> <script> function imageonchangeevent() { $("#ajax-form").submit(); } function oncompleteajaxform() { $('#order-current > img').remove(); var currentorder = "#type_" + $("#type").find('option:selected').text(); var $img = $(currentorder).clone(); $img.removeclass("hidden"); $("#order-current").append($img); } </script> } _orders partial view code:
@model webapplication16.viewmodels.home.ordersvm <div id="result"> @using (ajax.beginform("pay", "home", new ajaxoptions { insertionmode = insertionmode.replace, updatetargetid = "result", oncomplete = "oncompleteajaxform()" }, new { id = "ajax-form" })) { <div id="order-current"> </div> <div> @html.textboxfor(x => x.name, new { @class = "form-control", style = "margin-top:10px;", id = "name" }) @html.validationmessagefor(x => x.name) </div> <div> @html.dropdownlistfor(x => x.type, model.typecontroldatasource, new { @class = "form-control", style = "margin-top:10px;", id = "type", onchange = "imageonchangeevent()" }) @html.validationmessagefor(x => x.type) </div> <div> <p>@model.info</p> </div> <button type="submit" class="btn btn-primary" id="button_ok" name="ok"> ok</button> } </div>
Comments
Post a Comment