Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Glen 36 posts 168 karma points
    Sep 21, 2016 @ 03:47
    Glen
    0

    Hi,

    I'm new to umbraco Its been 2 weeks from now since I started to learn umbraco this problem is simple.

    Best Practices to pass child node in parameter using html action and load partial view which is a form with populated values.

    here is my partial view macro

    enter image description here

    The controller

    enter image description here

    here is the modal

    enter image description here

    Any suggestion would be appreciated.

  • Michaël Vanbrabandt 863 posts 3348 karma points c-trib
    Sep 21, 2016 @ 07:05
    Michaël Vanbrabandt
    100

    Hi Glen,

    If I see your code you now add for each child a new model instance. So if you have 10 children your modal html will be added 10 times to your document. This can cause problems because you have the same id for all of your modals.

    A better solution would be to load the partial on your page once and then using jQuery for example open the modal and populate the fields using a ajax call and the Umbraco API.

    So load in the modal on your page:

    @Html.Action("modalFormUpdate", "ArticleFormSurface")
    

    Then in your foreach you could have a hyperlink where the href attribute contains the id of your IPublishedContent to pass in to your modal:

    <a class="open-btn" href="#@page.Id">
       Update
    </a>
    

    Assign click event to the hyperlinks to get the id do an ajax call, populate the modal fields and show the model:

    $('.open-btn').click(function(e) {
       e.preventDefault;
    
       var docId = $(this).attr('href').split('#')[1];
    
       // do ajax call and populate fields
    
      // Open modal
      $('.articleUpdateModal').modal('show');
    });
    

    Hope this helps!

    /Michaël

  • Glen 36 posts 168 karma points
    Sep 21, 2016 @ 07:31
    Glen
    0

    Hi,

    Michael Thanks for the quick response, did you know any article or links that may help me about implementing ajax with the Umbraco API? I would love to read every details.. I will mark your answer as an solution.

  • Michaël Vanbrabandt 863 posts 3348 karma points c-trib
    Sep 21, 2016 @ 07:33
    Michaël Vanbrabandt
    0

    Hi Glen,

    forgot to mention the link: https://our.umbraco.org/documentation/reference/routing/webapi/

    If you can't get it to work let us know!

    /Michaël

  • Michaël Vanbrabandt 863 posts 3348 karma points c-trib
    Sep 21, 2016 @ 07:38
    Michaël Vanbrabandt
    0

    And your ajax call could be something like this:

     $.ajax({
         url: '/umbraco/surface/methodName/controllerName/',
         type: 'GET',
         dataType: 'json',
         data: jsonString,
         contentType: 'application/json; charset=utf-8',
         success: function (data) {
    
         },
          error: function (xhr, status, error) {
    
          }
     });
    

    Where methodName and controllerName are the webapi elements to get the IPublishedContent based on the id from the hyperlink.

    /Michaël

  • Glen 36 posts 168 karma points
    Sep 21, 2016 @ 07:41
    Glen
    0

    Hi Michael,

    Many thanks so glad to hear that and yes I will if anything comes up I will let you know

    Cheers,

  • Michaël Vanbrabandt 863 posts 3348 karma points c-trib
    Sep 21, 2016 @ 07:43
    Michaël Vanbrabandt
    0

    No problem, glad I could help you out!

    Enjoy your day.

    /Michaël

Please Sign in or register to post replies

Write your reply to:

Draft