Bind a JSON string data to details view

I actually passed a JSON string to the script and would like to display it in a detailsview.

This is what my jquery looks like

    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 just creates a popup. This is what Div1 consists of

         <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>

This is 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";
   }

}

So, I can't access data variable inside Div1. So can u guys let me know how i can deal with this?

Moreover, query that I wrote in the codebehind is what I need to display? So, can u figure me out any other way to do this?

If all you are trying to do is display some information via AJAX you do not need to use a details view, which is a server side control. If you really want to use that you need to use an update panel and partial page postback to populate the control. You are better of the way you are headed though.

First up your HTML should be along the lines of:

<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>

There is no reason not to fully style Div1 That I can See

Your jQuery should be more like:

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

            }

        });

From the look of it you should do a little more reading on jQuery. Have a look at selectors, CSS, Effects and AJAX.