Создание калькулятора на сайте с детализацией счета

Этот пример показывает как можно сделать некий калькулятор стоимости. На входе имеет некоторые параметры, которые выбирает пользователь. 

На выходе пользователь получает стоимость с детализацией. 

Как реализовать такую форму: 

1. Создаем форму с параметрами: p1-p10 (ограничения нет, можно и больше), ставим типы Переключатель, Выбор radio, Список и т.д.. 

2. Прописываем разметку формы: 

<div class="row">
  <div  class="col-12 col-lg-6 col-xl-6">
    <div class="as-panel">
      {form-title}
      {form-subtitle}
      <div class="row">
        <div  class="col-12 col-sm-12 col-md-6 col-lg-6 col-xl-6">
 		{colwithlabel-p1}
     
      {colwithlabel-p3}
       {colwithlabel-p2}
      {colwithlabel-p4}
     
        </div>
        <div  class="col-12 col-sm-12 col-md-6 col-lg-6 col-xl-6">
 {colwithlabel-p6}
      {colwithlabel-p7}
      {colwithlabel-p8}
      {colwithlabel-p9}
      {colwithlabel-p5}
        </div>
      </div>
 {colwithlabel-p10}
     
    </div>
  </div>
  <div  class="col-12 col-lg-6 col-xl-6">
    <div class="as-panel">
     
      <div class="invTotal">
        Выберите параметры на форме...
      </div>

    </div>
  </div>
</div>

Слева мы показываем параметры, справа будет результат вывода (можно сделать и одно под другим). 

3. По событию CheckField мы будем обновлять область .invTotal. Прописываем эту процедуру: 

CREATE PROCEDURE [dbo].[fm_watch_calc_checkItemField]
    @itemID int,	
	@username nvarchar(256),
	@field nvarchar(256),
	@value nvarchar(max), 
    @parameters ExtendedDictionaryParameter readonly
AS
BEGIN
	declare @p1 bit = (select try_cast(value2 as bit) from @parameters where [key]='p1')
    declare @p2 bit = (select try_cast(value2 as bit) from @parameters where [key]='p2')
    declare @p3 nvarchar(128) = (select value2 from @parameters where [key]='p3')
    declare @p4 nvarchar(128) = (select value2 from @parameters where [key]='p4')
    declare @p5 bit = (select try_cast(value2 as bit) from @parameters where [key]='p5')
    declare @p6 nvarchar(128) = (select value2 from @parameters where [key]='p6')
    declare @p7 bit = (select try_cast(value2 as bit) from @parameters where [key]='p7')
    declare @p8 nvarchar(128) = (select value2 from @parameters where [key]='p8')
    declare @p9 nvarchar(128) = (select value2 from @parameters where [key]='p9')
    declare @p10 nvarchar(128) = (select value2 from @parameters where [key]='p10')
    
    declare @p1Cost int = 100, @p2Cost int = 200, @p5Cost int = 300, @p7Cost int = 400
    
    
    
	declare @row nvarchar(max) = '<div class="d-flex justify-content-between"><div>{name}</div><div class="text-right font-weight-bold">{value} руб.</div></div>'
	declare @s nvarchar(max) = '', @total float = 0
	if(@p1 =1) begin 
    	set @s= @s + replace(replace(@row, '{name}', 'Параметр 1'), '{value}', cast(@p1Cost as nvarchar))
        set @total = @total + @p1Cost
	end 
    if(@p2 =1) begin 
    	set @s= @s + replace(replace(@row, '{name}', 'Параметр 2'), '{value}', cast(@p2Cost as nvarchar))
        set @total = @total + @p2Cost
	end     
    if(@p5 =1) begin 
    	set @s= @s + replace(replace(@row, '{name}', 'Параметр 5'), '{value}', cast(@p5Cost as nvarchar))
        set @total = @total + @p5Cost
	end     
    if(@p7 =1) begin 
    	set @s= @s + replace(replace(@row, '{name}', 'Параметр 7'), '{value}', cast(@p7Cost as nvarchar))
        set @total = @total + @p7Cost
	end        
    
	if(len(@p3)>0) begin     
    	set @s= @s + replace(replace(@row, '{name}', 'Параметр 3'), '{value}',@p3)
        set @total = @total + try_cast(@p3 as int)
    end
    if(len(@p4)>0) begin     
    	set @s= @s + replace(replace(@row, '{name}', 'Параметр 4'), '{value}',@p4)
        set @total = @total + try_cast(@p4 as int)
    end
    if(len(@p6)>0) begin     
    	set @s= @s + replace(replace(@row, '{name}', 'Параметр 6'), '{value}',@p6)
        set @total = @total + try_cast(@p6 as int)
    end
    if(len(@p8)>0) begin     
    	set @s= @s + replace(replace(@row, '{name}', 'Параметр 8'), '{value}',@p8)
        set @total = @total + try_cast(@p8 as int)
    end
    if(len(@p9)>0) begin     
    	set @s= @s + replace(replace(@row, '{name}', 'Параметр 9'), '{value}',@p9)
        set @total = @total + try_cast(@p9 as int)
    end
    if(len(@p10)>0) begin     
    	set @s= @s + replace(replace(@row, '{name}', 'Параметр 10'), '{value}',@p10)
        set @total = @total + try_cast(@p10 as int)
    end
    
    set @s= @s + replace(replace(@row, '{name}', 'ИТОГО:'), '{value}',cast(@total as nvarchar))
        
    set @s = '<h2>Детализация счета</h2>' + @s
    declare @id nvarchar(128) =convert(nvarchar(36),  newID())
    declare @content nvarchar(max) = '<div id="'+@id+'">' + @s + '<div>' + 
    '<a href="#" class="btn btn-primary as-print " data-cont="#'+@id+'"><i class="fa fa-print"></i> На печать</a>'
     
    -- SELECT 1
	select '' Msg, 1 Result, '' ShowContainer, '' HideContainer, '' RefreshContainer, 
		'.invTotal' ReplaceContainer, @content ReplaceContainerHtml 
END

В ней мы извлекаем параметры формы и вычисляем сумму, строим разметку области с выводом стоимости. 

Также здесь есть кнопка Печать, которая выводит на печать содержимое детализации.