+1-888-365-2779
Try Now
More in this section

Forums / Developing with Sitefinity / Async POST with Sitefinity MVC Widgets

Async POST with Sitefinity MVC Widgets

4 posts, 0 answered
  1. Chip
    Chip avatar
    14 posts
    Registered:
    25 Nov 2013
    29 Apr 2015
    Link to this post

    I'm trying to implement the scenario in this blog post: http://www.sitefinity.com/blogs/stanislav-velikovs-blog/2013/06/24/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: http://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));
            }

    In summary again: The jquery works fine as far as getting the input and sending it to the controller. The controller executes and then renders the partial view. What do I need to do to get 'return Content()' to return back to the original jQuery ajax call? I've been fighting with this for days and I can't get it to work. I really appreciate any guidance.
  2. Tim
    Tim avatar
    258 posts
    Registered:
    22 Jun 2011
    04 May 2015
    Link to this post

    Chip,

     TL;DR == You want it to stop doing a full post-back? Right?

  3. Chip
    Chip avatar
    14 posts
    Registered:
    25 Nov 2013
    07 May 2015 in reply to Tim
    Link to this post

    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. 

  4. Tim
    Tim avatar
    258 posts
    Registered:
    22 Jun 2011
    07 May 2015 in reply to Chip
    Link to this post

    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.

4 posts, 0 answered