使用jquery将数据绑定到div时在列之一中添加链接 [英] Add a link in one of column while binding data to div using jquery

问题描述

我将数据置为json，并将其绑定到div中.现在我想要的是，该列是使用其数据动态生成的.因此，响应中有一列名称为APPLICATIONNAME的列将带有a标记.该链接是使用以下代码创建的.

I bring data thorugh json and bind it in a div. Now what I want is, the column is dynamically generated with its data. So there is one column in response whose name is APPLICATIONNAME for which there will be a tag. The link is created with below code.

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

以及我的回复及其数据绑定代码如下

and my response and its data binding code is below

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

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

            else {
                var rData = JSON.parse(data);

                if (rData.length !== 0) {

                    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>';
                        }
                        html += '<tr>';
                        for (var key2 in row) {
                            html += '<td>';
                            html += row[key2];
                            html += '</td>';
                        }
                        html += '</tr>';
                    }
                    html += '</table></div>';
                }
                else {
                    html += "No Data Found";
                }

                $("#dvTable").html(html);
            }
        }

所以我应该如何链接并使其可点击.

So how should I link and make it clickable.

JSON代码

[  
   {  
      "APP_MST_ID":267.0,
      "APPLICATIONNAME":"NE ISP Inventory Reporting Application",
      "URL":"https://jiogis.ril.com/NeIspInventoryReport/",
      "PROJECTNO":"R4G-25-APD-093",
      "VSSFOLDERLOC":"$/R4GGISNEPRODUCTION/093_NE ISP Inventory",
      "SPOCUSER":"Atul.Muzumdar",
      "REQUESTEDBY":"Harshad.V.Acharya",
      "DELIVERYMANAGER":"Ajay.gondane"
   },
   {  
      "APP_MST_ID":201.0,
      "APPLICATIONNAME":"Building Survey Data updation tool for Business",
      "URL":"Test",
      "PROJECTNO":"R4G-25-APD-045",
      "VSSFOLDERLOC":"-",
      "SPOCUSER":"Yogesh.More",
      "REQUESTEDBY":"Harshad.V.Acharya",
      "DELIVERYMANAGER":"Ajay.gondane"
   },
   {  
      "APP_MST_ID":216.0,
      "APPLICATIONNAME":"eNodeB Bulk placement",
      "URL":"https://jiogis.ril.com/NEInventory/",
      "PROJECTNO":"R4G-25-APD-021",
      "VSSFOLDERLOC":"$/R4GGISDev/Static/Jagan/NEBatchProcess",
      "SPOCUSER":"Manoj.Chahal",
      "REQUESTEDBY":"Harshad.V.Acharya",
      "DELIVERYMANAGER":"Rajesh.Mane"
   },
   {  
      "APP_MST_ID":1.0,
      "APPLICATIONNAME":"LCO Mapping Application",
      "URL":"Jiogis.ril.com/GraniteReverseIntegration//Test",
      "PROJECTNO":"R4G-25-APD-128",
      "VSSFOLDERLOC":"$/R4GGISNEPRODUCTION/128_LCO Mapping/02_Source_Code",
      "SPOCUSER":"Prasad1.shinde",
      "REQUESTEDBY":"Sanjive.kumar",
      "DELIVERYMANAGER":"Jaganmohan.kudikala"
   },
   {  
      "APP_MST_ID":230.0,
      "APPLICATIONNAME":"IBD Association to Society / Complex",
      "URL":"http://jiogis.ril.com/inbldgdoc/",
      "PROJECTNO":"R4G-25-APD-070",
      "VSSFOLDERLOC":"$/R4GGISNEPRODUCTION/070_IBD Association to Bldgs & ",
      "SPOCUSER":"Taramohan Gupta",
      "REQUESTEDBY":"Yogesh.dhomkar",
      "DELIVERYMANAGER":"Ajay.gondane"
   },
   {  
      "APP_MST_ID":4.0,
      "APPLICATIONNAME":"As-built & ITP Form Generation- Intracity",
      "URL":"Jiogis.ril.com/GraniteReverseIntegration//Test",
      "PROJECTNO":"R4G-25-APD-044",
      "VSSFOLDERLOC":"-",
      "SPOCUSER":"Amit.Sargar",
      "REQUESTEDBY":"Anuj.jain",
      "DELIVERYMANAGER":"Jaganmohan.kudikala"
   },
   {  
      "APP_MST_ID":2.0,
      "APPLICATIONNAME":"Integration of GIS with Jio Patroller",
      "URL":"-",
      "PROJECTNO":"R4G-25-APD-155",
      "VSSFOLDERLOC":"D:\\JIOGISPRODUCTIONAPPLICATION\\JioPatrollerAPI ",
      "SPOCUSER":"Sanjive.kumar",
      "REQUESTEDBY":"Sanjay.nand.gupta",
      "DELIVERYMANAGER":"Jaganmohan.kudikala"
   },
   {  
      "APP_MST_ID":248.0,
      "APPLICATIONNAME":"Intracity & NLD Network Progress Tool",
      "URL":"http://jiogis.ril.com/PMO",
      "PROJECTNO":"R4G-25-APD-182",
      "VSSFOLDERLOC":"$/R4GGISNEPRODUCTION/182_Intracity & NLD Network ",
      "SPOCUSER":"Arvind.B.Mishra",
      "REQUESTEDBY":"Yogesh.dhomkar",
      "DELIVERYMANAGER":"Ajay.gondane"
   },
   {  
      "APP_MST_ID":188.0,
      "APPLICATIONNAME":"As Built Completed Link Id Print",
      "URL":"https://jiogis.ril.com/ABDCompleted/",
      "PROJECTNO":"R4G-25-APD-104",
      "VSSFOLDERLOC":"$/R4GGISNEPRODUCTION/104 As Built Link Id Print /01_Source Code/  As Built Link Id Print Portal (internal user)",
      "SPOCUSER":"Pradip.Renushe",
      "REQUESTEDBY":"Ravindra Manjalkar",
      "DELIVERYMANAGER":"Ajay.gondane"
   },
   {  
      "APP_MST_ID":189.0,
      "APPLICATIONNAME":"As Built Link Id Print",
      "URL":"https://jiogis.ril.com/linkprint/",
      "PROJECTNO":"R4G-25-APD-103",
      "VSSFOLDERLOC":"$/R4GGISNEPRODUCTION/103_Asbuilt Link Print",
      "SPOCUSER":"Abhishek.Maurya",
      "REQUESTEDBY":"Ravindra Manjalkar",
      "DELIVERYMANAGER":"Ajay.gondane"
   }
]

