私はカレンダーコントロールを持っており、それぞれの日付を選択する際に、今日の期限と期限超過をアコーディオンの2つのセクションとして表示する必要があります。アコーディオンのように見えるようにdivをスタイルで追加しようとしましたが、UIの問題が発生しています。現在、アコーディオン（Jquery）を追加する予定です。カレンダーコントロールから日付を選択すると、アコーディオンが表示されます。それぞれの日付を選択しながら、コードビハインドでアコーディオンdivをバインドし、表示するJsonに変換しています。divを追加するコードは次のとおりです。
[WebMethod(EnableSession = true)]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public string CalenderBinderAccordian()
{
try
{
//Code to fetch ProductGroup is not shown
foreach (var p in productGroup)
{
string todoString = "";
int uniqueID = Guid.NewGuid().GetHashCode();
todoString = "<div id='accordion' class='ui-accordion ui-widget ui-helper-reset' role='tablist'><h3><a href=#" + uniqueID + "><b>Due Today</b></a></h3>";
todoString += "<div>";
foreach (var t in p.todo)
{
var tempAmt = String.Empty;
if ((t.Amount == null) || t.Amount == String.Empty)
tempAmt = "0";
else
tempAmt = Convert.ToDecimal(t.Amount.ToString()).ToString();
todoString += "<p style='padding:5px 0px; border-bottom:dashed 1px #dddddd;'><b>" + todoCount.ToString() + "</b>. " + t.ProductName + "<span style='text-align:right; padding-right:5px;'> $" + tempAmt + "</span><a href='PaymentDetails.aspx' target='_blank' style='text-decoration:none;'><b>Pay Now</b></a></p>";
todoCount++;
}
todoString += "</div>";
var overDue = temps.Select(x => new { x.DueDate }).Distinct().ToList();
int overDueCount = 0;
uniqueID = Guid.NewGuid().GetHashCode();
todoString += "<h3><a href=#" + uniqueID + "><b>Over Due</b></a></h3>";
int todoCount1 = 1;
todoString += "<div>";
for (int i = 0; i < overDue.Count(); i++)
{
if ((Convert.ToDateTime(overDue[i].DueDate) - Convert.ToDateTime(p.dates)).Days < 0)
{
overDueCount++;
var overDueList = temps.FindAll(x => x.DueDate.Equals(overDue[i].DueDate)).ToList();
foreach (var t in overDueList)
{
var tempAmt = String.Empty;
if ((t.Amount == null) || t.Amount == String.Empty)
tempAmt = "0";
else
tempAmt = Convert.ToDecimal(t.Amount.ToString()).ToString();
todoString += "<p style='padding:5px 0px; border-bottom:dashed 1px #dddddd;'><b>" + todoCount1.ToString() + "</b>. " + t.ProductName + "<span style='text-align:right; padding-right:5px;'> $" + tempAmt + "</span><a href='PaymentDetails.aspx' target='_blank' style='text-decoration:none;'><b>Pay Now</b></a></p>";
todoCount++;
todoCount1++;
}
}
}
todoString += "</div>";
todoString = todoString + "</div>\",\"count\":\"" + todoCount + "\"},";
jsonString = jsonString + String.Format("{{\"{0}\" : \"{1}\",\"{2}\" : \"{3}", "dates", p.dates, "todo", todoString);
if (overDueCount.Equals(0))
{
jsonString = jsonString.Replace("<h3><a href=#" + uniqueID + "><b>Over Due</b></a></h3><div></div>", "");
}
}
jsonString = jsonString.TrimEnd(',');
jsonString = '[' + jsonString + ']';
string data= jsonString;
return data;
}
catch (Exception ex)
{
throw;
}
}
ascxページのコードは次のとおりです。/
/Scripts for Calender control
<script type="text/javascript" src="../../Scripts/jquery-1.8.3.js"></script>
<link rel="stylesheet" href="../../Content/jquery.calendarPicker.css" type="text/css" media="screen"/>
<script type="text/javascript" src="../../Scripts/jquery.calendarPicker.js"></script>
<link rel="stylesheet" href="../../Content/style.css" type="text/css" media="screen"/>
//Scripts for accordion
<link rel="stylesheet" href="../../Content/jquery-ui.css" />
<script type="text/javascript" src="../../Scripts/jquery-ui.js"></script>
<script type="text/javascript">
$(function () {
$("#accordion").accordion();
});
</script>
<div class="calendercontent">
<div id="dsel1" style="width:200px;">
<a href="" onclick="calendarPicker1.changeDate(new Date())"></a>
<span id="span1"></span>
</div>
<img class="ref" src="../../Images/refresh_circle.gif" alt="refresh" title="refresh"/>
<div id="todo"></div>
</div>
ascxページにdivデータを追加すると、アコーディオンは正常に機能し、fireBugを使用すると、アコーディオンクラスが表示されますが、アコーディオンデータはコードビハインドに追加され、Javaスクリプトを使用して表示されるため、以下に表示される関数は働く。親切に助けてください、私はJqueryの初心者です。
<script type="text/javascript">
$(function () {
$("#accordion").accordion();
});
</script>