Javascript 使用jquery将数据绑定到div时，在其中一列中添加链接_Javascript_Jquery_Json_Asp.net Mvc

Javascript 使用jquery将数据绑定到div时，在其中一列中添加链接

javascript jquery json asp.net-mvc

Javascript 使用jquery将数据绑定到div时，在其中一列中添加链接,javascript,jquery,json,asp.net-mvc,Javascript,Jquery,Json,Asp.net Mvc,我通过json将数据绑定到div中。现在我想要的是，列是用它的数据动态生成的。因此，响应中有一列的名称为APPLICATIONNAME，其中将有a标记。链接是用下面的代码创建的 <a href="@Url.Action("Index/" + SMenu.id, "Application")" class="menuCall"> 以下代码将对您有所帮助 success: function (data) {

我通过

json

将数据绑定到

div

中。现在我想要的是，列是用它的数据动态生成的。因此，响应中有一列的名称为

APPLICATIONNAME

，其中将有

标记。链接是用下面的代码创建的

<a href="@Url.Action("Index/" + SMenu.id, "Application")" class="menuCall">

以下代码将对您有所帮助

success: function (data) {
            var html = '';

            if (data == "") {
                $("#dvTable").html('No Data Found');
            }

            else {
                 var rData = JSON.parse(data);
                 var html = '<div class="table-responsive"><table class="table table-blue">';
                 for (var key in rData) {
                    var row = rData[key];
                    if (key == 0) {
                        html += '<tr>';
                        for (var key2 in row) {
                            html += '<th>';
                            html += key2;
                            html += '</th>';
                        }
                        html += '</tr>';
                    }
                 }

                $.each(rData,function(index,value){
                        html+="<tr><td>"+value['APP_MST_ID']+"</td><td><a href='/Application/Index/"+value['APP_MST_ID']+"' class='menuCall'>"+value['APPLICATIONNAME']+"</a></td><td>"+value['URL']+"</td><td>"+value['PROJECTNO']+"</td><td>"+value['VSSFOLDERLOC']+"</td><td>"+value['SPOCUSER']+"</td><td>"+value['REQUESTEDBY']+"</td><td>"+value['DELIVERYMANAGER']+"</td></tr>";                 
                });

               html += '</table></div>';
               $("#dvTable").append(html);
            }
        }

成功：函数（数据）{
var html=''；
如果（数据==“”）{
$（“#dvTable”）.html（'未找到数据'）；
}
否则{
var rData=JSON.parse（数据）；
var html=''；
for（rData中的var键）{
var行=rData[键]；
如果（键==0）{
html+=''；
用于（第行中的var键2）{
html+=''；
html+=key2；
html+=''；
}
html+=''；
}
}
$.each（rData、函数（索引、值）{
html+=“”+value['APP_MST_ID']+“”+value['URL']+“”+value['PROJECTNO']+“”+value['VSSFOLDERLOC']+“”+value['SPOCUSER']+“”+value['REQUESTEDBY']+“”+value['DELIVERYMANAGER']+“”；
});
html+=''；
$（“#dvTable”）.append（html）；
}
}

以下代码将对您有所帮助

success: function (data) {
            var html = '';

            if (data == "") {
                $("#dvTable").html('No Data Found');
            }

            else {
                 var rData = JSON.parse(data);
                 var html = '<div class="table-responsive"><table class="table table-blue">';
                 for (var key in rData) {
                    var row = rData[key];
                    if (key == 0) {
                        html += '<tr>';
                        for (var key2 in row) {
                            html += '<th>';
                            html += key2;
                            html += '</th>';
                        }
                        html += '</tr>';
                    }
                 }

                $.each(rData,function(index,value){
                        html+="<tr><td>"+value['APP_MST_ID']+"</td><td><a href='/Application/Index/"+value['APP_MST_ID']+"' class='menuCall'>"+value['APPLICATIONNAME']+"</a></td><td>"+value['URL']+"</td><td>"+value['PROJECTNO']+"</td><td>"+value['VSSFOLDERLOC']+"</td><td>"+value['SPOCUSER']+"</td><td>"+value['REQUESTEDBY']+"</td><td>"+value['DELIVERYMANAGER']+"</td></tr>";                 
                });

               html += '</table></div>';
               $("#dvTable").append(html);
            }
        }

