I'm running through some basic web page development and have came across something and I don't know how to proceed.
I have two Actions; one that returns a Customer object as JSON, used in a jQuery Ajax call, and an Action that should accept a Customer object to save it. Here is the Customer object (model).
public class Customer
{
public string Name { get; set; }
public Address Address { get; set; }
}
public class Address
{
public string Street { get; set; }
}
Basic stuff.
Here now are the Actions.
public JsonResult GetCustomer()
{
Customer customer = new Customer
{
Name = "Microsoft",
Address = new Address { Street = "Redmond" }
};
return Json(customer, JsonRequestBehavior.AllowGet);
}
public void SaveCustomer(Customer customer)
{
// intentionally left blank
}
In the HTML page I call the GetCustomer Action using jQuery.getJSON method, fired by a button click, and display the Customer in input fields.
And it all works nice. Now I want to edit the details and submit a jQuery.post call to update the record but the problem is the customer object no longer exists on the client side and it were, as it could be made to, it would be out of date as all edits
exist only in the input controls.
Question is how can I take the edits made in the input controls and use them to re-create a Customer object that can then be sent to the SaveCustomer event?
Is there data binding in ASP.MVC?
Any advice? I'm a bit new to this approach to web development and I'm a bit out of my comfort zone; which is awesome.
p.s I know that the customer object can be created using code similar to this
customer {
name = $('#textName').val;
}
and that's fine for this example but what if the Customer object was much more complex; I'd rather not take this approach as eventually I will be working with a very complex object.
dsmyth
Member
31 Points
11 Posts
Ajax POST of Complex object to MVC Action
Mar 20, 2012 02:50 PM|LINK
Hi Everyone, really need your help.
I'm running through some basic web page development and have came across something and I don't know how to proceed.
I have two Actions; one that returns a Customer object as JSON, used in a jQuery Ajax call, and an Action that should accept a Customer object to save it. Here is the Customer object (model).
public class Customer { public string Name { get; set; } public Address Address { get; set; } } public class Address { public string Street { get; set; } }Basic stuff.
Here now are the Actions.
public JsonResult GetCustomer() { Customer customer = new Customer { Name = "Microsoft", Address = new Address { Street = "Redmond" } }; return Json(customer, JsonRequestBehavior.AllowGet); } public void SaveCustomer(Customer customer) { // intentionally left blank }In the HTML page I call the GetCustomer Action using jQuery.getJSON method, fired by a button click, and display the Customer in input fields.
<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %> <asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server"> Customer Records </asp:Content> <asp:Content ID="Header" ContentPlaceHolderID="HeaderContent" runat="server"> <script type="text/javascript"> $(document).ready( function() { $('#buttonGet').click(click); }); function click() { $.getJSON("Customer/GetCustomer", null, display); } function display(customer) { $('#textName').val(customer.Name); $('#textStreet').val(customer.Address.Street); } </script> </asp:Content> <asp:Content ID="Main" ContentPlaceHolderID="MainContent" runat="server"> <input type="text" id="textName" /> <br /> <input type="text" id="textStreet" /> <br /> <input id="buttonGet" type="button" value="Get" /> </asp:Content>And it all works nice. Now I want to edit the details and submit a jQuery.post call to update the record but the problem is the customer object no longer exists on the client side and it were, as it could be made to, it would be out of date as all edits exist only in the input controls.
Question is how can I take the edits made in the input controls and use them to re-create a Customer object that can then be sent to the SaveCustomer event?
Is there data binding in ASP.MVC?
Any advice? I'm a bit new to this approach to web development and I'm a bit out of my comfort zone; which is awesome.
p.s I know that the customer object can be created using code similar to this
customer {
name = $('#textName').val;
}
and that's fine for this example but what if the Customer object was much more complex; I'd rather not take this approach as eventually I will be working with a very complex object.