javascript - Posting entire model back to controller using ajax -
i beginner in asp.net mvc , web technologies. stuck @ point. have create user page. when admin user wants add new user, redirected create user page empty data class. in page, data class filled up. want return model's data controller using post method.
what trying achieve directly post entire model json object controller , null.
on create new user click :
[httpget] public actionresult createuser() { var newuser = new user(); return view(newuser); } my createuser view code :
@model webapplication7.models.user @{ layout = null; } <!doctype html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>createuser</title> <h2>create new user</h2> </head> <body> <div> <table> <tr> <td>username : </td> <td> @html.textboxfor(model => model.username, new { @class = "", id = "txtusername", @maxlength = 6 }) </td> </tr> <tr> <td>password : </td> <td> @html.textboxfor(model => model.password, new { @class = "", id = "txtusername", @maxlength = 6 }) </td> </tr> <tr> <td>first name : </td> <td> @html.textboxfor(model => model.firstname, new { @class = "", id = "txtusername", @maxlength = 6 }) </td> </tr> <tr> <td>last name : </td> <td> @html.textboxfor(model => model.lastname, new { @class = "", id = "txtusername", @maxlength = 6 }) </td> </tr> <tr> <td>display name : </td> <td> @html.textboxfor(model => model.displayname, new { @class = "", id = "txtusername", @maxlength = 6 }) </td> </tr> <tr> <td>email : </td> <td> @html.textboxfor(model => model.emailid, new { @class = "", id = "txtusername", @maxlength = 6 }) </td> </tr> <tr> <td> <input type="button" name="btnclear" value="submit" class="btn-clear" onclick="submit()" /> </td> </tr> </table> </div> </body> </html> the submit function code :
<script> function submit() { $.ajax({ type: "post", url: "/usermanagement/submitnewuserdata", data: json.stringify({ userdata: model }), contenttype: "application/json; charset=utf-8", datatype: "json", success: function (msg) { servicesucceeded(msg); }, error: function () { return "error"; } }); } </script> my controller code :
[httppost] public jsonresult submitnewuserdata(user userdata) { if (userdata != null) { } return json(true); } the userdata here null always. please me post model controller. thank you.
you have not indicated value of model is, in order work, need to
var model = { username: $('#username').val(), password: $('#password').val(), ... // etc each property of user }; assuming remove new { id = "txtusername" } attributes generating invalid (duplicate) name attributes.
a far easier solution wrap form controls in <form> tag , use .serialize(); correctly serialize form controls. script be
$.ajax({ type: "post", url: '@url.action("submitnewuserdata", "usermanagement")', // use url.action() generate url's data: $('form').serialize; datatype: "json", success: function (msg) { servicesucceeded(msg); }, error: function () { return "error"; } }); return false; // cancel default submit to improve further, remove onclick="submit()" , handle .submit() event using unobtrusive javascript
$('form').submit(function() { if (!$(this).valid()) { return; } $.ajax({ .... }); return false; }); the if (!$(this).valid()) { allow handle client side validation, should doing including @html.validationmessagefor(..) helpers , including relevant jquery.validate.js , jquery.validate.unobtrusive.js scripts, , adding validation attributes model properties both client , server side validation.
side note: password field should generate @html.passwordfor(). unclear why using ajax rather standard submit (why want user stay on same page , edit again?
Comments
Post a Comment