c# - How to bind dynamic text to a viewmodel other than using a hidden HTML control -

how bind dynamic text view model?

i have product page. each variation of product has specific sku (stock keeping unit). example (these examples):

• green shirt have sku of greenshirt-001
• blue shirt have sku of blueshirt-001

when page loads first time load different colours product (shirt) , default sku, lets default sku greenshirt-001. user see greenshirt-001 text on page.

when user selects colour, example blue shirt, need go , stuff on server , display information blue shirt. blueshirt-001 displayed text on page.

there add cart button on page. when user clicks button want variation of product added shopping cart. retrieve sku being displayed user.

what best way of displaying sku user , retrieving when form posted? can't think of way display html control , retrieve value on post other using hidden control?

@using (html.beginform("details", "product", formmethod.post, new { role = "form" })) {      <div class="product-details">           <div class="sku">item #: @model.stockkeepingunit.sku</div>           <div>@html.hiddenfor(m => m.stockkeepingunit.sku)</div>      </div>      <div class="actions">           <button type="submit" class="btn btn-primary">primary</button>           <button type="button" class="btn btn-default" id="test-button">default</button>      </div> } 

to make life easy added button id of test-button. testing purposes before write server sided code. button changes sku else. example change greenshirt-001 blueshirt-001. changing on hidden control.

is there no way can ditch hidden control , bind display control?

here action method httpget:

public async task<actionresult> details(int productid) {      productviewmodel model = await producttask.detailsasync(productid);      if (model == null)      {           throw new httpexception(404, "404");      }       return view(model); } 

and here partial code action method on httppost:

[httppost] public actionresult details(productviewmodel model) {      if (!modelstate.isvalid)      {           return view(model);      }       //      return view(model); } 

and jquery code change skus:

<script>      $(document).ready(function () {           $('#test-button').click(function () {                $("#stockkeepingunit_sku").val("blueshirt-001");           });      }); </script> 

try using css-styled (readonly) textbox. example remove border , make background same surrounding space. way shown user (i understand intended), , posted form server.