how to insert ajax form into partial view macro umbraco 6 - Templates, (partial) views and macros

Press Ctrl / CMD + C to copy this to your clipboard.

Copied to clipboard

Flag this post as spam?

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

Scott Ritshie 35 posts 100 karma points

May 23, 2016 @ 18:55

How to insert ajax form into partial view macro (Umbraco 6)

Hey all,

Can you give me an example of inserting an ajax form (created as a partial view) into a partial view macro in Umbraco 6? This is what I have in the macro so far, however, @Html.Partial is missing an assembly reference. Perhaps I'm using the wrong approach, but in essence, the outcome is to create a separate button for each product that renders. Once clicked, a div opens with a form that allows the viewer to order that particular product.

Thanks for any help! Scott

@using System.Web.Mvc;

@using Umbraco.Core.Models; @using Umbraco.Core.Services; @{ var selection = CurrentModel.Children; int index = 0;

foreach(var product in selection) { var product_specs = product.Children;

<div class="one_half product">
  <div class="fl">
    <h5>@Html.Raw(product.GetPropertyValue("ProductName"))</h5>
  </div>
  <div class="fr">
    <a href="javascript:doThis(@index);" class="button_small">Request a Quote</a>
  </div>

  @Html.Partial("_ProductOrderingForm", new UPODS.Models.ProductOrderingModel())

  <div class="cl"></div>
  <strong>@product.GetPropertyValue("Description")</strong><br />
  <img src="@product.MediaById(product.GetPropertyValue("Picture")).Url" class="fullwidth mt1" />
  <table class="specs">
    <tr>
      <th>Description</th>
      <th>Length</th>
      <th>Part #</th>
      <th>Reorder #</th>
    </tr>
    @foreach(var spec in product_specs)
    {
    <tr>
      <td>@Html.Raw(spec.GetPropertyValue("Description"))</td>
      <td>@spec.GetPropertyValue("Length")</td>
      <td>@spec.GetPropertyValue("PartNumber")</td>
      <td>@spec.GetPropertyValue("ReorderNumber")</td>
    </tr>
    }
  </table>
</div>
index++;

} }

Copy Link

Nicholas Westby 2054 posts 7103 karma points c-trib

May 23, 2016 @ 20:10

0

This recent discussion I've been having covers the basics of AJAX forms in Umbraco: https://our.umbraco.org/forum/templates-partial-views-and-macros/77401-load-content-without-pageload

Keep in mind this is for posting a form using AJAX, but it can also be used to post to an action method that renders the markup necessary to display a form (sounds like what you are trying to do). Also, keep in mind there are some potential things you'll need to do differently (e.g., some surface controller enhancements may not have been made in Umbraco 6).

Is there something in particular you'd like help with in relation to the partial view macros?

Copy Link
Scott Ritshie 35 posts 100 karma points

May 23, 2016 @ 20:44

0

Hey Nicholas,

Thanks for the reply. I typically add ajax partial view forms in a template view, but not a macro. I'm getting an error with Html.Render("SomeView", someModel) because, apparently, you can't use Html.Partial within a macro. Is that correct?

Like I said, maybe I'm going about this wrong and should using jQuery. I'm a bit light in my understanding of using js to render and process forms, so any basic explanation would be helpful. :)

Thanks, Scott

Copy Link
Nicholas Westby 2054 posts 7103 karma points c-trib

May 23, 2016 @ 21:07
0
Try ensuring the top of your macro partial view looks like this:
```
@inherits Umbraco.Web.Macros.PartialViewMacroPage
@using System.Web.Mvc.Html
```
That first line is necessary to ensure you have all the necessary MVC stuff (i.e., the correct Html property). The second line is necessary to give you the .Partial extension method.

Note that if you are currently inheriting from umbraco.MacroEngines.DynamicNodeContext, you'll have to change a bit of your code around (e.g., to access the macro parameters). See here: https://our.umbraco.org/Documentation/Reference/Templating/Macros/Partial-View-Macros/
Copy Link
Scott Ritshie 35 posts 100 karma points

May 23, 2016 @ 21:56

0

Makes sense, but for some reason, adding the line @inherits Umbraco.Web.Macros.PartialViewMacroPage breaks the macro altogether. I can't even render the macro with nothing on the page but @inherits Umbraco.Web.Macros.PartialViewMacroPage.

Remember, this is Umbraco 6. Is that only available in v.7?

Copy Link
Nicholas Westby 2054 posts 7103 karma points c-trib

May 23, 2016 @ 22:41

0

This page indicates it's available in Umbraco 6: http://umbracodevelopers.sdesign1dev.co.uk/2014/6/11/umbraco-6plus-razor-macro-for-navigation-menu/

Perhaps try globally qualifying it: @inherits global::Umbraco.Web.Macros.PartialViewMacroPage

How does it break the macro? Does it give an error message and stack trace? If not, have you configured macros to throw an exception on errors in your umbracoSettings.config?

By the way, which specific version of Umbraco 6 are you on (e.g., 6.2.6)?

Copy Link
Scott Ritshie 35 posts 100 karma points

May 24, 2016 @ 05:31

0

I just had a eureka moment! I wasn't aware that you could get macros to throw an error, so thanks for that!!

What had happened was I forgot I had created macros in my v.6 projects in /macroScripts, rather than /Views/MacroPartials. So, the obvious issues were occurring. I moved them all and made the appropriate Umbraco / code changes and everything is working!

THANKS SO MUCH FOR THE INSIGHT!

If you don't mind answering another, would you know how to pass an integer to a partial view form?

Copy Link
Nicholas Westby 2054 posts 7103 karma points c-trib

May 24, 2016 @ 16:19

0

This shows how to define macro parameters: https://our.umbraco.org/Documentation/Reference/Templating/Macros/managing-macros

This shows how to render a macro from Razor: https://our.umbraco.org/documentation/reference/templating/mvc/examples

Copy Link
is working on a reply...

Please Sign in or register to post replies