2016-05-10 11 views
-1

Ich habe einen benutzerdefinierten HTML-Helper für das Kontaktmodal, so dass jeder auf unserer App kann es mit @ Html.ContactModal verwenden (Modell und Optionen gehen hier), aber das Problem ist, dass auf dem Modal gibt es einen anderen HTML-Helfer für den Sales-Code Drop-Down, und der Rasierer wird nicht richtig dargestellt. Ich habe versucht, alles mit einer Teilansicht zu machen, nur um zu lernen, dass man Teiltöne mit HTML-Helfern nicht benutzen kann (oder sollte), nur mit Controllern (ich bin neu in all dem ...), schlug ein Kollege vor Ich benutze einen Tag Builder, aber ich wollte hier zuerst fragen, bevor ich das gesamte Formular mit einem Tag Builder schreibe.HTML-Helfer in einem HTML-Helfer (Rendering Rasierer korrekt aus String-Literal)

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 = [email protected]"<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> 

„; return MvcHtmlString.Create (htmlContents);

+0

Sorry, wenn dies hart klingen, aber das ist nicht einmal entfernt c Verlieren Sie, für was eine "HtmlHelper" -Erweiterungsmethode verwendet wird (und sehr wenig von dem HTML, das Sie versuchen zu generieren, würde sowieso funktionieren). Wenn Sie ein wiederverwendbares "modales Formular" wünschen, erstellen Sie basierend auf einem Modell eine partielle Ansicht oder ein benutzerdefiniertes 'EditorTemplate' und generieren Sie es mit' @ Html.Partial() 'oder' @ Html.EditorFor() ' –

Antwort

0

Wenn Ihr @ Html.SalesCodeDropDown (neu SelectControlOptionsBase ('contactReferredBy') html zurückgibt, dann nur so nennen, bevor Sie die Variable htmlContents gesetzt und dann concat es, wo Sie brauchen, um

0

diese endete arbeiten.

 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()); 
    } 
Verwandte Themen