1. 程式人生 > >.net裡如何很好的使用cs頁面,js檔案與aspx頁面裡的各個引數相互使用

.net裡如何很好的使用cs頁面,js檔案與aspx頁面裡的各個引數相互使用

今天講一下如何很好的操控對於cs頁面與aspx頁面的引數的很好的利用的問題:很多和我一樣開發的碼農在開發的過程中會遇到,一些引數想使用但是不知道怎麼使用的時候,這裡我把我遇到的一些情況和大家分享一下,如果有爭議,可以留言指出,再次先謝謝了。

首先我們都知道,在aspx頁面一些input,radio,select都有id和name兩個基本屬性有時候前端在切頁面的時候,順便加上了,有的就忘了加,這時候我們可以根據id,來作為判斷的標準可以很好的使用該屬性的值,比如說:

<input type="text"  name="title" id="title" value="hello" maxlength="60">

這是一個簡單的輸入框,我們可以清晰的看出,裡面已經有了id和name,這時候,比如說,我們寫的js裡需要用到這個input裡的值,我們可以這樣寫:

//function add(){

//var text=$("#title").val();

//}

這樣,我們將這個aspx頁面的id為title的裡面的值賦予了剛才定義的text,這裡text的值就為hello。

第二種情況:

<div class="indentBottmo">
<ul class="site">
         <% for (int i = 0; i<a.Rows.Count;i++ )
               {%>
<li <%if(a.Rows[i]["if_top"].ToString()=="1"){ %>class="siteSelect"<%}else{%><%}%> id="selectAddress" data-id="<%=a.Rows[i]["id"].ToString() %>" data-lid="<%=a.Rows[i]["userid"].ToString() %>" onclick ="ChangeSendAddress(this)">
<span>寄送至</span>
<p><%=a.Rows[i]["area"].ToString() %>&nbsp;&nbsp;<%=a.Rows[i]["address"].ToString() %>(<%=a.Rows[i]["username"].ToString() %>&nbsp;&nbsp;收)</p>
<h4><%=a.Rows[i]["mobile"].ToString() %>&nbsp;&nbsp;<%if(a.Rows[i]["if_top"].ToString()=="0"){ %><%}else{%>預設地址<%}%></h4>
<nav data-id="<%=a.Rows[i]["id"].ToString() %>" id="<%=a.Rows[i]["userid"].ToString() %>" onclick="ChangeAddress(this)" >修改本地址</nav>
 </li>
               <% }%>
<span onclick="CleanFile()">使用新地址</span>
</ul>
</div>

這是一個常見的購物網站,買家選擇收貨地址的地方,這裡實現的功能是,點選“修改本地址”的時候,會將引數帶到一個彈窗框裡,以便使用者修改這個選擇的地址的資訊。這裡我們就先將邏輯順序理解清楚:

點選修改地址---彈出層-----修改完資訊,點選儲存----修改完成。

我們可以看到,在for迴圈的li標籤裡有一個onclick事件這個事件是在js裡寫好的一個方法,現在要得到兩個引數,一個是使用者的id和使用者收貨地址的id,來查詢本次選擇的這個地址的詳細資訊,這裡看出在方法的括號裡有一個this,這個的意思是說,我可以用這個標籤裡的資料,比如data-id,data-lid等。

js裡是這樣寫的:

function ChangeAddress(obj) {//
    var addressid = $(obj).attr("data-id");//獲取data-id的值,並且賦值給addressid
    var userid = $(obj).attr("id");
    $.ajax({
        url: "/a/a/a.aspx", // 後臺請求路徑
        dataType: "json",
        data: {
            addressid: aid, userid: uid // 獲取輸入框內容
        },
        success: function (data) {//如果調取介面成功,將接口裡面的值賦值給這個呼叫了本方法的頁面的對於的id的標籤的值
            $("#pr1").val(data.province);//將省名稱賦值給這個頁面的這個id為pr1的標籤的值。下面的同樣,自己理解
            $("#ci1").val(data.city);
            $("#co1").val(data.county);
            $("#address").val(data.address);
            $("#postcode").val(data.postcode);
            $("#accept_man").val(data.accept_man);
            $("#accept_mobile").val(data.accept_mobile);
            $("#addressid").val(data.addressid);
            $("#setId").val(data.if_top);
            layer.open({//這是一個彈窗效果,當資料接收成功了,同時將彈窗彈出來,這樣就在視覺效果上感覺時點選修改地址,彈出彈窗,彈窗裡的對應的標籤都已值。
                type: 1,
                title: false,
                closeBtn: 0,
                shadeClose: true,
                area: ['740px', '500px'],
                content: $('.increase')
            });
            new locationCard({
                ids: ['pr1', 'ci1', 'co1']
            }).init();
            new locationCard({
                ids: ['pr2', 'ci2', 'co2']
            }).init();
        },
        error: function () { console.log("錯啦"); }
    });
}

