Unable to use DropDown inside CustomControls

[pennstatephil]

tried to do the following, but apparently a syntax error... tried many different combinations trying to make it work, but no luck. Any ideas, or would this require a change to TBMVC?

@f.FormGroup().CustomControls(
    Html.Bootstrap().SubmitButton().Text("Save").Style(ButtonStyle.Primary),
    Html.Bootstrap().ActionLinkButton("Cancel", "Index"),
    using (var dd = Html.Bootstrap().Begin(new DropDown("Reports").Style(ButtonStyle.Info)))
    {
        dd.ActionLink("Report 1", "Index")
    }
)

[DmitryEfimenko]

The problem is that using block is not a valid parameter that CustomControls accepts. You may try inline view helpers. I didn't try this, but I have a feeling it may work:

@helper MyForm() {
    using (var dd = Html.Bootstrap().Begin(new DropDown("Reports").Style(ButtonStyle.Info)))
    {
        dd.ActionLink("Report 1", "Index")
    }
}
@f.FormGroup().CustomControls(
    Html.Bootstrap().SubmitButton().Text("Save").Style(ButtonStyle.Primary),
    Html.Bootstrap().ActionLinkButton("Cancel", "Index"),
    MyForm()
)

Let me know if it worked. I'm curious.

[pennstatephil]

It's trying to work, but not quite there:

@helper ReportDropDown()
{
    using (var dd = Html.Bootstrap().Begin(new DropDown("Reports").Style(ButtonStyle.Info)))
    {
        @dd.ActionLink("Report 1", "Index")
    }
}

@f.FormGroup().CustomControls(
    Html.Bootstrap().SubmitButton().Text("Save Scenario").Style(ButtonStyle.Primary),
    Html.Bootstrap().ActionLinkButton("Cancel", "Index"),
    ReportDropDown()
)

[DmitryEfimenko]

Could you show me rendered html? Check this issue out. There was an issue there when inline helper was not rendering a div (I have no idea why). Probably the issue is similar here.

[pennstatephil]

Rendered HTML (makes perfect sense when you look at image!):

<div class="dropdown">
    <a class="btn dropdown-toggle btn-info " data-toggle="dropdown" href="#">Reports <span class="caret"></span></a>
    <ul class="dropdown-menu"></ul>
</div>
<div class="dropdown">
    <a class="btn dropdown-toggle btn-info " data-toggle="dropdown" href="#">Reports <span class="caret"></span></a>
    <ul class="dropdown-menu"></ul>
</div>
<div class=" form-group"><label class="control-label col-lg-2" for=""> </label>
    <div class="col-lg-10">
        <button class="btn-primary  btn" type="submit">Save Scenario</button> 
        <a class="btn  btn-default" href="/Scenario">Cancel</a> 
        <li><a href="/Scenario">Report 1</a></li>
    </div>
</div>

It doesn't look like it's missing anything, it's just doing the button twice, and too soon. The <li> makes it into the group, but that's all. Very unusual!

[DmitryEfimenko]

so why did you close this issue? It does not make sense for me why it renders it twice and too soon. Did you get it working?

[pennstatephil]

No that was a mistake, hit the wrong button, sorry. Re-opened immediately after.

[DmitryEfimenko]

Nevermind, I see. I'll have to do some testing about this in the evening when I get home.

[pennstatephil]

Appreciate you looking into this! Good luck!

[DmitryEfimenko]

I've tried multiple approaches, but it just won't work. The issue is that disposable helpers use this method to write to output:

html.ViewContext.Writer.Write("Whatever")

... and this spits out the string right where it is placed in the view (even if it's inside the inline helper), which causes the whole issue. I'm gonna have to say you'll have to use good old html for this one (You can still put it inside inline helper).

[pennstatephil]

Good to know, thanks for trying.

[pennstatephil]

So is there any way to get a dropdown inline without using a button group? I tried:

<div class=" form-group">
    <label class="control-label col-lg-2" for=""> </label>
    <div class="col-lg-10">
        @Html.Bootstrap().SubmitButton().Text("Save Scenario").Style(ButtonStyle.Primary)
        @Html.Bootstrap().ActionLinkButton("Cancel", "Index")
        @using (var dd = Html.Bootstrap().Begin(new DropDown("Reports").Style(ButtonStyle.Info)))
        {
            @dd.ActionLink("Report 1", "Index")
        }
    </div>
</div>

but it renders this: is there a way to remove the wrapping <div class="dropdown"> so it'll render inline?

[DmitryEfimenko]

that's a css job. Simply wrap the using block in a separate <div id="dd-reports"> and apply css rules to it:

#dd-reports {
    display: inline-block;
    margin-left: 2px; /* not sure if you need this */
}

... something among these lines. I didn't test this code, but it should point you in the right direction.

[DmitryEfimenko]

did this work for you?

[pennstatephil]

Yes, the workarounds worked OK. Thanks!