APP_MST_ID是SMenu.id，将用于URL

APP_MST_ID is SMenu.id which will be used for URL

更新

从控制器返回json代码.

Returning json code from controller.

public ActionResult GetSearchData(string ddlSelectedVal, string ddlselectParamType, string ddlselectOperator, string txtSearchCntrl)
    {
        string JSONresult = string.Empty;
        SearchComponentBLL srchData = new SearchComponentBLL();
        DataSet DS = new DataSet();
        DS = srchData.GET_FILTER_DATA(ddlSelectedVal, ddlselectParamType, ddlselectOperator, txtSearchCntrl);
        DataTable DT = new DataTable();
        if (DS != null && DS.Tables.Count > 0)
        {
            DT = DS.Tables[0];
            if (DT != null && DT.Rows.Count > 0)
            {
                JSONresult = JsonConvert.SerializeObject(DT);
            }
        }
        return Json(JSONresult, JsonRequestBehavior.AllowGet);
    }

推荐答案

首先，您不必要地在controller方法中序列化了两次数据(这意味着您随后需要JSON.parse()再次将其转换回)，而您所需要做的就是在方法中是

First, your unnecessarily serializing your data twice in the controller method (which means you then need JSON.parse() to convert it back again), and all you need is in the method is

return Json(DT, JsonRequestBehavior.AllowGet);

在脚本中，将基本URL"分配给变量，以便您可以将其用于构造包含基于APP_MST_ID的路由值的URL.请注意，以下代码使用jQuery对象生成html，而不是当前的html字符串(这可能很难调试).

In the script, assign the 'base url' to a variable so that you can use that for constructing the url containing the route value based on APP_MST_ID. Note the following code uses jQuery objects for generating the html, rather than your current html string (which can be difficult to debug).

var baseUrl = '@Url.Action("Index", "Application")';
$.ajax({
    ....
    success: function (data) {
        if (data) {
            var html = $('<div></div>').addClass('table-responsive');
            var table = $('<table></table>').addClass('table table-blue');
            html.append(table);
            $.each(data, function(index, item) {
                // Create table row
                var row = $('<tr></tr>');
                // Create table link
                var link = $('<a></a>').text(item.APPLICATIONNAME)
                    .attr('href', baseUrl + '/' + item.APP_MST_ID).addClass('menuCall'); 
                // Create table cell
                var cell = $('<td></td>');
                cell.append(link);
                row.append(cell);
                // .... more table columns as required
                table.append(row); 
            });
        $("#dvTable").html(html);
        }
    }
});

但是APP_MST_ID的值存在问题，因为它包含一个.(点)，并且您将遇到[此问题](URL中的点导致ASP.NET mvc和IIS 404)路线值.如果将.添加为查询字符串，即

，则必须使用.

There is however an issue with the value of APP_MST_ID because it contains a . (dot) and you will have [this problem](Dots in URL causes 404 with ASP.NET mvc and IIS) if its a route value. The alternative of the . is necessary if you add it as a query string, i.e.

var link = $('<a></a>').text(item.APPLICATIONNAME)
    .attr('href', baseUrl + '?id=' + item.APP_MST_ID).addClass('menuCall'); 

生成html的另一种方法是创建一个可以克隆和更新的隐藏模板，例如

Another option for generating the html is to create a hidden template which can be cloned and updated, for example

<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
});

这篇关于使用jquery将数据绑定到div时在列之一中添加链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！