利用getJson+ashx实现商品属性选择(C#)

Json 前端之家
前端之家收集整理的这篇文章主要介绍了利用getJson+ashx实现商品属性选择(C#)，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

1、前台页面（注意引入jQuery框架）：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="shopDetail.aspx.cs" Inherits="shopDetail" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<Meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<Meta charset="utf-8"> 
<title>宝贝详情</title> 
<Meta content="yes" name="apple-mobile-web-app-capable">
 <Meta content="black" name="apple-mobile-web-app-status-bar-style"> 
 <Meta name="format-detection" content="telephone=no"> 
 <style>
    .liselect a
    {
        border: 2px solid #DF0001;
        Box-shadow: 1px 1px 3px 0 rgba(0,0.6);
        margin: -1px;
    }
</style>
  <Meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
  <link rel="stylesheet" type="text/css" href="css/index-black.css" />
  <style type="text/css">
img {width:expression(this.width>300?"300px":this.width+"px");}
</style>

<%--注意引入JQuery框架--%>
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
 

<!--//商品属性选择器开始-->
<script type="text/javascript">
var imgmultbf="";//多图备份
$(document).ready(function(){

$(".product_size").mouSEOut(function(){ $(this).removeAttr("style"); })
$(".product_size").mouSEOver(function(){$(".product_size").attr("style","border:1px solid #fcbb29;background:#FFF3D9;")});

$(".restrict ul li").not(".litit").each(function(i){ $(this).click(function()
{ 
    
   $(this).siblings().not(".litit").children("img").remove();
   $(this).siblings().not(".litit").removeAttr("class");
   $(this).attr("class","liselect");
   $(this).append($("<img class=\"sico\" src=\"Images/ii1.gif\" />"));
   $("#divnoSelect").hide();
   $("#divSelect").show();
   var spenames="";
   var isselect=0; //规格选择的个数
   var prodspec="";//选择的规格值（所有已勾选的规格值）
   var nowprodspec="";//当前选择的规格值
   var prodguid=$("#HiddenFieldGuid").val();  //商品guid
   var memloginid=$("#HiddenFieldMemloginID").val();//会员loginid
   if(imgmultbf=="")
   {
    imgmultbf=$("#tb_gallery").html();//多图备份
    }
   //开始处理多图(使用getJson+ashx实现数据交互，但ajaxPro2与getJson不能同时使用)
     nowprodspec=$(this).attr("spc");
     params = {"prodguid":prodguid,"yz":"shopnum1ntbl","loginid":memloginid,"spec":nowprodspec,"type":"img"}; 
      $.getJSON("/Api/shopproductspec.ashx",params,function(json){
     
             if(json[0].imgsrc!=null)
             {
           //绑定选择规格后的大图
            $("#ProductDetail_ctl00_RepeaterData_ctl00_ProductImgurl").attr("src",""+json[0].imgsrc+"");
            $("#ProductDetail_ctl00_RepeaterData_ctl00_ProductImgurl").attr("jqimg",""+json[0].imgsrc.replace("s_","")+"");
            //绑定属性的缩略图
            $(".list-h li").remove();
            
            
$.each(json,function(i) {
 if(json[i].imgsrc!="")
    {
    $(".list-h").append($("<li class=\"tb_diply\"></li>").append($("<div class=\"tb-pic tb-stn\"></div>").append($("<a></a>").append($("<img />").attr("src",json[i].imgsrc)))))
    }
});
    //给缩略图加宽度
           var width_l=parseInt(json.length)*60;
//           $(".list-h").attr("style","");		
//				  $(".list-h").css({
//						"width":""+width_l+"px"
//					});
             }
             else
             {
  
              $("#tb_gallery").html(imgmultbf);

             }
				$("#tb_gallery img").bind("mouSEOver",function(){
					var src=$(this).attr("src");
					$("#spec-n1 img").eq(0).attr({
						src:src.replace("\/n5\/","\/n1\/"),jqimg:src.replace("\/n5\/","\/n0\/")
					});
					$(this).parent().parent().parent().addClass("tb_selected");
				}).bind("mouSEOut",function(){
		            $(this).parent().parent().parent().removeClass("tb_selected");
				});	
             });
   //处理多图结束
   //开始处理其它效果
   var juls=$(".restrict ul")  
    juls.each(function(i){
if($(this).children("li").hasClass("liselect"))
        {
           isselect++;
           spenames+="\""+$(this).children(".liselect").find("span").html()+"\""+"  ";
           prodspec=prodspec+$(this).children(".liselect").attr("spc")+";";
           
           // 添加的
           document.getElementById('<%=HiddenFieldGuiGe.ClientID %>').value=prodspec;
           
         }
  
     });
     $("#divSelect .selected").html(spenames);  //选择了  
     
     
     
    //开始处理商品库存
    if(juls.length==isselect)
    {
        //使用getJson+ashx
        prodspec=prodspec.substring(0,prodspec.length-1);
        params = {"prodguid":prodguid,"spec":prodspec,"type":"prodspec"}; 
        $.getJSON("api/productspec.ashx",function(json){
        //alert('aa');
             if(json!=null)
             {
                $("#LabelShopPrice").text(json[0].price);//商品价格(jQuery格式)
                $("#LabelRepertoryCount").text(json[0].RepertoryCount);//库存(jQuery格式)
                  
             } });
       }
    
     }
     
    
     
     });})});

function  checkSubmit()  //检查数量
{
 ///检查库存
 var buyNum=document.getElementById("<%=TextBoxBuyNum.ClientID %>").value;
 var numyz=/^[0-9]{1,9}$/;
if(!numyz.exec(buyNum))
{
   alert("购买数量格式不正确!")
   document.getElementById("<%=TextBoxBuyNum.ClientID %>").get(0).focus();
   return false;
}

 var allcout=$("#LabelRepertoryCount").text();
 if(parseInt(buyNum)>=parseInt(allcout))
 {
   alert("库存不足!")
   return false;
 }
 
 //检查规格
// var juls=$(".restrict ul")  
var juls=$(".restrict ul")  
 var spenames="";
    juls.each(function(i){
     if($(this).children(".liselect").length==0)
     {

       spenames+="\""+$.trim($(this).children(":first-child").find("span").text())+"\""+" ";
     }
  
     });
 if(spenames!="")
 {
   alert("请选择  "+spenames);
   return false;
 }
 
}

</script>


<!--购买数量加减-->

<script type="text/javascript">

//加
function AddNum()
{
   var BuyNum=parseInt(document.getElementById("<%=TextBoxBuyNum.ClientID %>").value);
   document.getElementById("<%=TextBoxBuyNum.ClientID %>").value=BuyNum+1;
}

function SubNum()
{
   var BuyNum=parseInt(document.getElementById("<%=TextBoxBuyNum.ClientID %>").value);
   if(BuyNum>1)
   {
   document.getElementById("<%=TextBoxBuyNum.ClientID %>").value=BuyNum-1;
   }
}
</script>

</head>
<body>
    <form id="form1" runat="server">
    <div>
     <div class="viewport enableNavbar enableToolbar enableTransition"> 
 <header class="navbar">
 <ul><li>商品详情</li><li>
 <a class="c-btn c-btn-aw" data-id="btn-1387959379238" href="javascript:history.go(-1);"><span>返回</span></a></li>
 <li></li></ul>
 </header>
  <section class="content" style="min-height: 451px;">
  <div class="wrap"><div class="inactive prev" index="0">
  </div>
  <div class="active" index="1" data-fragment="" style="min-height: 451px;">
  <div id="J_detail" style="min-height: 451px;">
  <div id="J_detail_main">
  <div class="dt-slider">
  <div class="dt-slider-cont" style="width: 354px; -webkit-transform: translateZ(0px);"> 
  <ul class="dt-slct-ul" style="-webkit-transform: translate3d(0px,0px,0px); -webkit-backface-visibility: hidden; width: 1416px;"> 
  
   <li style="width:354px" l="1"> 
	<img class="" src="http://localhost:8011<%=pPic%>"> 
	</li> 
	 </ul> 
	 <div class="dt-slider-mask"></div> </div> 
	 <%--<div class="dt-slider-status">  
	 <i class="sel"></i>  <i></i>  <i></i>  <i></i> 
	  </div>--%>
	   <ul class="dts-ul">  <li class="dts-fav"><a href="?type=fav&guid=<%=Guid %>">收藏</a></li> 
	   <li class="dts-faved">已收藏</li> 
	    </ul> </div>
	    <div class="dt-info"><h1 class="dtif-h"><%=pName%></h1> 

	    <ul>  <li class="dtif-p1"> 
	     <ins class="orange">¥<%--<%=sPrice %>--%>
	     <asp:Label ID="LabelShopPrice" runat="server"></asp:Label>
	     </ins><br> <span class="lgray dtif-ps1"><del>¥<%=mPrice %></del></span>   </li>  
	      <li class="dtif-p2 bt lgray"> 
	      <span class="dtifp-l">  库存: 
	      <asp:Label ID="LabelRepertoryCount" CssClass="storage" runat="server"></asp:Label>
                                        <asp:Label ID="Label2" runat="server"></asp:Label> </span> 
	      <%--<span  width=35px>已售<%=saleNum %>笔</span> --%>
	      <span class="dtifp-r">数量:</span>
	      <span  width=100px><span class="decrease" onclick="SubNum();"></span><asp:TextBox ID="TextBoxBuyNum" CssClass="amount_widget" runat="server" Text="1" />
           <span class="increase" onclick="AddNum();"></span>
           <%--<asp:Label ID="LabelUnit" runat="server" Text='<%# ((DataRowView)Container.DataItem).Row["UnitName"] %>'></asp:Label>--%></span> 
	        </li>
	     <li class="dtif-p2 bt lgray"> 
	      <span class="dtifp-l">  <%=GetFeeByProGuid()%>  </span> 
	      <span  width=35px>已售<%=saleNum %>笔</span> 
	      <span class="dtifp-r"><%=address %></span>  </li>  </ul> 
	      
	     </div>

	 <!--商品规格 20140415-->
	 <asp:HiddenField ID="HiddenFieldGuiGe" runat="server" Value="0"></asp:HiddenField>
	  <div class="restrict" id="divShopSpec" runat="server" visible="false" >
           <asp:Repeater ID="RepeaterProductSepc" runat="server" EnableViewState="false" OnItemDataBound="RepeaterProductSepc_ItemDataBound">
                                                <ItemTemplate>
                                                    <dl class="tb_prop clearfix">
                                                        <dt>
                                                            <%#((System.Data.DataRowView)Container.DataItem).Row["SpecificationName"]%>：</dt>
                                                        <dd>
                                                            <ul>
                                                                <asp:Repeater ID="RepeaterProductSepcDetail" runat="server" EnableViewState="false">
                                                                    <ItemTemplate>
                                                                        <li spc='<%#((System.Data.DataRowView)Container.DataItem).Row["SpecDetail"]%>'><a href="javascript:void(0)">
                                                                       <%-- <a href="javascript:View()">--%>
                                                                            <span>
                                                                                <%#((System.Data.DataRowView)Container.DataItem).Row["isImage"].ToString() == "True" ? "<img src='/ImgUpload/" + ((System.Data.DataRowView)Container.DataItem).Row["Image"] + "' width=\"40\" height=\"16\" />" : ((System.Data.DataRowView)Container.DataItem).Row["Name"]%></span></a></li>
                                                                    </ItemTemplate>
                                                                </asp:Repeater>
                                                            </ul>
                                                        </dd>
                                                    </dl>
                                                </ItemTemplate>
                                                <FooterTemplate>
                                                    <div id="divnoSelect" style="clear: both; padding-top: 6px; padding-top: 0px\9;">
                                                        <span style="font-weight: bold; clear: both;">请选择</span>：<span id="spanNoSelect"
                                                            style="font-weight: bold; clear: both;" runat="server"><asp:Label ID="lblSpecName" runat="server" ></asp:Label> </span>
                                                    </div>
                                                    <div id="divSelect" style="clear: both; display: none;">
                                                        <span style="font-weight: bold; clear: both;">已选择</span>：<span class="selected"></span></div>
                                                    </div>
                                                </FooterTemplate>
                                            </asp:Repeater>
                                        </div>
               <div class="dt-action"> <div class="dta-iner">  
            
 </div></div>

 </div>
 </div></div></div><div class="inactive next" index="2"></div><div class="inactive" index="3"></div><div class="inactive" index="4"></div>
     </div><div class="trans"><div></div></div></section>  </div> 
     

<asp:HiddenField ID="HiddenFieldGuid" runat="server" Value="0" />
<asp:HiddenField ID="HiddenFieldMemloginID" runat="server" Value="0" />
    </form>
</body>
</html>

2、后台页面由自己项目决定，省略

3、ashx页面：

<%@ WebHandler Language="C#" Class="productspec" %>

using System;
using System.Web;
using System.Data;
using System.Text;
using mshopClass;

public class productspec : IHttpHandler {
    
    public void ProcessRequest (HttpContext context) {
        context.Response.ContentType = "text/plain";
        string prodguid = context.Request["prodguid"].ToString();
        string memloginid = context.Request["loginid"].ToString();
        string spec = context.Request["spec"].ToString();
        string spectype = context.Request["type"].ToString();
        string sql = "select price,repertorycount from tb1_SpecificationProudct where productGuid='" + prodguid + "' and detail='" + spec + "'";
        DataTable dt = mallCtr.sqlTable(sql);
        StringBuilder tb = new StringBuilder();
        tb.Append(DataTableToJSON(dt));  //DataTabel一定要转化长json格式才能正常返回
        context.Response.Write(tb.ToString());
    }
 
    public bool IsReusable {
        get {
            return false;
        }
    }

    /// <summary>
    /// 将dt转化成Json数据 格式如 table[{id:1,title:'体育'},id:2,title:'娱乐'}]
    /// </summary>
    /// <param name="dt"></param>
    /// <returns></returns>
    public static string DataTableToJSON(DataTable dt)
    {
        StringBuilder jsonBuilder = new StringBuilder();
        jsonBuilder.Append("[");
        for (int i = 0; i < dt.Rows.Count; i++)
        {
            if (i > 0)
                jsonBuilder.Append(",");
            jsonBuilder.Append("{");
            for (int j = 0; j < dt.Columns.Count; j++)
            {
                if (j > 0)
                    jsonBuilder.Append(",");
                jsonBuilder.Append(dt.Columns[j].ColumnName.ToLower() + ": '" + dt.Rows[i][j].ToString().Replace("\t"," ").Replace("\r"," ").Replace("\n"," ").Replace("\'","\\\'") + "'");
            }
            jsonBuilder.Append("}");
        }
        jsonBuilder.Append("]");
        return jsonBuilder.ToString();
    }
    

}

4、效果：

（1）商品属性未选择前：


（2）商品属性选择后：



5、实例下载：利用getJson+ashx实现商品属性选择实例下载

PS：AjaxPro2和getJson+ashx都能实现前后台数据交互，各有优劣，看个人喜好选择。

原文链接：https://www.f2er.com/json/290210.html

猜你在找的Json相关文章

jsonp
　　jsonp需要在页面中添加一个<script>元素，由该元素来从其他服务器加载json数据。...
jsonp跨域
<script> var testApi = "地址"; $.ajax({ url:testApi,//可以不是本地域名...
MVC上的jsonp扩展，解决跨域访问问题
总是有人会遇到跨域问题，然后有个jsonp的解决方案，MVC中代码如下： public class JsonpR...
fastjson反序列化json对象时保留null值的key
最近开发中遇到调用第三方web_api的功能，后端在处理json数据时使用fastjson来做反序列化，...
JsonCpp 的使用
JSON全称为JavaScript ObjectNotation，它是一种轻量级的数据交换格式，易于阅读、编写、解...
jsonp
var newScript = document.createElement(‘script‘); newScript.setAtt...
jsonp 跨域
$.ajax({ url:"http://192.168.100.47:8080/ais-connect/data/newai...
JSONArray 去重
前台说 只能传给我这样的数据 [     {         "labelName":"皮肤颜...
FastJson的坑
1.list中放入同一个对象，会出现内存地址引用{"$ref":"#[0]"}，后台可以识...
fastJson转换对象与字符串
static class TempClass{ private String name; private int age; public String getName(...
HTMLHTML5JavaScriptCSSjQueryBootstrapAngularjsTypeScriptVueDojoJsonElectronNode.jsextjsExpress XMLES6AjaxFlashUnityReactFlexAnt DesignWeb前端微信小程序微信公众号
关闭广告单独headers封装代码提示错误整数正则非0开头跳页出页码antd table提示URL未注册公众号支付vue hash模式iSlider车牌键盘循环图片echarts 双折左右布局DllPlugin对象创建打字游戏圈选两栏云函数蒙版ES2020橱窗无缝滚动轮播色块碰撞组件销毁文档操作