将JSON字符串数据绑定到详细信息视图

本文关键字：详细信息 视图 数据绑定 JSON 字符串 | 更新日期: 2023-09-27 18:00:22

我实际上向脚本传递了一个JSON字符串，并希望在详细视图中显示它。

这就是我的jquery看起来像

    function onBeforeClientInsert(record) {

    var eventtype = parseInt(record.<%= CEO.FieldEvaluator.GetEvaluatorByDId("EVENT_TYPE_ID").GetFieldDataFieldId()%>);
   var begindate = record.<%= CEO.FieldEvaluator.GetEvaluatorByDId("BeginDate").GetFieldDataFieldId()%>;
   var enddate = record.<%= CEO.FieldEvaluator.GetEvaluatorByDId("EndDate").GetFieldDataFieldId()%>;
     $.ajax({
            type: "POST", url: "Data.aspx/CheckInsertRecord",
            data: "{EventType:'" + eventtype + "',BeginDate:'" + begindate + "'," +
                   "EndDate:'" + enddate+"' }",
            contentType: "application/json; charset=utf-8", dataType: "json",
            success: function (msg) {
                 if(msg.d == "No duplicate"){
                 }
                 else{
                     alert(msg.d);
                     eval("var data = "+msg.d+";");
                     alert(data[0].BeginDate);
                     alert(data[0].EVENT_TYPE_ID);
                  }
                  var modal = document.getElementById('Div1');
        modal.style.display = '';
        modal.style.position = 'fixed';
        modal.style.zIndex = '100';
        modal.style.left = '30%';
        modal.style.top = '40%';
                   var screen = document.getElementById('modalScreen');
        screen.style.display = '';
            }
        });

modalScreen只是创建一个弹出窗口。这就是Div1包含的

         <div style="display: none; background-color: White; width: 450px; height: 150px;"
                    id="Div1">
    <asp:Label ID="Label1" Text="HI" runat="server"></asp:Label>
   <asp:DetailsView ID="de" runat="server" AutoGenerateRows="True" Height="50px" Width="301px">
   <Fields>
   <asp:TemplateField>
   <ItemTemplate>
   <asp:Label ID="Label1" runat="server" Text='<%# Eval(data[0].EVENT_TYPE_ID) %>'></asp:Label>
   </ItemTemplate>
   </asp:TemplateField>
   </Fields>
    </asp:DetailsView>
    <input type="button" onclick="Hide()" value="OK" />
</div>

这是mycodebehind:

     public static string CheckInsertRecord(String EventType, String BeginDate, String EndDate)
{
    NCDCPoint ncdc = new NCDCPoint();
    CEOSurveyDataContext CDC = new CEOSurveyDataContext();
    int et = Convert.ToInt32(EventType);
    CultureInfo provider = CultureInfo.InvariantCulture;
    DateTime b = Convert.ToDateTime(BeginDate);
    DateTime e = Convert.ToDateTime(EndDate);
    DetailsView a = new DetailsView();
      var query = (from n in CDC.NCDCPoints
                where n.EVENT_TYPE_ID == et && n.BeginDate == b && n.EndDate == e
                select new { 
                   n.EVENT_TYPE_ID,
              BeginDate =  n.BeginDate.ToString("yyyy-MM-dd",provider),
               EndDate = n.EndDate.ToString(),
                n.BeginLAT,
              BeginLONG =  n.BeginLONG,
                n.EndLAT,
                n.EndLONG});
   if (query.Any())
   {
       return new JavaScriptSerializer().Serialize(query.ToList());
   }
   else
   {
       return "No duplicate";
   }

}

所以，我无法访问Div1中的数据变量。你们能告诉我该怎么处理吗？

此外，我在代码后台写的查询是我需要显示的吗？那么，你能想出其他办法吗？

将JSON字符串数据绑定到详细信息视图

如果您所要做的只是通过AJAX显示一些信息，则不需要使用详细信息视图，这是一个服务器端控件。如果你真的想使用它，你需要使用更新面板和部分页面回发来填充控件。不过，你对自己的前进方式有更好的把握。

首先，你的HTML应该沿着以下几行：

<div id="Div1" style="display: none; background-color: White; width: 450px; height: 150px;position:fixed;zIndex:100;left30%;top40%;>
    <div>Begin Date:<span id="beginDate"></span></div>
    <div>EventTypeID:<span id="eventTypeID"></span></div> 
</div>

没有理由不完全风格Div1我可以看到

您的jQuery应该更像：

    function onBeforeClientInsert(record) {  
        var eventtype = parseInt(record.<%= CEO.FieldEvaluator.GetEvaluatorByDId("EVENT_TYPE_ID").GetFieldDataFieldId()%>);
        var begindate = record.<%= CEO.FieldEvaluator.GetEvaluatorByDId("BeginDate").GetFieldDataFieldId()%>;
        var enddate = record.<%= CEO.FieldEvaluator.GetEvaluatorByDId("EndDate").GetFieldDataFieldId()%>;
         $.ajax({
            type: "POST", url: "Data.aspx/CheckInsertRecord",
            data: "{EventType:'" + eventtype + "',BeginDate:'" + begindate + "'," +
                   "EndDate:'" + enddate+"' }",
            contentType: "application/json; charset=utf-8", dataType: "json",
            success: function (msg) {
                 if(msg.d == "No duplicate"){
                 }
                 else{
                     alert(msg.d);
                     var data  = jQuery.parseJSON(msg.d); //safer than eval
                     alert(data[0].BeginDate);
                     alert(data[0].EVENT_TYPE_ID);
                  }
                  //Set the values
                  $("#beginDate").html(data[0].BeginDate);
                  $("#eventTypeID").html(data[0].EVENT_TYPE_ID);
                  //Show Divs
                  $("#Div1").show();
                  $("#modalScreen").show();
            }
        });

从外观上看，您应该对jQuery做更多的阅读。看看选择器，CSS，效果和AJAX。

相关文章：