0

私の会社では、Facebook と同様の通知バーを利用する請求システム用の Web アプリケーションを構築しています。これにより、ユーザーはシステム上のトランザクションのステータスを表示するメニューをドロップダウンでき、未処理のトランザクションの総数を表示できます。横に表示されます。詳細は画像をご覧ください。

http://img210.imageshack.us/img210/4379/alertdrop.png

ドロップダウン メニュー内のテーブルに次のコードを使用して、このデータを取得しています。

<table id="alertDropTable" style="margin-top:10px;">

    @{
        Dictionary<string, int> dic = ViewBag.statusCount;
        if (dic != null)
        {
            for (int i = 0; i < dic.Count; i++)
            {
                if (dic.Values.ElementAt(i) > 0)
                {
                    <tr>
                        <td width="100%" style="padding-bottom:4px; padding-top:4px; padding-left:10px; padding-right:10px; vertical-align:middle;">
                            You have <strong><a style="background-color:#878787; border-radius:5px; color:White; padding:3px;">@dic.Values.ElementAt(i)</a></strong> @dic.Keys.ElementAt(i) transaction(s).
                        </td>
                    </tr>
                }
            }
        }
    }

</table>

合計を表示するスパンについては、次のとおりです。

<div style="float: left;">
    <a href="javascript:;" onmouseover="document.alert.src='@Url.Content("~/Content/images/alert_notification_hover.png")'" onmouseout="document.alert.src='@Url.Content("~/Content/images/alert_notification.png")'" onclick="toggle('notificationDrop');"><img src="@Url.Content("~/Content/images/alert_notification.png")" name="alert" alt="alert"/></a>

            @{
                Dictionary<string, int> dicheader = ViewBag.statusCount;
                int diccount = 0;
                if (dicheader != null)
                {
                    for (int i = 0; i < dicheader.Count; i++)
                    {
                        if (dicheader.Values.ElementAt(i) > 0)
                        {
                            diccount = diccount + @dicheader.Values.ElementAt(i);
                        }
                    }
                }
            }

    </div>

    <div id="alertTotalDiv" style="float:left;margin-top:6px; margin-left:5px;"><span id="alertTotal" style="vertical-align:middle; background-color:#878787; border-radius:5px; color:White; font-family:Georgia; font-size:20px; padding:3px; padding-left:5px; padding-right:5px;margin-top:0px;">@diccount</span></div>

このコードは現在、グローバルな "_layout.cshtml" ファイルに格納されています。コードの粗さはご容赦ください。これは非常に初期のバージョンです。ただし、ページの読み込み時にデータを取得するという点では、これはうまく機能しています。ただし、システムでは、ページ全体を更新することなく、この情報を数秒ごとに自動的に更新する必要があります。要するに、コントローラを呼び出して現在のデータを戻し、現在の値で<table>and<span>を更新します。

「AlertController」からデータを取得し、それに応じてビューを更新する Ajax 関数を作成するように依頼されました。このコントローラの内容は次のとおりです。

public class AlertController : Controller
{

    /// <summary>
    /// Gets or sets the user service contract.
    /// </summary>
    /// <value>The user service contract.</value>
    public IUserServiceContract UserServiceContract { get; set; }

    /// <summary>
    /// Initializes a new instance of the <see cref="BaseController"/> class.
    /// </summary>
    protected AlertController()
    {
        this.UserServiceContract = Gateway.Instance.Resolve<IUserServiceContract>();

    }

