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

时间:2011-06-27 03:38:41

标签: c# jquery .net json

我实际上已将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中的数据变量。那么你们可以告诉我如何处理这个问题吗?

此外,我在代码隐藏中写的查询是我需要显示的内容吗?那么,你可以找出其他方法吗?

1 个答案:

答案 0 :(得分:1)

如果你要做的只是通过AJAX显示一些信息,你不需要使用详细信息视图,这是一个服务器端控件。如果您确实想要使用它,则需要使用update panelpartial page postback来填充控件。你对自己的方式更好。

首先,你的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。请查看selectorsCSSEffectsAJAX