成功：函数（数据）{
var html=''；
如果（数据==“”）{
$（“#dvTable”）.html（'未找到数据'）；
}
否则{
var rData=JSON.parse（数据）；
var html=''；
for（rData中的var键）{
var行=rData[键]；
如果（键==0）{
html+=''；
用于（第行中的var键2）{
html+=''；
html+=key2；
html+=''；
}
html+=''；
}
}
$.each（rData、函数（索引、值）{
html+=“”+value['APP_MST_ID']+“”+value['URL']+“”+value['PROJECTNO']+“”+value['VSSFOLDERLOC']+“”+value['SPOCUSER']+“”+value['REQUESTEDBY']+“”+value['DELIVERYMANAGER']+“”；
});
html+=''；
$（“#dvTable”）.append（html）；
}
}

首先，在controller方法中不必要地序列化数据两次（这意味着您需要

JSON.parse（）

再次将其转换回来），并且只需要在方法中

return Json(DT, JsonRequestBehavior.AllowGet);

在脚本中，将“基本url”分配给一个变量，以便您可以使用该变量基于

APP\u MST\u ID

构建包含路由值的url。注意：下面的代码使用jQuery对象生成html，而不是当前的html字符串（这可能很难调试）

生成html的另一个选项是创建一个隐藏的模板，例如，该模板可以被克隆和更新

<table id="template" style="display:none;">
    <tr>
        <td></td>
        <td>
            <a href="" class="menuCall"></a>
        </td>
        // .... other columns as required
    <tr>
<table>

首先，在controller方法中不必要地序列化数据两次（这意味着您需要

JSON.parse（）

再次将其转换回来），并且只需要在方法中

return Json(DT, JsonRequestBehavior.AllowGet);

在脚本中，将“基本url”分配给一个变量，以便您可以使用该变量基于

APP\u MST\u ID

构建包含路由值的url。注意：下面的代码使用jQuery对象生成html，而不是当前的html字符串（这可能很难调试）

生成html的另一个选项是创建一个隐藏的模板，例如，该模板可以被克隆和更新

<table id="template" style="display:none;">
    <tr>
        <td></td>
        <td>
            <a href="" class="menuCall"></a>
        </td>
        // .... other columns as required
    <tr>
<table>

不太清楚您希望如何使用这些数据。

APPLICATIONNAME

应该是链接的文本，而

URL

应该是

href

属性的值，还是您想要

href=“/Application/Index/xxx

其中

xxx

是

APP\u MST\u ID

的值？@StephenMuecke:No

APPLICATIONNAME

是我的列名，这些值将是

NE ISP库存报告应用程序

，它将是链接的文本。

ID

将是

APP\u MST\u ID

用于形成链接是的，这就是我的意思：）所以你想为第一个生成

（顺便说一句，由于url中的

，它不会工作）@StephenMuecke:u给出的url中的一点更正

`和SMenu.ID
将是APP\u MST\u ID
。另外，我们是否可以在绑定到url时删除
？href=“Index/”+SMenu.id，“应用程序”
没有任何意义（您希望它命中什么？）我假设您将url.Action（）
方法与它生成的实际html相混淆。在任何情况下，这都不是使用Url.Action（）
-它应该是@Url.Action（“Index”，“Application”，new{id=SMenu.id}）
不太清楚如何使用这些数据。APPLICATIONNAME
应该是链接的文本，而URL
应该是href
属性的值，还是您想要href=“/Application/Index/xxx
其中xxx
是APP\u MST\u ID
的值？@StephenMuecke:NoAPPLICATIONNAME
是我的列名，这些值将是NE ISP库存报告应用程序
，它将是链接的文本。ID
将是APP\u MST\u ID
用于形成链接是的，这就是我的意思：）所以你想为第一个生成
（顺便说一句，由于url中的
，它不会工作）@StephenMuecke:u给出的url中的一点更正`和SMenu.ID
将是APP\u MST\u ID
。我们还可以在绑定t时删除
<table id="template" style="display:none;">
    <tr>
        <td></td>
        <td>
            <a href="" class="menuCall"></a>
        </td>
        // .... other columns as required
    <tr>
<table>

var baseUrl = '@Url.Action("Index", "Application")';
var template = $('#template');
....

$.each(data, function(index, item) {
    var clone = template.clone.html(); // returns the tr
    table.append(clone);
    var cells = clone.find('td');
    cells.eq(0).text(item.APP_MST_ID); // update first column
    cells.eq(1).find('a').text(item.APPLICATIONNAME).attr('href', baseUrl + '?id=' + item.APP_MST_ID);
    .... // update other columns as required
});