Javascript 在MVC3中使用AJAX从控制器检索间隔数据

对于我的公司，我们正在为一个发票系统构建一个web应用程序，该系统使用一个通知栏，类似于Facebook的通知栏，用户可以下拉一个菜单，显示系统上交易的状态，同时在旁边显示未完成交易的总数。有关详细信息，请参见图片

我们正在使用下拉菜单中表格的以下代码检索此数据：

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

@{
Dictionary dic=ViewBag.statusCount；
如果（dic！=null）
{
对于（int i=0；i0）
{
你有
@{
Dictionary Dichiheader=ViewBag.statusCount；
int-diccount=0；
if（二叉头！=null）
{
对于（int i=0；i0）
{
diccount=diccount+@dicheader.Values.ElementAt（i）；
}
}
}
}
@迪克

此代码当前存储在全局“_layout.cshtml”中文件。请原谅代码的粗糙性，这是一个非常早期的版本。但是，这在检索页面加载的数据方面工作得很好。但是，系统要求每隔几秒钟自动更新此信息，而不刷新整个页面。本质上，打电话给控制器以恢复t查看当前数据并用当前值更新

和

我被要求创建一个Ajax函数，该函数从“AlertController”检索数据并相应地更新视图。请在下面查找此控制器的内容：

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

公共类警报控制器：控制器
{
/// 
///获取或设置用户服务合约。
/// 
///用户服务合同。
公共IUserServiceContract用户ServiceContract{get；set；}
/// 
///初始化类的新实例。
/// 
受保护的AlertController（）
{
this.UserServiceContract=Gateway.Instance.Resolve（）；
}
/// 
///获取警报类型
/// 
/// 
公共虚拟void ViewAlerts（）
{
Gateway.Instance.Logger.LogInfo（string.Format（“概览控制器视图：获取警报列表”）；
尝试
{
if（this.UserServiceContract！=null）
{
var allannounces=this.UserServiceContract.GetAnnounces（）；
var userAlertSettings=this.UserServiceContract.GetUserAlert（）；
ViewBag.statusCount=用户警报设置；
ViewBag.announces=allannounces.ToList（）；
}
}
捕获（例外情况除外）
{
Gateway.Instance.Logger.LogInfo（ex）；
抛出新异常（string.Format（“主控制器视图错误：{0}在获取警报时发生。”，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
        });
    }
});

$.ajax({
url:'@url.Action（“查看警报”、“警报”），
数据：{ownerIds:ownerIds}，
传统的：是的，
数据类型：“json”，
成功：功能（结果）{
对于（i=0；i

到目前为止，我唯一能工作的就是一个设置间隔的函数，它每5秒发出一次警报

---

对此有什么指导吗？

好的，这是您需要做的，首先：

$.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是Ajax将要调用的操作。您需要将url:“/controller/action”

数据是发送给该操作的数据{parameter name:parameter}在您的情况下，看起来您没有发送数据，因为您只是轮询刷新，所以不需要包含此数据

数据类型是您希望返回的数据，它可以是“html”或“json”，在您的情况下，由于您使用的是“ViewBag”，所以不返回任何内容

success如果在“result”中成功调用ajax调用且没有错误，那么将调用该调用，在您的情况下，您没有结果，因为您正在使用视图包

现在我不能保证这会奏效，因为我从未尝试过：

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

在ajax上的success函数中，试试这个，这可能有效，也可能无效。老实说，我不知道ViewBag是否会有更新的值。此时，您只需要用新值替换表值！您必须用javascript完成所有这些操作，我建议查看诸如“appendTo”、“replaceWith”、“html”等函数在Jquery中，我们可以找到如何做到这一点

$.ajax({
    url: 'controller/action', 
    success: function (result) {
        var alert_info = @Html.Raw(Json.Encode(ViewBag.AlertStatus)) 
    },
    error: function (xhr, ajaxOptions, thrownError) {
        //error handling
    }
});

（函数检查状态（）{
$.ajax({
url:'@url.Action（“查看警报”、“警报”），
数据：{ownerIds:ownerIds}，
传统的：是的，
数据类型：“json”，
成功：功能（结果）
{
function(result)
{
var updated_values = @Html.Raw(Json.Encode(ViewBag.AlertStatus)) 
}

$.ajax({
    url: 'controller/action', 
    success: function (result) {
        var alert_info = @Html.Raw(Json.Encode(ViewBag.AlertStatus)) 
    },
    error: function (xhr, ajaxOptions, thrownError) {
        //error handling
    }
});

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

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