title: Custom type conversion in model binding (ASP.NET MVC)
body: <p>I have a form that submits several string values. My model has one custom type ("Service"). Application gives error while trying to convert a string value to "Service". I am new to MVC. I appreciate your help!</p>
  
  <p>Controller (Orders/Create):</p>
  
  <pre><code>    // POST: Orders/Create
      [HttpPost]
      public ActionResult Create([Bind(Include = "Id,Name,Email,Language,Service,DocumentPath,Content,DeliveryUrgent,Cost,Payment")] Order order)
      {
          var errors = ModelState.Values.SelectMany(v =&gt; v.Errors);
          if (ModelState.IsValid)
          {
              // some stuff
  
              return View();
          }
  
          return View(order);
      }
  </code></pre>
  
  <p>Model (Order):</p>
  
  <pre><code>public class Order
  {
      [Key]
      public int Id { get; set; }
      public string Name { get;set;}
      public string Email { get; set; }        
      public string Language { get; set; }                
      public string DocumentPath { get; set; }
      public string Content { get; set; }        
      public bool DeliveryUrgent { get; set; }
      public float Cost { get; set; }
      public bool Payment { get; set; }       
      public virtual Service Service { get; set; }
  }
  </code></pre>
  
  <p>Model (Service):</p>
  
  <pre><code>public class Service
  {
      [Key]
      public int Id { get; set; }
      public string Title { get; set; }
      public double CostPerWord { get;set;}
      public int Discount { get; set; }  
      public int MinimumCost { get; set; }
      public int UrgentCost { get; set; }
  
      [JsonIgnore]
      public virtual ICollection&lt;Order&gt; Orders { get; set; }
  }
  </code></pre>
  
  <p>View (Create):</p>
  
  <pre><code>@model testapp.Models.Order
  
  @{
      ViewBag.Title = "Test";
  }
  
  &lt;div class="jumbotron text-center"&gt;
      &lt;h1&gt;testapp&lt;/h1&gt;
  &lt;/div&gt;
  
  &lt;div class="row" id="app"&gt;
      &lt;div class="col-md-offset-1 col-md-10"&gt;
          &lt;form class="form-horizontal"&gt;
              &lt;div class="row" style="margin-bottom:10px;"&gt;
                  &lt;div class="col-xs-8" style="margin-top:10px;"&gt;
  
                      &lt;transition name="slide-down" appear mode="out-in"&gt;
                          &lt;strong v-if="form.filePath.length == 0" style="padding-left: 5px; padding-bottom: 5px;"&gt;Enter your text:&lt;/strong&gt;
                      &lt;/transition&gt;
                  &lt;/div&gt;
                  &lt;div class="col-xs-4 text-right"&gt;or &lt;button type="button" v-on:click="selectDocument" href="#" class="btn btn-primary" style="padding: 5px 15px"&gt;Upload file&lt;/button&gt;&lt;/div&gt;
                  &lt;div style="display: none;"&gt;
                      &lt;input type="file" ref="file_doc" class="form-control" id="file_doc" name="file_doc" v-on:change="uploadDocument" accept=".txt,.pdf,.doc,.docx" /&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="form-group" style="margin-bottom:0px;"&gt;
                  &lt;div class="alert alert-info" v-show="fileUploadProgress &lt; 100 &amp;&amp; fileUploadProgress &gt; 0"&gt;
                      Uploading: {{fileUploadProgress}}%
                  &lt;/div&gt;
                  &lt;textarea v-if="form.filePath.length == 0" v-model="form.content" ref="txt_content" name="content" style="margin: 0 2%; width: 96%;" class="form-control full-width" autofocus="autofocus" rows="15" placeholder="Enter your text here..."&gt;&lt;/textarea&gt;
                  &lt;div v-else class="full-width" style="text-align: center; padding: 50px 25px; background-color: #f3f9ec; border: 1px solid #aaa;"&gt;
                      &lt;p class="full-width" style="font-size: 2em"&gt;File Uploaded!&lt;/p&gt;
                      &lt;p&gt;
                          &lt;button class="btn btn-sm btn-default" type="button" v-on:click="clearFile"&gt;
                              &lt;span class="glyphicon glyphicon-remove"&gt;&lt;/span&gt;
                              Clear file
                          &lt;/button&gt;
                      &lt;/p&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="row"&gt;
                  &lt;div class="col-xs-8" style="font-size: 2em" v-bind:class="{'not-visible': !(form.content.length || form.fileContentSample.length)}"&gt;
                      &lt;span class="text-muted"&gt;Language: &lt;/span&gt;
                      &lt;span class="text-success" v-if="isValidLanguage &amp;&amp; !loading"&gt;{{catalog.languages[form.language]}}&lt;/span&gt;
                      &lt;span class="text-info" v-else-if="form.wordCount &gt; 0 &amp;&amp; loading"&gt;Verifying...&lt;/span&gt;
                      &lt;span class="text-danger" v-else-if="form.wordCount &gt; 0 &amp;&amp; !loading"&gt;Not English&lt;/span&gt;
                  &lt;/div&gt;
                  &lt;div class="col-xs-4 text-right" style="font-size: 2em"&gt;
                      &lt;span class="text-muted"&gt;Words:&lt;/span&gt;
                      &lt;span class="text-success" v-if="form.wordCount &gt; 0"&gt;{{form.wordCount}}&lt;/span&gt;
                      &lt;span class="text-danger" v-else&gt;0&lt;/span&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;br /&gt;&lt;br /&gt;
              @*&lt;h4 class="text-center text-muted" style="margin-bottom: 13px; font-size: 1.7em;"&gt;&lt;i&gt;Choose Service:&lt;/i&gt;&lt;/h4&gt;*@
              &lt;div class="row"&gt;
                  &lt;div class="col-xs-6"&gt;
                      &lt;button type="button" v-on:click="setService('translation')" class="btn-service" v-bind:class="{'selected': form.service == 'translation'}" :disabled="!isValidLanguage"&gt;
                          &lt;span class="glyphicon glyphicon-refresh"&gt;&lt;/span&gt;
                          &lt;span&gt;Translation&lt;/span&gt;
                          &lt;div class="sticker-orange"&gt;
                              &lt;span&gt;${{price.translation.new}}&lt;/span&gt;
                              &lt;span class="muted"&gt;was ${{price.translation.old}}&lt;/span&gt;
                          &lt;/div&gt;
                      &lt;/button&gt;
                  &lt;/div&gt;
                  &lt;div class="col-xs-6"&gt;
                      &lt;button type="button" v-on:click="setService('proofreading')" class="btn-service" v-bind:class="{'selected': form.service == 'proofreading'}" :disabled="!isValidLanguage"&gt;
                          &lt;span class="glyphicon glyphicon-search"&gt;&lt;/span&gt;
                          &lt;span&gt;Proofreading&lt;/span&gt;
                          &lt;div class="sticker-orange"&gt;
                              &lt;span&gt;${{price.proofreading.new}}&lt;/span&gt;
                              &lt;span class="muted"&gt;was ${{price.proofreading.old}}&lt;/span&gt;
                          &lt;/div&gt;
                      &lt;/button&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;br /&gt;&lt;br /&gt;
              &lt;div class="bg-light-gray section-padding text-center"&gt;
                  &lt;div class="checkbox" style="margin-bottom: 15px; font-weight:bold;"&gt;
                      &lt;label&gt;
                          &lt;input type="checkbox" value="true" v-model="form.urgent" :disabled="!isFormValid"&gt; 2 Days delivery ($10)
                      &lt;/label&gt;
                  &lt;/div&gt;
                  &lt;p class="lead"&gt;
                      Total: &lt;strong&gt;${{price.total}}&lt;/strong&gt;
                  &lt;/p&gt;
                  &lt;button type="button" v-on:click="checkFormValid" class="btn btn-lg btn-primary" style="font-size:larger; padding: 15px 30px;" :disabled="!isFormValid"&gt;
                      &lt;span class="glyphicon glyphicon-ok-circle"&gt;&lt;/span&gt;
                      Pay Now
                  &lt;/button&gt;
              &lt;/div&gt;
              &lt;br /&gt;&lt;br /&gt;
              &lt;transition name="slide-down" appear mode="out-in"&gt;
                  &lt;div v-show="isFormValid &amp;&amp; isPayNowClicked"&gt;
                      &lt;div class="form-group"&gt;
                          &lt;label for="name" class="col-sm-offset-2 col-sm-2 control-label"&gt;Name:&lt;/label&gt;
                          &lt;div class="col-sm-8"&gt;
                              &lt;input type="text" v-model="form.name" ref="txt_name" class="form-control" name="name" placeholder="Your Name"&gt;
                              &lt;span class="text-danger" v-if="!userInfoStatus.name.valid &amp;&amp; userInfoStatus.name.dirty"&gt;Please enter a valid name.&lt;/span&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="form-group"&gt;
                          &lt;label for="email" class="col-sm-offset-2 col-sm-2 control-label"&gt;Email:&lt;/label&gt;
                          &lt;div class="col-sm-8"&gt;
                              &lt;input type="email" v-model="form.email" class="form-control" name="email" placeholder="Email address"&gt;
                              &lt;span class="text-danger" v-if="!userInfoStatus.email.valid &amp;&amp; userInfoStatus.email.dirty"&gt;Please enter a valid email address.&lt;/span&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;br /&gt;
                      &lt;div class="text-center"&gt;
                          &lt;strong style="margin-bottom: 17px; font-size: 1.7em;"&gt;Pay with&lt;/strong&gt;
                          &lt;br /&gt;
                          &lt;div class="btn-group-lg"&gt;
                              &lt;button class="btn btn-lg btn-primary" type="button" v-on:click="submit('paypal')" :disabled="!isUserInfoValid"&gt;Paypal&lt;/button&gt;
                              &lt;button class="btn btn-lg btn-primary" type="button" v-on:click="submit('square')" :disabled="!isUserInfoValid"&gt;Square&lt;/button&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/transition&gt;
          &lt;/form&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  @Scripts.Render("~/bundles/axios")
  @Scripts.Render("~/bundles/vue")
  @Scripts.Render("~/bundles/site")
  </code></pre>
  
  <p>The error:</p>
  
  <blockquote>
    <p>"The parameter conversion from type 'System.String' to type
    'testapp.Models.Service' failed because no type converter can convert
    between these types."</p>
  </blockquote>
  
  <p><a href="https://i.stack.imgur.com/xor6f.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/xor6f.jpg" alt="enter image description here"></a></p>