I have the following asp.net mvc sharepoint app controller
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);
}
And in my view is like this:
@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>
As you can see, I have a dropdown which renders the list of cities, and I want that when the user selects a list, then it should call back the controller index action with the query string for the city, but thats not the problem, the problem is sharepoint apps needs some query string tokens so that sharepoint can create the clientContext object on the action.
If it would be server side code, then it would be something like this:
@Html.ActionLink("Install Design Package", "InstallDesignPackage", "Home", new { SPHostUrl = SharePointContext.GetSPHostUrl(HttpContext.Current.Request).AbsoluteUri },null)
But because this is javascript I have no idea how to append all those standard sharepoint tokens when the dropdown list is changed.
In our case this is something we had to do manually here is a sample (note that we rely on jquery) Then all you have to do is append the result of Utilities.GetSharePointSecurityParams to the url of your ajax call.