电商网站的不同产品实现不同价格

[coffeeroy2]

在网站中同一产品的不同尺寸对应不同价格，改变价格的JavaScript函数如下

   function changePrice(id)
        {
            var price = $("#" + id + "price").html();

            $("#spPrice").html("￥"+ parseFloat(price));
        }

控件的代码如下：

  <div class="mall_detailwrite_price">
<p>售价：<span id='spPrice'>￥<%= Price %></span> <del style="line-height: 24px;">原价:￥<%= BefroePrice %></del></p>
    </div>
    <div class="mall_detailwrite_xz">
    	<p>选择型号：<%= Size %><input  id="hidSize"  class="hid" type="hidden" /></p>
    </div>

想要实现选择不同型号的时候，产品的价格随之变动，这个该怎么绑定监听呢？求前辈指教，不胜感激~

[娃都会打酱油了]

<%= Size %>

这段绑定出来的html是什么样子的

[以专业开发人员为伍]

这里有一个 mvvm 设计模式的例子：http://knockoutjs.com/examples/cartEditor.html

[以专业开发人员为伍]

你可以看到有几个编程设计最本知识点： 1. View 代码可以千奇百怪，随时调整，但是跟数据部分是独立的。因此才能保证不断重构 View部分，让它越来越好用。 2. ViewModel 部分首先获取了（或者运行时随时动态追加）商品二级选单的信息，以及价格。这些都是动态绑定到每一录入行的，而不是在页面上由asp.net 服务器端写死的。也就是说，不管你的<div>有2行还是200行，都是前端动态增加的，不是预先用 <%= Price %> <%= Size %> 这类东西写死的。 3. 不论是随时计算每一行小计、总合计，还是删除和增加一行，你会看到，只要改变 ViewModel 中的数据那么View 就自动改变了。而你是在一大堆类似 changePrice(id) 这样的函数中将 js 与 html 混合起来，因此 View 绑架了业务处理代码，业务处理代码中的逻辑计算算法被 html 分割得支离破碎。

[coffeeroy2]

引用 1 楼 starfd 的回复:

<%= Size %>

这段绑定出来的html是什么样子的

是根据每件商品的尺寸进行显示的，假如商品有18，21，,25三个尺寸，就显示三个；假如只有18一个尺寸，就只显示一个尺寸

[娃都会打酱油了]

我要html，不是展示的样子……

[coffeeroy2]

引用 5 楼 starfd 的回复:

我要html，不是展示的样子……

如下所示：

 IList<G_ProModel> gpm = new List<G_ProModel>();
 S_ProModel spm = new S_ProModel();

if (!object.Equals(Request.QueryString["id"], null))
                {
                    id = Convert.ToInt32(Request.QueryString["id"]);
                    gpm = spm.GetProModelList(0, "proID=" + id + " and CategoryID=1", "SizeOrDate", 1);

                    for (int i = 0; i < gpm.Count; i++)
                    {
                        Size += "<span>" + gpm[i].SizeOrDate + "</span>";
                    }
}

[wanghui0380]

话说你要区分好前后台。 如果我说你看看京东的url，你每点击一次的url都在变化，并且页面重新刷新了一遍，那么你还困惑么。那些东西自然是从url里传递的参数，同时你得到了参数，根据这些参数重新计算了价格 然后再看你想象的东西，你不想刷新页面，你只想局部修改一下价格，我们说<span id='spPrice'>，你是知道span的id滴，jquery可以很简单的替换他，至于你说如何取得价格，我们说ajax把所有参数隐藏提交给服务器，得到价格就行 最后在说一下老p提的东西，js 的mvvm，这也是好东西，因为他符合程序员的思维方式，逻辑就是逻辑，模板就是模板，我不需要管怎么刷新他，你点击那个size会触发ajax获得price，并修改price的值，他则自动修改price的显示

[下雨天抽烟]

你可以用ajax 来实现啊，点击一次，将规格数据post 到服务器，获取对应的价格数据。

[coffeeroy2]

各位大神能不能看看我的问题，数据什么的我都已经得到了，只不过不知道怎么绑定，能不能照顾一下我这个新手