3.有的時候如果沒有id,或者有id,但是這個id是在div,span等眾多標籤裡,想用但是又怕使用的時候定義的不準確,或者好多地方都引用了眾多的樣式,導致指定不明確的情況,這樣的情況我是這麼處理的:

這裡會用到第二種情況裡的點選購買按鈕的js功能:

function BuyProduct() {//
    var addressid = $(".indentBottmo .site").children("li.siteSelect").attr("data-id");     //這裡獲取的是:class樣式為’ .indentBottmo’ 標籤裡的class樣式為’ .site’ 標籤裡的子li標籤中class樣式為‘ .siteSelect’ 的data-id裡的值。
    var userid = $(".indentBottmo .site").children("li.siteSelect").attr("data-lid");
    var shman = "";//收貨人
    var address = "";//收貨地址
    var mobile = "";//收貨人手機號
    var pid = $("#pid").val();//使用的代金券
    var ifbill = 0;//1開發票
    var use_djq = $(".dikou .aeduction").children("#aeductionId").attr("data-id");//1.使用代金券
    if (use_djq != 0) {
        use_djq = 1;
    }
    else { use_djq = 0;}
    var billhead = 0;//1個人、2單位
    var company = $("#importInput").val();//公司名稱
    var company_name="公司"
    if (company.indexOf(company_name)!=-1)
    {
        billhead = 2;
        ifbill = 1;
    }
    else if (company != "") {
        billhead = 1;
        ifbill = 1;
    }
    else { billhead = 0;}
    var prodnum = $("#numberSop").val();//購買數量


    $.ajax({
        url: "/a/a/a.aspx", // 後臺請求路徑
        dataType: "json",
        data: {
            aid: aid, userid: userid // 獲取輸入框內容
        },
        success: function (data) {
            //console.log(data);
            address= data.province + " " + data.city + " " + data.county + " " + data.address;
            shman= data.accept_man;
            mobile = data.accept_mobile;
            //console.log(addressid);
            //console.log(userid);
            //console.log(shman);
            //console.log(address);
            //console.log(mobile);
            //console.log(pid);
            //console.log(use_djq);
            //console.log(billhead);
            //console.log(prodnum);
            //console.log(ifbill);
            if (addressid != "0" && userid != "0" && shman != "" & address != "" & mobile != "" & pid != "0"  & billhead != "0" & prodnum != "0") {
                window.location.href = "/a/a.aspx?pid=" + pid + "& uid =" + userid + "&shman=" + shman + "&address=" + address + "&mobile=" + mobile + "&use_djq=" + use_djq + "&title=" + billhead + "&corpname=" + company + "&prodnum=" + prodnum + "&invoice="+ifbill+"";
            } else { console.log("系統錯誤,錯誤程式碼:1-01"); }
        },
        error: function () { console.log("系統錯誤,錯誤程式碼:1-02"); }
    });

4.有時候js裡要使用cs頁面的值,這種情況不能直接使用,而是隻能在aspx頁面定義一個隱藏的標籤,我比較喜歡用一個隱藏的標籤,然後讓它的值為cs頁面的值,然後在js裡引用這個頁面裡的這個input的值,就可以了。

5.如果一個js裡要用另一個js裡的資料,而且第一個js要在成功的情況下才呼叫,則可以巢狀使用js並賦予對應的引數,即可達到這個目的。