    /// <summary>
    /// Get the AlertTypes
    /// </summary>
    /// <returns></returns>
    public virtual void ViewAlerts()
    {
        Gateway.Instance.Logger.LogInfo(string.Format("Overview Controller View:    Fetching list of alerts."));

        try
        {
            if (this.UserServiceContract != null)
            {
                var allAnnouncements = this.UserServiceContract.GetAnnoucements();
                var userAlertSettings = this.UserServiceContract.GetUserAlert();


                ViewBag.statusCount = userAlertSettings;
                ViewBag.announcements = allAnnouncements.ToList();
            }
        }
        catch (Exception ex)
        {
            Gateway.Instance.Logger.LogInfo(ex);
            throw new Exception(string.Format("Home Controller View Error:  {0} occured while fetching alerts.", ex.Message), ex);
        }
    }

私は困惑していますが、私を助けるために、別のタスクを完全に実行するために使用される次の Ajax 関数の例が与えられています。

$.ajax({
    url: '@Url.Action("ViewAlerts", "Alerts")',
    data: { ownerIds: ownerIds },
    traditional: true,
    dataType: 'json',
    success: function (result) {
        for (i = 0; i < ownerIds.length; i++) {
            $(".ownersTable tr[id='tablerow+" + ownerIds[i] + "']").remove();
        }
    },
    error: function (xhr, ajaxOptions, thrownError) {
        $("#confirmDiv").alertModal({
            heading: '@Language.Fail',
            body: '@Language.AlertRemoveOwnerFailed' + thrownError
        });
    }
});

これまでのところ、なんとか機能させることができたのは、5秒ごとにアラートを出す設定間隔機能だけでした!

これに関するガイダンスはありますか？

4

3 に答える 3

1

わかりました、これはあなたが最初に行う必要があることです：

$.ajax({
    url: '@Url.Action("ViewAlerts", "Alerts")', 
    data: { ownerIds: ownerIds },
    traditional: true,
    dataType: 'json',
    success: function (result) {
        for (i = 0; i < ownerIds.length; i++) {
            $(".ownersTable tr[id='tablerow+" + ownerIds[i] + "']").remove();
        }
    },
    error: function (xhr, ajaxOptions, thrownError) {
        $("#confirmDiv").alertModal({
            heading: '@Language.Fail',
            body: '@Language.AlertRemoveOwnerFailed' + thrownError
        });
    }
});

Url.Action が引用符で囲まれているのはなぜですか? @Url.Action を入れるだけです...引用符の理由がわかりません。呼び出しが中断されている可能性があります。

次に、ViewBag を使用しないでください。「データ」を保持するために実際に使用するべきではありません（私の意見では）。モデルを使用する必要があります。だから、これはあなたができることです：

更新したいページの部分を、ステータスやアナウンス、その他必要なものを含むモデルに厳密に型指定された「部分ビュー」に作成します。

Jquery を使用して、データを取得し、この「部分ビュー」を返す Controller メソッドを「ロード」し、画面の例の Div にロードします。

$('#div-to-load-into').load('/myactionurl/', function () { //Do something when done });

次に、コントローラーが呼び出され、データを取得し、作成したモデルの部分ビューを返します!

幸運を！

---編集--- 上記の方が簡単で速いため、上記を実行する必要があります (再設計を行う場合は、すぐに理解できますが、ここでは、必要なことを行う方法のアイデアを示します)。

これはあなたが知る必要があるものです、

urlは、Ajax が呼び出すアクションです。URL を入力する必要があります: '/controller/action'

dataは、そのアクションに送信するデータです。

dataTypeは、返されると予想されるデータです。「html」または「json」の可能性があります。この場合、「ViewBag」を使用しているため、何も返されません。

ajax呼び出しがエラーなしで正常に呼び出され、その結果が「結果」にある場合、成功が呼び出されます。この場合、ビューバッグを使用しているため、結果がありません。

私は試したことがないので、これがうまくいくとは約束できません：

function(result)
{
var updated_values = @Html.Raw(Json.Encode(ViewBag.AlertStatus)) 
}

ajax の成功関数内でこれを試してください。これは機能する場合と機能しない場合があります。ViewBag の値が更新されるかどうかは正直わかりません。この時点で、テーブルの値を新しい値に置き換えるだけです。これらはすべて JavaScript で行う必要があります。その方法を理解するには、Jquery にある「appendTo」、「replaceWith」、「html」などの関数を調べることをお勧めします。

$.ajax({
    url: 'controller/action', 
    success: function (result) {
        var alert_info = @Html.Raw(Json.Encode(ViewBag.AlertStatus)) 
    },
    error: function (xhr, ajaxOptions, thrownError) {
        //error handling
    }
});
于 2012-08-31T15:03:11.267 に答える
0 
(function checkStatus() {
  $.ajax({
    url: '@Url.Action("ViewAlerts", "Alerts")', 
    data: { ownerIds: ownerIds },     
    traditional: true,     
    dataType: 'json',
    success: function (result) 
    {         
      for (i = 0; i < ownerIds.length; i++) 
       {             
         $(".ownersTable tr[id='tablerow+" + ownerIds[i] + "']").remove();
       }     
    },
    complete: function() {
      // Schedule the next request when the current one's complete
      setTimeout(checkStatus, 5000);
    }
  });
})();

AJAXリクエストを定期的に実行する方法は？

于 2012-08-31T15:04:10.000 に答える
0

アクションから JavaScript にデータを取得するには、アクションがデータを返す必要があります。現時点では、JavaScript からアクセスできないプロパティを返しvoidたり設定したりするため、「アクション」は実際にはアクションではありません。ViewBagしたがって、アクションは次のようにする必要があります。

[HttpGet]
public ActionResult Alerts()
{
    IEnumerable alerts;
    // ...code which gets data into alerts
    return JsonResult(alerts);
}

明らかに私はあなたのドメインを知らないので、戻ってくるデータをどのように構造化するかはわかりませんが、基本はそこにあります. $.ajax呼び出しはアクション ルートを指します (この場合、おそらく) '/Alert/Alerts'。success関数には、オブジェクトの適切な配列を持つ引数dataがあります。そこから、DOM をデータで更新します。

于 2012-08-31T16:46:22.310 に答える