.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() %> <%=a.Rows[i]["address"].ToString() %>(<%=a.Rows[i]["username"].ToString() %> 收)</p>
<h4><%=a.Rows[i]["mobile"].ToString() %> <%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並賦予對應的引數,即可達到這個目的。