Async POST with Sitefinity MVC Widgets
I'm trying to implement the scenario in this blog post: www.sitefinity.com/.../async-post-with-sitefinity-mvc-widgets
Sitefinity 7.152... does this still work in Sitefinity 7.152?
The main difference between the example in the blog post and my situation is I need to return/update a partial view inside the default view. I have a form that is dynamic depending on which show a person chooses. The form can be submitted as many times as the user wishes to build a list of ticket selections for a how.
My controller index builds the form, then I use jquery exactly like the blog post to submit the form and get data returned in a partial view. That's all working fine. The issue is only the partial view is returned and rendered. The partial view is never returned back to the jquery ajax call, so I lose the form I've built, which is "expensive" to build. If I don't do it like the blog post above, then how would I go about this?
Here is a link to see what I'm talking about: beta.kentuckycenter.org/all-shows
Click on a show, then click buy tickets on the show page, a select tickets page will load, then you will see the form I am referring too. Select an amount of tickets, section, etc then click 'Go'. The form submits but only the partial view is returned. Don't worry about the data inside the partial view as I'm only showing a couple of items right now.
Here is the javascript, which is inside a master page. Then I have a regular default view for my widget, then a partial view called 'TicketList'. I want only want the partial view to update inside the default view. Is this possible?
<script type="text/javascript"> $(document).ready( function () $("#find-tickets").click( function () var model = TicketsObject.collectModel(); TicketsObject.sendData(model, "/all-shows/select-tickets/Index"); ); ); $(document).unload( function () ); TicketsObject = collectModel: function () return result = NumberOfTickets: $("#NumberOfTickets").val(), PriceType: $("#PriceType").val(), ZoneID: $("#ZoneID").val(), PerformanceID: $("#PerformanceID").val() ; , sendData: function (ticketReserveData, destination) $.ajax( type: 'POST', url: destination, contentType: 'application/json; charset=utf-8', data: JSON.stringify(ticketReserveData), success: function (result, args) alert('here'); , error: this._syncFailureDelegate ); </script>
Here is the controller method
[AcceptVerbs(HttpVerbs.Post)] [System.Web.Mvc.OutputCache(NoStore = true, Duration = 0, VaryByParam = "*")] public ActionResult Index(GetTicketsModel Model) int ticketsReserved = 0; bool callReserveTickets = false; SelectTicketsModel SelectModel = new SelectTicketsModel(); int numberOfTickets = 0; if (int.TryParse(Model.NumberOfTickets, out numberOfTickets)) callReserveTickets = true; int zoneID = 0; if(callReserveTickets) if (int.TryParse(Model.ZoneID, out zoneID)) callReserveTickets = true; else callReserveTickets = false; int performanceID = 0; if (callReserveTickets) if (int.TryParse(Model.PerformanceID, out performanceID)) callReserveTickets = true; else callReserveTickets = false; if(callReserveTickets) ticketsReserved = SelectModel.ReserveTickets(Model.PriceType, performanceID, numberOfTickets, zoneID, Model.Accessible); if (ticketsReserved == numberOfTickets) //Fill LineItemModel To Do return Content(MvcHelper.RenderPartialViewToString(this, "TicketList", Model)); Chip,
TL;DR == You want it to stop doing a full post-back? Right?
Yes Tim, basically I have a form that can be submitted once or multiple times to add/remove line items. I don't want to refresh the whole page. I only want to update the div that contains the line items. The form options are built dynamically depending on what performance was selected from a show page.
The form and results are in a Sitefinity MVC widget.
I have this working where the whole page refreshes here:
Form Working Here - if you keep clicking Go then it keeps adding line items if seats are available
It works but obviously this is not an ideal situation. The back button causes caching issues, not to mention performance issues, etc. Also you can see the tab for "Select Your Seats". That area will make heavy use of JSON and jquery. Here that is in action on our old/current website:
Select Your Own Seat
Side note: purchase tickets button is disabled for now.
Chip,
I've never done this before, but it seems to me that some other handler is picking up the click prior to the ajax being fired off. (Or maybe none at all, hence the full post back). A combination of changing the button to a div or .preventDefault()ing after firing the AJAX could help debug.