[英]Pass javascript variable through ajax actionlink to load partial view
I am new to MVC and JQuery. 我是MVC和JQuery的新手。
I have created one table with JQuery but I don't know how we add one actionlink
in each row, and also, I need to call one partial view on the onclick
event by passing the Java script variable to the partial view. 我已创建了一个表,JQuery的,但我不知道我们如何添加一个
actionlink
每一行,而且,我需要调用的一个局部视图onclick
由Java脚本变量传递到局部视图事件。
My code is given bellow: 我的代码如下所示:
function loadData(data) {
var tab = $('<table class="myTable"></table>');
var thead = $('<thead></thead>');
thead.append('<th>Id</th><th></th>');
thead.append('<th>Username</th>');
tab.append(thead);
$.each(data, function (i, val) {
var trow = $('<tr></tr>');
trow.append('<td>' + val.empID + '</td>');
trow.append('<td>' +"" + '</td>');
trow.append('<td>' + val.empName + '</td>');
trow.append('<td>' + '@Html.ActionLink("Edit", "Edit", new { id = val.empID })' + '</td>');
tab.append(trow);
});
here I got one error: 在这里我得到一个错误:
val is not in the current context
val不在当前上下文中
I checked a lot of similar post here and I understand one part of the code is run at the server (the Url.Action
part) and the val.empID
is only available once the code reaches the client browser. 我在这里检查了很多类似的帖子,并且我了解代码的一部分在服务器上运行(
Url.Action
部分),并且val.empID
仅在代码到达客户端浏览器后可用。
but I need to load one partial view on click if there is any alternate way to do this...... 但是如果有其他替代方法,我需要在单击时加载一个局部视图……
You can't pass client-side JavaScript variable to Server Side Helper function. 您不能将客户端JavaScript变量传递给服务器端帮助器函数。
As @Html.ActionLink
create an anchor tag, you can create it programatically. @Html.ActionLink
创建锚标记后,您可以以编程方式创建它。 Here's an example: 这是一个例子:
function loadData(data) {
$.each(data, function(i, val) {
//Create Static URL and use -1 as placeholder
var url = '@Url.Action("actionName", "controllerName", new { id = -1 })';
//replace the place holder with the value which you want
url = url.replace('-1', val.empID);
//Generate the anchor
var anchor = '<a class="myClass" href="' + url + '">Edit</a>'
//Append anchor
trow.append('<td>' + anchor + '</td>');
tab.append(trow);
});
}
$(document).on('click', '.myClass', function(evt) {
evt.preventDefault();
//Code to load your partial view
$('#myDiv').load(this.href);
});
You can't pass jquery variable to server control change your 您不能将jquery变量传递给服务器控件来更改您的
trow.append('<td>' + '@Html.ActionLink("Edit", "Edit", new { id = val.empID })' + '</td>');
To 至
trow.append('<td>' + '<a href='#' class='preview' data-id='+val.empId+'></a>' + '</td>');
Add class in anchor tag preview
and add one attribute data-id
在锚标记
preview
添加类并添加一个属性data-id
$('#tbId').on("click", ".preview", function (e) {
e.preventDefault();
var id = $(this).attr("data-id");
var url = '@Url.Action("Edit", "Edit")' + '/' + id;
$.get(url, function (data) {
if (data != "") {
$('.preview-body').html(data); // it is my modal
$('#myModal').modal("show"); // show preview in my modalbox
}
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.