如何从javascript设置Sharepoint Apps查询字符串标记

时间:2016-02-11 22:49:05

标签: javascript asp.net-mvc sharepoint sharepoint-apps sharepoint-jsom

我有以下asp.net mvc sharepoint app控制器

SUBQUERY

在我看来是这样的:

  public ActionResult Index(string city)
        {
            var spContext = SharePointContextProvider.Current.GetSharePointContext(HttpContext);

            List<Programate> lsProgramate = new List<Programate>();

            ViewBag.Img = spContext.SPHostUrl + "Style Library/Intranet/images/programte-13.png";
            ViewBag.CssRenting = spContext.SPHostUrl + "Style Library/Intranet/css/renting.css";

            using (var clientContext = spContext.CreateUserClientContextForSPHost())
            {
                if (clientContext != null)
                {
                    List lstProducts = clientContext.Web.Lists.GetByTitle("Programate");

                    CamlQuery camlQuery = new CamlQuery();

                    camlQuery.ViewXml = "<View><Query><OrderBy><FieldRef Name='Title'/></OrderBy></Query></View>";
                    //add filter by city

                    ListItemCollection lstEventos = lstProducts.GetItems(camlQuery);

                    clientContext.Load(lstEventos);

                    clientContext.ExecuteQuery();

                    ViewBag.Resp = "";

                    if (lstEventos != null)
                    {
                        foreach (var lstEventoItem in lstEventos)
                        {
                            Programate objProgramate = new Programate();
                            objProgramate.Titulo = lstEventoItem["Title"].ToString();
                            objProgramate.Hora_Inicio = Convert.ToString(lstEventoItem["EventDate"]); 
                            objProgramate.Hora_Fin = Convert.ToString(lstEventoItem["EndDate"]);
                            objProgramate.Descripcion = lstEventoItem["Description"].ToString();
                            FieldLookupValue obj = new FieldLookupValue();
                            obj = (FieldLookupValue)lstEventoItem["Ubicacion"];
                            objProgramate.Ciudad = obj.LookupValue;
                            objProgramate.Ubicacion = lstEventoItem["Location"].ToString();
                            lsProgramate.Add(objProgramate);
                        }

                        List<string> lsStr = lsProgramate.Select(x => x.Ciudad).Distinct().ToList();

                        ViewBag.Ciudades = lsStr;
                    }


                }

            }
            return View(lsProgramate);
        }

正如你所看到的,我有一个下拉列表,用于呈现城市列表,我希望当用户选择列表时,它应该使用城市的查询字符串回调控制器索引操作,但那不是问题是,sharepoint应用程序需要一些查询字符串标记,以便sharepoint可以在操作上创建clientContext对象。

如果它是服务器端代码,那么它将是这样的:

@using xx.Models;
@model List<Programate>
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <title></title>  
    <script type="text/javascript" src="~/Scripts/jquery-1.10.2.js"></script>
    <script type="text/javascript" src="~/Scripts/bootstrap.js"></script>
    <link href="~/Content/bootstrap.css" rel="stylesheet" type="text/css" />
    <link href="@ViewBag.CssRenting" rel="stylesheet" type="text/css" />
    <style type="text/css">
        .programate-color {
            width: 95%;
            margin-left: 2.5%;
        }

        .selec-programate {
            width: 95%;
            margin-left: 2.5%;
        }
    </style>
    <script type="text/javascript">
        // Set the style of the app part page to be consistent with the host web.
        // Get the URL of the host web and load the styling of it.
        function setStyleSheet() {
            var hostUrl = ""
            if (document.URL.indexOf("?") != -1) {
                var params = document.URL.split("?")[1].split("&");
                for (var i = 0; i < params.length; i++) {
                    p = decodeURIComponent(params[i]);
                    if (/^SPHostUrl=/i.test(p)) {
                        hostUrl = p.split("=")[1];
                        document.write("<link rel=\"stylesheet\" href=\"" + hostUrl +
                            "/_layouts/15/defaultcss.ashx\" />");
                        break;
                    }
                }
            }
            // if no host web URL was available, load the default styling
            if (hostUrl == "") {
                document.write("<link rel=\"stylesheet\" " +
                    "href=\"/_layouts/15/1033/styles/themable/corev15.css\" />");
            }
        }
        setStyleSheet();
    </script>
