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

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

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

 success: function (data) { var html = ''; if (data == "") { $("#dvTable").html('No Data Found'); } else { var rData = JSON.parse(data); if (rData.length !== 0) { html += '
'; for (var key in rData) { var row = rData[key]; if (key == 0) { html += ''; for (var key2 in row) { html += ''; } html += ''; } html += ''; for (var key2 in row) { html += ''; } html += ''; } html += '
'; html += key2; html += '
'; html += row[key2]; html += '
'; } else { html += "No Data Found"; } $("#dvTable").html(html); } } 

那么我应该如何链接并使其可点击。

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

UPDATE

从控制器返回json代码。

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

Answer 1

以下代码对您有所帮助，

 success: function (data) { var html = ''; if (data == "") { $("#dvTable").html('No Data Found'); } else { var rData = JSON.parse(data); var html = '
'; for (var key in rData) { var row = rData[key]; if (key == 0) { html += ''; for (var key2 in row) { html += ''; } html += ''; } } $.each(rData,function(index,value){ html+=""; }); html += '
'; html += key2; html += '
"+value['APP_MST_ID']+"
"+value['APPLICATIONNAME']+"
"+value['URL']+"
"+value['PROJECTNO']+"
"+value['VSSFOLDERLOC']+"
"+value['SPOCUSER']+"
"+value['REQUESTEDBY']+"
"+value['DELIVERYMANAGER']+"
'; $("#dvTable").append(html); } } 

Answer 2

首先，您在控制器方法中不必要地对数据进行两次序列化（这意味着您需要JSON.parse()将其再次转换回来），而您在方法中所需要的只是

 return Json(DT, JsonRequestBehavior.AllowGet); 

在脚本中，将“基本URL”分配给变量，以便您可以使用它来构建包含基于APP_MST_ID的路由值的APP_MST_ID 。 请注意，以下代码使用jQuery对象生成html，而不是当前的html字符串（可能很难调试）。

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

但是APP_MST_ID的值存在问题，因为它包含a . （点）如果它是路由值，你将[此问题]（URL中的点导致404与ASP.NET mvc和IIS）。 替代方案. 如果您将其添加为查询字符串，即

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

生成html的另一个选择是创建一个可以克隆和更新的隐藏模板

  // .... other columns as required  

然后在你的脚本中

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