jquery - How to post back form? -
i need make form using razor , devexpress controls. when user opens devexpress popup control there appear form fields needs enter. here view:
@model models.request @html.devexpress().popupcontrol( settings => { settings.name = "newrequest"; settings.callbackroutevalues = new { controller = "request", action = "requestform" }; settings.enableclientsideapi = true; settings.width = 450; settings.showheader = true; settings.showshadow = true; settings.popupanimationtype = animationtype.fade; settings.allowdragging = true; settings.modal = true; settings.setcontent( () => { using ( html.beginform( )) { viewcontext.writer.write( "<div id = 'products'>" ); foreach(var product in model.products) { html.renderpartial( "productpartial", product ); } viewcontext.writer.write( "</div>" ); //total days field @html.devexpress().spinedit( csettings => { csettings.name = "numberofproducts"; csettings.properties.enableclientsideapi = true; csettings.width = 125; csettings.properties.minvalue = 0; csettings.properties.maxvalue = 100; csettings.controlstyle.backcolor = system.drawing.color.fromargb( 82, 82, 82 ); csettings.controlstyle.forecolor = system.drawing.color.white; } ).bind( model.numberofproducts ).gethtml(); //post @html.devexpress().button( savesett => { savesett.name = "save"; savesett.text = "save"; savesett.width = 40; savesett.height = 25; savesett.controlstyle.cssclass = "button"; savesett.styles.enabledefaultappearance = false; savesett.enableclientsideapi = true; savesett.usesubmitbehavior = true; //savesett.clientsideevents.click = "function(s, e) { if(checkvalidation(s, e)) {} }"; } ).gethtml(); } } ); } ).gethtml();
i expected when view being rendered call http method, not case, calling post method (if there post same names) defined this:
settings.callbackroutevalues = new { controller = "request", action = "requestform" };
why so? , if change post method name (that called on submit) gives me error, saying there no method called.
further more, have button wanted use submitting form: settings.callbackroutevalues = new { controller = "request", action = "requestform" }; not come action method in controller. why so?
here action methods:
public actionresult requestform() { //... } [httppost] public actionresult requestform([modelbinder(typeof(devexpresseditorsbinder))] request request) { //... }
how post model? best way that? not working these devexpress controls in normal way. can somehow post model jquery? best way? please advise.
i use below solution when want show popup form validation. first of create popup control callback route value (optionally use begin , end callback , other properties):
@html.devexpress().popupcontrol(settings => { settings.name = "newrequest"; settings.callbackroutevalues = new { controller = "request", action = "getrequestform" }; //[optionally]: if want pass data action controller or set popup properties settings.clientsideevents.begincallback = "mylogic.onbeginactioncallback"; settings.clientsideevents.endcallback = "mylogic.onendactioncallback"; }).gethtml()
next create controller actions:
public actionresult getrequestform() { // … logic here ... return partialview("_partialview", viewmodel); } [httppost] public actionresult requestform([modelbinder(typeof(mybinder))] request request) { // … logic here ... return json(new { success = true }); }
next create view (name: "_partialview"):
@using (ajax.beginform("requestform", "request", new ajaxoptions { httpmethod = "post" }, new { id = "saveform" })) { @html.devexpress().textbox(settings => { settings.name = "someproperty"; }).gethtml() // … other properties… @html.devexpress().button(settings => { settings.name = "savebutton"; settings.text = "save"; settings.clientsideevents.click = "function(s,e) { mylogic.saveform(); }"; settings.usesubmitbehavior = false; }).gethtml() }
and create js script use jquery validation (for example mylogic.js):
var mylogic = function () { function saveform(){ var saveform = $("#saveform"); saveform.removedata('validator'); saveform.validate(validationsettings); // jquery validation $("#someproperty_i").rules("add", { required: true, // connect server example remote: { url: '/request/checkvalue', data: { //.. logic here .. } }, messages: { required: "required!", remote: "validation message" } }); // , add other jquery validation if (saveform.valid()) { saveform.submit(); } } var validationsettings = { errorplacement: function (error, element) { error.appendto(element.parent("td").parent("tr").parent("tbody").parent("table").parent("td")); } } return { saveform: saveform }}();
of course should include jquery scripts:
1. jquery.validate.min.js 2. jquery.validate.unobtrusive.min.js
Comments
Post a Comment