</head>
<body style="background-color: transparent; overflow: auto;">



    <div id="dynamicContent">
        @Html.DropDownList("Ciudades", new SelectList(ViewBag.Ciudades), new { @class = "form-control selec-programate", @onchange = "CallChangeCiudad(this.value)" });
        <div class="programate-color">
            @{int i = 0;
                foreach (var item in Model)
                {
                    i = i + 1;
                    string collapse = "Evento" + i;
                    <a data-toggle="collapse" data-target="#@collapse">
                        <div class="programte" style="height: 104px; width: 100%;">
                            <img class="img-programte" src="@ViewBag.Img">
                            <p class="fecha-programte">@i</p>
                            <p class="contenido-programte">@item.Titulo</p>
                            <p class="lugar">@item.Ubicacion - @item.Ciudad</p>
                        </div>
                    </a>
                        <div id="@collapse" class="collapse">
                            <div class="row" style="margin-left: 15%;">
                                <div class="col-sm-12">
                                    <p style="color:red; font-size: 18px;">Inicio: @item.Hora_Inicio - Fin: @item.Hora_Fin</p>
                                </div>
                                <div class="col-sm-12">
                                    <p style="font-size:16px; color:#040489;">@item.Descripcion</p>
                                </div>
                            </div>
                        </div>
                }
            }
        </div>

    </div>

    <script>
                function CallChangeCiudad(val) {
                    //window.location.href = "/Programate/Index?ciudad=" + val;
                }
    </script>

    <script type="text/javascript">
    "use strict";
    window.Communica = window.Communica || {};

    $(document).ready(function () {
        Communica.Part.init();
    });

    Communica.Part = {
        senderId: '',

        init: function () {
            var params = document.URL.split("?")[1].split("&");
            for (var i = 0; i < params.length; i = i + 1) {
                var param = params[i].split("=");
                if (param[0].toLowerCase() == "senderid")
                    this.senderId = decodeURIComponent(param[1]);
            }


            this.adjustSize();
        },

        adjustSize: function () {
            var step = 30,
                newHeight,
                contentHeight = $('#dynamicContent').height(),
                resizeMessage = '<message senderId={Sender_ID}>resize({Width}, {Height})</message>';

            newHeight = (step - (contentHeight % step)) + contentHeight;

            resizeMessage = resizeMessage.replace("{Sender_ID}", this.senderId);
            resizeMessage = resizeMessage.replace("{Height}", newHeight);
            resizeMessage = resizeMessage.replace("{Width}", "100%");

            window.parent.postMessage(resizeMessage, "*");
        }
    };
    </script>
</body>
</html>

但是因为这是javascript我不知道如何在更改下拉列表时附加所有这些标准sharepoint标记。

1 个答案:

答案 0 :(得分:0)

在我们的例子中,这是我们手动做的事情,这是一个示例(注意我们依赖于jquery) 然后你要做的就是将Utilities.GetSharePointSecurityParams的结果附加到你的ajax调用的url。

Utilities.GetSharePointSecurityParams = function ()
{
    var re = /\+/g;
    var spAppWebUrl = Utilities.getQueryStringParameterCleaned("SPAppWebUrl");

    var params = {
        SPHostUrl: Utilities.getQueryStringParameterCleaned("SPHostUrl"),
        SPLanguage: Utilities.getQueryStringParameterCleaned("SPLanguage"),
        SPClientTag: Utilities.getQueryStringParameterCleaned("SPClientTag"),
        SPProductNumber: Utilities.getQueryStringParameterCleaned("SPProductNumber"),
        SPHostTitle: Utilities.getQueryStringParameterCleaned("SPHostTitle"),
    };

    if (spAppWebUrl !== "")
        params["SPAppWebUrl"] = spAppWebUrl;

    return $.param(params).replace(re, " ");
}
Utilities.getQueryStringParameter = function (paramToRetrieve) {
    var params = document.URL.split("?")[1].split("&");
    for (var i = 0; i < params.length; i = i + 1) {
        var singleParam = params[i].split("=");
        if (singleParam[0] === paramToRetrieve)
            return singleParam[1];
    }

    return null;
}

Utilities.getQueryStringParameterCleaned = function (paramToRetrieve) {
    var re = /#$/;
    var tempResult = Utilities.getQueryStringParameter(paramToRetrieve);
    if (tempResult != null)
        return decodeURIComponent(tempResult).replace(re, "")
    else
        return "";
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>