Html helper within an html helper (rendering razor correctly from string literal)

Question

I made a custom HTML helper for the contact modal so that anyone on our app can use it with @Html.ContactModal(model and options go here), but the issue is that on the modal there's another html helper for the sales code drop down, and the razor isn't rendering correctly. I tried to do everything with a partial view only to learn you can't (or shouldn't) use partials with html helpers, only with controllers (I'm new to all of this...), a co-worker suggested I use a tag builder, but I wanted to ask here first before writing the entire form with a tag builder.

public static IHtmlString ContactModal(this HtmlHelper htmlHelper, ContactModalOptions options)
    {
        //required scripts
        htmlHelper.AddScriptFile("~/Areas/Customers/Scripts/ContactModal/tmi.customers.contactModal.js");
        htmlHelper.AddScriptLine("$('#" + options.controlId + "').contactModal(" + options.ToJson() + ");", true);
        string htmlContents = string.Empty;
        htmlContents = $@"<div id='contactModalContainer' style='display: none'>
<div class='panel panel-default panel-details' id='' style='display: none'>
    <div class='panel-heading' id='divContactModalHeading'>
        <h3 id='h3contactModalHeading'></h3>
    </div>
    <div class='panel-body' id='divContactDetBody'>
        <form id='custContactDetailsForm'>
            <div class='row'>
                <div class='col-sm-6'>
                    <div class='form-group' style=''>
                        <label for='txtFirstName' id='lblFirstName' class='control-label'>First Name: </label>

                        <input data-helper='FirstName' id='contactFirstName' type='text' class='form-control' disabled='disabled' data-editable='true' value='' />

                    </div>
                </div>
                <div class='col-sm-6'>
                    <div class='form-group' style=''>
                        <label for='txtLastName' class='control-label'>Last Name: </label>
                        <input data-helper='LastName' id='contactLastName' type='text' class='form-control' disabled='disabled' data-editable='true' value='' />
                    </div>
                </div>
                <div class='col-md-12'>
                    <div class='form-group' style=''>
                        <label for='txtPositionTitle'>Position/Title: </label>
                        <input id='contactPosition' data-helper='Position' type='text' class='form-control' disabled='disabled' data-editable='true' value='' />

                    </div>
                </div>
                <div class='col-md-12'>
                    <div class='form-group' style=''>
                        <label for='txtSalesOrders'>E-mail: </label>

                        <input id='contactEmail' data-helper='Email' type='text' class='form-control' disabled='disabled' data-editable='true' value='' />

                    </div>
                </div>
                <div class='col-sm-4'>
                    <div class='form-group' style=''>
                        <label for='txtSalesOrders'>Work Phone: </label>

                        <input id='contactWorkPhone' data-helper='DirectPhone' type='text' class='form-control' disabled='disabled' data-editable='true' value='' />

                    </div>
                </div>
                <div class='col-sm-4'>
                    <div class='form-group' style=''>
                        <label for='txtMobilePhone'>Mobile Phone: </label>

                        <input id='contactMobile' data-helper='MobilePhone' type='text' class='form-control' disabled='disabled' data-editable='true' value='' />
                    </div>
                </div>

                <div class='col-sm-4'>
                    <div class='form-group' style=''>
                        <label for='txtFax'>Fax: </label>
                        <input id='contactFax' data-helper='Fax' type='text' class='form-control' disabled='disabled' data-editable='true' value='' />
                    </div>
                </div>


                <div class='col-sm-4'>
                    <div class='form-group' style=''>
                        <label for='txtHomePhone'>Home Phone: </label>

                        <input id='contactHomePh' data-helper='HomePhone' type='text' class='form-control' disabled='disabled' data-editable='true' value='' />

                    </div>
                </div>

                <div class='col-sm-4'>
                    <div class='form-group' style=''>
                        <label for='txtPager'>Other Phone: </label>
                        <input id='contactPager' data-helper='PagerPhone' type='text' class='form-control' disabled='disabled' data-editable='true' value='' />
                    </div>
                </div>

                <div class='col-sm-12'>
                    <div class='form-group'>
                        <label for='txtNotes'>Notes/Comments: </label>
                        <textarea id='contactNotes' data-helper='ContactNotes' type='text' class='form-control' disabled='disabled' rows='3' data-editable='true' value=''></textarea>
                    </div>
                </div>

                <div class='col-sm-6'>
                    <div class='form-group' style=''>
                        <label for='txtDateAdded'>Date Added: </label>
                        <label id='contactDateAdded'></label>
                    </div>
                </div>

                <div class='col-sm-6' style='clear: both'>
                    <div class='form-group'>
                        <label class='control-label'>Referred By:</label>
                        <div class=''>
                            @@Html.SalesCodeDropDown(new SelectControlOptionsBase('contactReferredBy')
                       {{
                            includeNull = true,isEditable = editableOptions.yes,
                           disabled = true,
                       }})
                        </ div >

                    </ div >
                </ div >
                < div class='col-md-6' style='clear: both'>
                    <div class='form-group' style=''>
                        <label for='txtEnteredBy'>Entered By: </label>

                        <label id = 'contactEnteredBy' ></ label >

                    </ div >
                </ div >
                < div class='col-md-6' style='clear: both'>
                    <div class='checkbox'>
                        <label>
                            <input id = 'contactIsInactiveChkBx' data-helper='Inactive' type='checkbox' disabled data-editable='true' value='0'>Inactive
                          </label>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>


<div id = 'contactModalFooter' class='form-group' style=''>
    <button type = 'button' id='btnContactModalClose' style='margin-right: 5px;' class='pull-right btn btn-form-state'>Close</button>
    <button type = 'button' id='btnContactModalCancel' style='margin-right: 5px;' class='pull-right btn btn-form-state'>Cancel</button>
    <button type = 'button' id='btnContactModalSave' style='background-color: #EE6723; margin-right: 5px;' class='pull-right btn btn-form-state'>Save</button>
</div>
</div> ";
return MvcHtmlString.Create(htmlContents);

Sorry if this sound harsh, but this is not even remotely close to what a `HtmlHelper` extension method is used for (and very little of the html your trying to generate would work anyway). If you want a reusable 'modal form', create a partial view or a custom `EditorTemplate` based on a model and generate it using `@Html.Partial()` or `@Html.EditorFor()` — , May 10 '16 at 05:16

score 1 · Answer 1 · answered May 10 '16 at 17:02

This ended up working:

       public static IHtmlString ContactModal(this HtmlHelper htmlHelper, ContactModalOptions options)
    {
        StringBuilder result = new StringBuilder();

        //required scripts
        htmlHelper.AddScriptFile("~/Areas/Customers/Scripts/ContactModal/tmi.customers.contactModal.js");
        htmlHelper.AddScriptLine("$('#" + options.controlId + "').contactModal(" + options.ToJson() + ");", true);
        var body = htmlHelper.Partial("~/Areas/Customers/Views/Contacts/Shared/ContactModalPartial.cshtml").ToHtmlString();
        result.AppendLine(body);
        return MvcHtmlString.Create(result.ToString());
    }

score 0 · Answer 2 · answered May 10 '16 at 05:19

0

If your @Html.SalesCodeDropDown(new SelectControlOptionsBase('contactReferredBy') returns html, then just call that before you set the variable htmlContents and then concat it where you need to.

answered May 10 '16 at 05:19

Jimmy Muga

99
4

Html helper within an html helper (rendering razor correctly from string literal)

2 Answers2