[英]pass ID when button is clicked to Action link
我想在點擊按鈕/網址時為ID指定一個特定值。
這樣我就可以通過將id傳遞給action鏈接來顯示基於此id的動態列表。
我的代碼示例(按鈕)
<a class="" href="/LaborerSearchByName/Index">
<img src="/Content/images/b7.png" id="b7"
onclick="bb7();"
onmouseover="bigImg(this)"
onmouseout="normalImg(this)">
</a>
呼吁行動鏈接
@Html.Action("Menu", "MenuItem", new { id = "MenuId"})
"MenuId"
必須基於單擊哪個按鈕的動態值。
這是我的解決方案,使用Html.ActionLink() -
@Html.ActionLink("Menu Text", "Menu" ,"MenuItem", new { id = "MenuId" }, new { @id = "MenuId" })
然后說你有像這樣的圖像控制 -
<img src="/Content/images/b7.png" id="b7"/>
然后你有簡單的JQuery腳本以這種方式替換查詢字符串 -
<script>
$(document).ready(function () {
$("#b7").click(function () {
$("#MenuId").attr("href","/MenuItem/Menu/" + this.id);
});
});
</script>
在上面的腳本中,當您單擊圖像元素時,其id(b7)將用於制定錨標記URL。 所以現在單擊圖像時,將使用JQuery將新URL分配給客戶端的錨標記。 所以最后的網址應該是這樣的 -
/MenuItem/Menu/b7
更新:根據您的評論,我將介紹如何使用JQUERY AJAX通過參數發出GET請求並將結果返回到UI。
假設你有一個返回Json的控制器 -
public JsonResult GetJson(string MenuId)
{
List<string> urls = new List<string>();
urls.Add("https://google.com");
urls.Add("https://bing.com");
return Json(urls, JsonRequestBehavior.AllowGet);
}
然后,您可以通過以下方式使用JQuery Ajax按鈕單擊調用此控制器操作。 在您的實現中,您應該獲得動態值而不是輸入文本控件。 出於演示目的,我使用輸入文本獲取值並將其傳遞給控制器操作。
<input type="text" id="Menu" />
<a href="#" id="ClickMe">Click me</a>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function () {
$("#ClickMe").click(function () {
var o = new Object();
o.MenuId = $("#Menu").val();
jQuery.ajax({
type: "POST",
url: "@Url.Action("GetJson")",
dataType: "json",
contentType: "application/json; charset=utf-8",
data: JSON.stringify(o),
success: function (data) {ou parse data
// This is how we parse returned json string
$.each(data, function (i, item) {
alert(data[i]);
});
},
failure: function (errMsg) { alert(errMsg); }
});
});
});
</script>
運行代碼時,您應該看到以下視圖 -
輸入值並單擊錨標記時 -
結果,您將解析所有結果 -
你可以使用你的函數onclick="bb7(this);"
來傳遞this
onclick="bb7(this);"
然后在JavaScript部分中使用函數中的setAttribute
: bb2(this){this.setAttribute("id","someID");}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.