I tried to change style with DOM in my project, but in my browser didn't change anything. when i tried to create console the DOM structure was change. Any idea?
Here is my code:
HTML:
<div (press)="showBookmarkOption($event)">
<div *ngFor="let item of isicontent; let i = index" class="content-wrap datanum-{{i}}" #contentwrapper>
<h3 [innerHTML]="this.sanitizer.bypassSecurityTrustHtml(item.title)"></h3>
<div [innerHTML]="this.sanitizer.bypassSecurityTrustHtml(item.content)"></div>
</div>
</div>
TS:
showBookmarkOption(e){
this.BookmarkTargetDatanum = e.target.closest('.content-wrap').classList[1].replace('datanum-','');
let BookmarkTarget:any = e.target.closest('div').id;
if(BookmarkTarget == ''){
return false;
}
let BookmarkMarkdown:any = document.getElementById(BookmarkTarget);
let BookmarkMarkdownOffsetTop:any = BookmarkMarkdown.offsetTop;
let BookmarkMarkdownOffsetHeight:any = BookmarkMarkdown.offsetHeight;
this.bookmarkContent = e;
this.bookmarkContent.target.style.background = "yellow";
console.log(e.target);
actionSheet.present();
}
and the result is
Related
Hi I have simple view rendering (e.g. with title and body).
While it works perfectly fine when i give a datasource to my rendering control in presentation layout - I am wondering if I can do it by code - i.e. define the data datasource by code.
Currently I have something like this that works just fine:
#inherits Glass.Mapper.Sc.Web.Mvc.GlassView<sample.Web.Models.sampleclass>
#if (Model != null)
{
<div>
#Model.Title
</div>
}
Looking for something like below where i can define my datasource or the item
#inherits Glass.Mapper.Sc.Web.Mvc.GlassView<sample.Web.Models.sampleclass>
#datasource = Sitecore.context.database.getitem("some different path or id");
#if (Model != null)
{
<div>
#Model.Title
</div>
}
You can use something like this:
#{
var dynamicDatasource = new SitecoreContext().GetItem<sampleclass>(other_item_id)
}
#if (dynamicDatasource != null)
{
<div>
#Html.Glass().Editable(dynamicDatasource, d => d.Title)
</div>
}
i am doing a sample where i require stored procedure result have to be displayed in view(created strongly typed view by choosing details in dropdown).from service i am getting result in this format
[{"studentID":1,"studentName":"Suja","StudentDepaertment":"Economics"}]
but i get error
The model item passed into the dictionary is of type 'System.Collections.Generic.List`1[StudentForm.sp_join_details_Result]', but this dictionary requires a model item of type 'StudentForm.sp_join_details_Result'.
Homecontroller.cs
public ActionResult Details(string name)
{
studentEntities data = new studentEntities();
List<sp_join_details_Result> model = null;
var client = new HttpClient();
client.BaseAddress = new Uri("http://localhost:99991/");
var response = client.GetAsync(string.Format("api/Details?name={0}", name)).Result;
var responseBody = response.Content.ReadAsStringAsync();
responseBody.Wait();
var productString = Newtonsoft.Json.JsonConvert.DeserializeObject<List<sp_join_details_Result>>(responseBody.Result);
return View(productString);
}
Details.cshtml
#model EmployAppraisalForm.sp_join_details_Result
#{
ViewBag.Title = "Details";
}
<h2>Details</h2>
<fieldset>
<legend>sp_join_details_Result</legend>
<div class="display-label">
#Html.DisplayNameFor(model => model.studentID)
</div>
<div class="display-field">
#Html.DisplayFor(model => model.studentID)
</div>
<div class="display-label">
#Html.DisplayNameFor(model => model.studentName)
</div>
<div class="display-field">
#Html.DisplayFor(model => model.studentName)
</div>
</fieldset>
I know i have to covert the response of service to result that could be displayed in view,to which i should convert ?Please help me in this.....
Your Details() method is returning List<sp_join_details_Result> to a view which expects a single sp_join_details_Result object.
If you want to display a single object, then change the return statement to
return View(productString.FirstOrDefault());
Alternatively, if your wanting to display a collection of objects, change the view to
#model List<sp_join_details_Result>
#foreach(var item in Model)
{
....
Now I am using jQuery's AppendTo method to add a string element to a div for the input:
var fixedpricePanelDiv =
'<label class="control-label">Fixed price: </label>'
+'<input id="cakpriceNum" name="cakcommitprice[cakprice]" type="number"/>'
+'<input id="cakpriceunitidDdl" name="cakcommitprice[cakpriceunitid]" />';
$(fixedpricePanelDiv).appendTo($("#panel"));
<div id="panel"></div>
If I now change to KendoUI Template, how to do this?
Do the flowing
<div id="example"></div>
<script>
var template = kendo.template('<label class="control-label">Fixed price: </label>'+'<input id="cakpriceNum" name="#= cakprice#" type="number"/>'+'<input id="cakpriceunitidDdl" name="#= cakpriceunitid#" />');
var data = { cakpriceunitid: "some val",cakprice:"some val" }; //A value in JavaScript/JSON
var result = template(data); /Pass the data to the compiled template
$("#example").html(result); //display the result
</script>
More info Check the Doc http://docs.telerik.com/kendo-ui/getting-started/framework/templates/overview
Since the research from Kendo Document, I think kendo.view is used for this purpose
I writing some code with C# and MVC and I have button for sorting a list of data by asc and desc. The logic works in my controller, I am able to call the method that sorts the list and in the breakpoint I can see that it has been sorted.
But it's weird because when I loop through my list in the partial view it never works. I use a breakpoint in my view to make sure it's the same order of items which it is. But it's like the new values don't render to the screen.
TeamManagement.cshtml
#model Website.Models.modelTeamSelect
#{
ViewBag.Title = "Football App";
}
#section featured {
}
#using (Ajax.BeginForm("_PartialTeams",
new
{
model = this.Model
},
new AjaxOptions
{
HttpMethod = "POST",
UpdateTargetId = "divCreatedTeams",
InsertionMode = InsertionMode.Replace
}))
{
<div id="divTeams" style="float: left; padding: 10px;">
<h3>Create a new team:</h3>
#Html.LabelFor(m => m.team.TeamName)
#Html.TextBoxFor(m => m.team.TeamName)
<input type="submit" value="Add Team" name="btnSubmit" />
</div>
Html.RenderPartial("~/Views/Partials/_PartialTeams.cshtml");
}
_PartialTeams.cshtml
#model Website.Models.modelTeamSelect
<div id="divCreatedTeams" style="float: left; padding: 10px;">
<h3>Your created teams:</h3>
<input type="submit" value="Asc" name="btnSubmit" />
<input type="submit" value="Desc" name="btnSubmit" />
<br />
#if (Model.teams.Count > 0)
{
for (int i = 0; i < Model.teams.Count; i++)
{
#Html.EditorFor(m => m.teams[i].TeamName)
<input type="button" value="Update team name" name="btnSubmit"/>
<input type="button" value="Remove team" name="btnSubmit"/>
<br />
}
}
</div>
Sorting logic in my controller
[HttpPost]
public PartialViewResult _PartialTeams(string BtnSubmit, modelTeamSelect modelTeamSelect)
{
switch (BtnSubmit)
{
case "Add Team":
modelTeamSelect.teams.Add(modelTeamSelect.team);
break;
case "Asc":
FootballRepository = new Repository.FootballRepository();
modelTeamSelect.teams = FootballRepository.Sort(modelTeamSelect, BtnSubmit);
break;
case "Desc":
FootballRepository = new Repository.FootballRepository();
modelTeamSelect.teams = FootballRepository.Sort(modelTeamSelect, BtnSubmit);
break;
}
return PartialView("~/Views/Partials/_PartialTeams.cshtml", modelTeamSelect);
}
public List<Models.modelTeam> Sort(Models.modelTeamSelect modelTeamSelect, string sort)
{
switch (sort)
{
case "Asc":
modelTeamSelect.teams = modelTeamSelect.teams.OrderBy(t => t.TeamName).ToList();
break;
case "Desc":
modelTeamSelect.teams = modelTeamSelect.teams.OrderByDescending(t => t.TeamName).ToList();
break;
}
return modelTeamSelect.teams;
}
My main model with team collection
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace Website.Models
{
public class modelTeamSelect
{
public modelTeamSelect()
{
teams = new List<modelTeam>();
team = new modelTeam();
}
public List<modelTeam> teams { get; set; }
public modelTeam team { get; set; }
}
}
My method Sort does it's job but in the view it never displays correctly. e.g. always wrong order.
Anyone have any ideas because I am stuck.
Screenshots
In the screenshots I click sort by Asc and you can see it says Newcastle as the first item in the list. But when the page renders it will say West Ham first even though it is iterating using the for loop.
All the Html helpers are preferring to use the ModelState values over the actual model values.
So even you have sorted in place your modelTeamSelect.teams in your action in the view #Html.EditorFor(m => m.teams[i].TeamName) call will use the original (before sorting) values form the ModelState.
The solution: if you are updating your action parameters in-place then just clear the ModelState before returning the View/PartialView:
[HttpPost]
public PartialViewResult _PartialTeams(string BtnSubmit,
modelTeamSelect modelTeamSelect)
{
// ... Do the sorting, etc.
ModelState.Clear();
return PartialView("~/Views/Partials/_PartialTeams.cshtml", modelTeamSelect);
}
You can read more about why the helpers are working like this in this article: ASP.NET MVC Postbacks and HtmlHelper Controls ignoring Model Changes
i am relatively new in django and angualarJs.The problem is that angularJs is not responding the get method properly.I have a webpage developed by django where i have a search field.For the execution of search i use a angularJs functionality that is ng-submit and write angularJs code to return value using get method.May be i made a mistake here.you can see my code... here is my template which containing the angularJs also...
<div class="navbar navbar-default " ng-controller="NavCtrl">
<form action="" class="navbar-form navbar-right" ng-submit="search()">
<input class="form-control col-lg-8" type="text" placeholder="Search" ng-model="term"></input>
</form>
</div>
<script>
app.controller("NavCtrl", ['$scope', '$http', '$location', '$q', '$timeout',
function NavCtrl($scope, $http, $location, $q, $timeout) {
$scope.results = ["Test"];
$scope.term = "";
$scope.reqs = "5";
$scope.pics = "45";
$scope.ddata = "asdasd";
$scope.ddata = $http.post("{% url 'get-nav-info' %}").success(
function (result) {
//$scope.reqs = result.data.data.num_request;
//$scope.pics = result.data.data.num_photo;
return result.data;
}
);
//$scope.reqs = $scope.ddata.num_request;
//$scope.pics = $scope.ddata.num_photo;
$scope.search = function () {
//alert("test");
//$location.absUrl("{% url 'search-term-show' %}").search({'term':$scope.term}).apply();
//$location.path("{% url 'search-term-show' %}").search({'term':$scope.term}).apply();
$http.get("{% url 'search-term-show' %}?term=" + $scope.term).success(function (result) {
return result.data;
});
//$scope.$apply();
}
}
]);
</script>
now the problem is that while i press enter ,there is no result,but if i manually write this URL which is http://www.kothay.com/searchphoto/?term=a in the address bar then the result is showing .In mention,this url is the that url which should be appear in the address bar when i press the enter to search my photos.But with the enter press its not appearing in the address bar and that's why the results are not showing.I hope you can understand what i am trying to say.May be there is a mistake in my code.Please help me to fix this problem.
You are doing thing wrong.
1st, the success is a defer of get, so return result.data and returns it to the get deferred and there it goes to the heaven. So if you would like to keep the current architecture it should look more like this
$scope.search = [];
getsearch = function () {
$http.get("{% url 'search-term-show' %}?term=" + $scope.term).success(function (result) {
$scope.search = result.data;
});
};
getsearch();
2nd that can still not update your UI cuz if the ctrl function is over and the digest is over before your response it wont update your UI cuz its in another scope (not $scope, but the programmatically term scope). The solution to this is to put your data in a service and in your ctr just do.
function ctrl($scope, myservice){
$scope.data = myservice;
}
ng-repeat="x in data.results"
Here is a full tutorial http://bresleveloper.blogspot.co.il/2013/08/breslevelopers-angularjs-tutorial.html
And last thing its just a good practice to always have .error(...)