KNOCKOUT:Uncaught (inpromise) referenced error - knockout-components

I am learning knockout and trying out a small example below are the the three files that I have:
index
introduction
introduction
I am using netbeans IDE for the development .
index.html
<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script data-main="js/main" src="js/libs/require/require.js" type="text/javascript"></script>
<link href="css/libs/oj/v2.1.0/alta/oj-alta-min.css" rel="stylesheet" type="text/css"/>
<style>
table, th, td {
border: 1px solid black;
padding: 15px;
}
th {
text-align: left;
}
thead{
border-style: double;
font-weight: bold ;
}
tr {
text-align: left;
}
{background-color: #f5f5f5}
</style>
</head>
<body>
<div data-bind="ojModule: {name: 'introduction'}"></div>
</body>
</html>
viewModels - introduction.js
/**
* introduction module
*/
define(['ojs/ojcore', 'knockout',oj,jquery,require
], function (oj, ko) {
/**
* The view model for the main content view template
*/
function introductionContentViewModel() {
var self = this;
self.firstName = ko.observable("Planet");
self.lastName = ko.observable("Earth");
self.fullName = ko.pureComputed(function () {
return this.firstName() + " " + this.lastName();
}, this);
this.fullName= this.firstName() +" " +this.lastName();
this.resetName=function(){
alert("Reset Name!");
this.firstName("James");
this.lastName("Potter");
};
this.capitalizeName=function(){
var curValue=this.lastName();
this.lastName(curValue.toUpperCase());
};
function seatReservation(fname,lname, reservMeals){
this.firstName=fname;
this.lastName=lname;
this.meals = ko.observable(reservMeals);
/* this.formattedPrice=ko.computed(function(){
var price = this.meals.price;
return price ? "$" + price.toFixed(2):"none";
});*/
};
this.mealsAvailable=[{mealName:"SandWich",price:25},
{mealName:"Roti",price:23},
{mealName:"Dal",price:22}];
self.seats = ko.observableArray([
new seatReservation("Steve","Hawkins", this.mealsAvailable[0]),
new seatReservation("Bert","Baltymoore", this.mealsAvailable[1])
]);
//function to add new reservation into the table
this.newReservationRow=function(){
this.seats.push(new seatReservation("","",this.mealsAvailable[0]));
};
}
return introductionContentViewModel;
});
views -introduction.html
<body>
<form>
<div class='liveExample'>
<p> First Name: <span data-bind='text: firstName'/> </p>
<p> Last Name: <span data-bind='text: lastName'/> </p>
<p>First name: <input data-bind='value: firstName' /></p>
<p>Last name: <input data-bind='value: lastName' /></p>
<h2>Hello, <span data-bind='text: fullName'> </span>!</h2>
<button data-bind='click: resetName' >Reset Name </button>
<button data-bind='click: capitalizeName'>Capitalize </button>
<input type='submit' data-bind='click: resetName' value='Reset'/>
</div>
<div class="Reservations">
<h2>Reservations </h2>
<table>
<thead> <tr><td> FirstName </td><td> LastName</td> <td> Meals</td><td> Price</td></tr></thead>
<tbody data-bind="foreach: seats">
<tr>
<td><input data-bind="value: firstName"/> </td>
<td><input data-bind="value: lastName"/> </td>
<td><select data-bind="options: meals,optionsText:'mealName'"></select> </td>
<td data-bind="text: meals().price"> </td>
</tr>
</tbody>
</table><br>
<input type="submit" value="New Reservation" label="New Reservation" title="Click to Make a New Reservation" data-bind="click: newReservationRow"/>
</div>
</form>
</body>
I am not getting the desired out put. The desired output is something like this in the below link
http://learn.knockoutjs.com/#/?tutorial=collections


You are mixing self and this a lot in your code. I recommend cleaning that up first and see if things start working for you. Personally, I like to stay with self.xxxx format.
Also, remove the reference to "require" inside of your define block in the introduction.js file. That may be causing some issues. Either way, it's not needed.
Finally, it appears you are doing all of this using Oracle JET. Since the introduction.html is a view that will be used inside of ojModule, you do not need to have the < body> element defined a second time. The introduction.html is going to be a fragment that will take the place of the < div> that you have bound to ojModule.

Related

JSSOR my slider is too small in small resolution

My problem is in the title.
My slider is responsive but nothing can be read correctly in small resolution.
For the moment I put it inside a test page of my website:
https://www.assistante-34.com/test.html
You will find the code inside my page.
<!-- #region Jssor Slider Begin -->
<!-- Generator: Jssor Slider Maker -->
<script src="/jssor/jssor.slider-27.5.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
jssor_1_slider_init = function() {
var jssor_1_SlideshowTransitions = [
{$Duration:1000,x:-1,y:2,$Rows:2,$Zoom:11,$Rotate:1,$SlideOut:true,$Assembly:2049,$ChessMode:{$Row:15},$Easing:{$Left:$Jease$.$InExpo,$Top:$Jease$.$InExpo,$Zoom:$Jease$.$InExpo,$Opacity:$Jease$.$Linear,$Rotate:$Jease$.$InExpo},$Opacity:2,$Round:{$Rotate:0.85}},
{$Duration:1000,$Zoom:11,$SlideOut:true,$Easing:{$Zoom:$Jease$.$InExpo,$Opacity:$Jease$.$Linear},$Opacity:2}
];
var jssor_1_options = {
$AutoPlay: 1,
$SlideDuration: 900,
$FillMode: 1,
$SlideshowOptions: {
$Class: $JssorSlideshowRunner$,
$Transitions: jssor_1_SlideshowTransitions,
$TransitionsOrder: 1
},
$BulletNavigatorOptions: {
$Class: $JssorBulletNavigator$,
$SpacingX: 2,
$SpacingY: 2
}
};
var jssor_1_slider = new $JssorSlider$("jssor_1", jssor_1_options);
/*#region responsive code begin*/
var MAX_WIDTH = 3000;
function ScaleSlider() {
var containerElement = jssor_1_slider.$Elmt.parentNode;
var containerWidth = containerElement.clientWidth;
if (containerWidth) {
var expectedWidth = Math.min(MAX_WIDTH || containerWidth, containerWidth);
jssor_1_slider.$ScaleWidth(expectedWidth);
}
else {
window.setTimeout(ScaleSlider, 30);
}
}
ScaleSlider();
$Jssor$.$AddEvent(window, "load", ScaleSlider);
$Jssor$.$AddEvent(window, "resize", ScaleSlider);
$Jssor$.$AddEvent(window, "orientationchange", ScaleSlider);
/*#endregion responsive code end*/
};
</script>
<link href="//fonts.googleapis.com/css?family=Roboto:100,100italic,300,300italic,regular,italic,500,500italic,700,700italic,900,900italic&subset=latin-ext,greek-ext,cyrillic-ext,greek,vietnamese,latin,cyrillic" rel="stylesheet" type="text/css" />
<style>
.jssorl-004-double-tail-spin img{animation-name:jssorl-004-double-tail-spin;animation-duration:1.6s;animation-iteration-count:infinite;animation-timing-function:linear}#keyframes jssorl-004-double-tail-spin{from{transform:rotate(0);}to{transform:rotate(360deg);}}.jssorb032{position:absolute}.jssorb032 .i{position:absolute;cursor:pointer}.jssorb032 .i .b{fill:#fff;fill-opacity:1;stroke:#000;stroke-width:1200;stroke-miterlimit:10;stroke-opacity:.25}.jssorb032 .i:hover .b{fill:#bfce00;fill-opacity:.6;stroke:#fff;stroke-opacity:.35}.jssorb032 .iav .b{fill:#000;fill-opacity:1;stroke:#fff;stroke-opacity:.35}.jssorb032 .i.idn{opacity:.3}
</style>
<div id="jssor_1" style="position:relative;margin:0 auto;top:0px;left:0px;width:1300px;height:339px;overflow:hidden;visibility:hidden;">
<!-- Loading Screen -->
<div data-u="loading" class="jssorl-004-double-tail-spin" style="position:absolute;top:0px;left:0px;width:100%;height:100%;text-align:center;background-color:rgba(0,0,0,0.7);">
<img style="margin-top:-19px;position:relative;top:50%;width:38px;height:38px;" src="/jssor/everlia2/double-tail-spin.svg" />
</div>
<div data-u="slides" style="cursor:default;position:relative;top:0px;left:0px;width:1300px;height:339px;overflow:hidden;">
<div>
<img data-u="image" src="/jssor/everlia2/maison-container-equitable.jpg" />
<div style="position:absolute;top:9px;left:84px;width:663px;height:102px;font-family:Roboto,sans-serif;font-size:50px;color:#ffffff;line-height:1;text-align:left;text-shadow:0px 0px 4px;background-color:rgba(255,255,255,0);">
<div>La construction équitable,</div>
<div>nouvelle génération</div>
</div>
<div style="position:absolute;top:9px;left:84px;width:637px;height:107px;font-family:Roboto,sans-serif;font-size:50px;color:#050505;line-height:1;text-align:left;background-color:rgba(255,255,255,0);">
<div>La construction équitable,</div>
<div>nouvelle génération</div>
</div>
<a href="http://www.everlia.com" style="display:block; position:absolute;top:127px;left:87px;width:84px;height:26px;max-width:84px;">
<img style="width:100%;height:100%;" border="0" src="/jssor/everlia2/bouton2.png" />
</a>
</div>
<div>
<img data-u="image" src="/jssor/everlia2/maison-container-evolutive.jpg" />
<div style="position:absolute;top:9px;left:84px;width:897px;height:114px;font-family:Roboto,sans-serif;font-size:50px;color:#ffffff;line-height:1;text-align:left;text-shadow:0px 0px 4px;background-color:rgba(255,255,255,0);">
<div>Construction évolutive,</div>
<div>create your fashion design<br />
</div>
</div>
<div style="position:absolute;top:9px;left:84px;width:870px;height:112px;font-family:Roboto,sans-serif;font-size:50px;color:#050505;line-height:1;text-align:left;background-color:rgba(255,255,255,0);">
<div>Construction évolutive,</div>create your fashion design
</div>
<a href="http://www.everlia.com" style="display:block; position:absolute;top:129px;left:88px;width:84px;height:26px;max-width:84px;">
<img style="width:100%;height:100%;" border="0" src="/jssor/everlia2/bouton2.png" />
</a>
</div>
<div>
<img data-u="image" src="/jssor/everlia2/maisoncontainerclimatique.jpg" />
<div style="position:absolute;top:9px;left:84px;width:962px;height:117px;font-family:Roboto,sans-serif;font-size:50px;color:#ffffff;line-height:1;text-align:left;text-shadow:0px 0px 4px;background-color:rgba(255,255,255,0);">
<div>Une construction climatique<br />et écologique<br />
</div>
</div>
<div style="position:absolute;top:9px;left:84px;width:943px;height:154px;font-family:Roboto,sans-serif;font-size:50px;color:#050505;line-height:1;text-align:left;background-color:rgba(255,255,255,0);">
<div>Une construction climatique</div>
<div>et écologique<br />
</div>
</div>
<a href="http://www.everlia.com" style="display:block; position:absolute;top:129px;left:89px;width:84px;height:26px;max-width:84px;">
<img style="width:100%;height:100%;" border="0" src="/jssor/everlia2/bouton2.png" />
</a>
</div>
<div>
<img data-u="image" src="/jssor/everlia2/maison-container-rapide.jpg" />
<div style="position:absolute;top:9px;left:84px;width:1093px;height:147px;font-family:Roboto,sans-serif;font-size:50px;color:#ffffff;line-height:1;text-align:left;text-shadow:0px 0px 4px;background-color:rgba(255,255,255,0);">
<div>Construction rapide, économique</div>
<div>et performante<br />
</div>
</div>
<div style="position:absolute;top:9px;left:84px;width:1090px;height:107px;font-family:Roboto,sans-serif;font-size:50px;color:#050505;line-height:1;text-align:left;background-color:rgba(255,255,255,0);">
<div>Construction rapide, économique</div>
<div>et performante<br />
</div>
<div></div>
</div>
<a href="http://www.everlia.com" style="display:block; position:absolute;top:129px;left:86px;width:84px;height:26px;max-width:84px;">
<img style="width:100%;height:100%;" border="0" src="/jssor/everlia2/bouton2.png" />
</a>
</div>
<div>
<img data-u="image" src="/jssor/everlia2/maison-container-techno.jpg" />
<div style="position:absolute;top:9px;left:84px;width:1043px;height:153px;font-family:Roboto,sans-serif;font-size:50px;color:#ffffff;line-height:1;text-align:left;text-shadow:0px 0px 4px;background-color:rgba(255,255,255,0);">
<div>Construction container haute</div>
<div>technologie</div>
</div>
<div style="position:absolute;top:9px;left:84px;width:1059px;height:155px;font-family:Roboto,sans-serif;font-size:50px;color:#050505;line-height:1;text-align:left;background-color:rgba(255,255,255,0);">
<div>Construction container haute</div>
<div>technologie</div>
<div></div>
<div></div>
</div>
<a href="http://www.everlia.com" style="display:block; position:absolute;top:129px;left:88px;width:84px;height:26px;max-width:84px;">
<img style="width:100%;height:100%;" border="0" src="/jssor/everlia2/bouton2.png" />
</a>
</div>
</div>
<!-- Bullet Navigator -->
<style>
/* swiper slide*/
.jssorb032 {position: absolute;}
.jssorb032 .i {position:absolute;cursor:pointer;fill:#fff;fill-opacity:1;}
.jssorb032 .1 .b {fill:#bfce00;fill-opacity:1;stroke:#fff;}
.jssorb032 .i:hover .b {fill: #bfce00;}
.jssorb032 .iav .b {fill:#bfce00;}
</style>
<div data-u="navigator" class="jssorb032" style="position:absolute;bottom:12px;right:12px;data-scale="0.5" data-scale-bottom="0.75">
<div data-u="prototype" class="i" style="width:15px;height:15px;">
<svg viewbox="0 0 16000 16000" style="position:absolute;top:0;left:0;width:100%;height:100%;">
<circle class="b" cx="8000" cy="8000" r="5800"></circle>
</svg>
</div>
</div>
</div>
<script type="text/javascript">jssor_1_slider_init();</script>
<!-- #endregion Jssor Slider End -->
May be I do a mistake.
Thank you for your help.
Regards,
Danielle F.

May be I don't understand where I have to change "layer larger with larger font size". I made several tests and if I change something in my slider:
1/ a scroll bar appears in the bottom of the slider
2/ pictures are too large
3/ the button/link is under main text
Furthermore, bullets keeps their small size.
See in my website https://www.assistante-34.com/test.html.
I also precise to you that I'm obliged to add this in the properties of my page so my slider is in full width:
<style>
#imPageRowContent_2,
#imPageRow_2 div[id^="imCell"] {
padding: 0;
width: 100%!important;
height: 100%!important;
}
</style>
Thank your for your enlightened help. I'm not used to using code you know. Regards.
Danielle

Yes, the logic is correct, layers will scale along with the slider.
You can fix it in one of two ways,
Make the layer larger with larger font size.
Specify a class name (e.g. yourlayer) of the layer, write manual media query css code to control the display size of the layer on various resolutions.
<style>
#media screen and (min-width: 1200px) {
.yourlayer {
font-size: 50px !important;
}
}
#media screen and (min-width: 600px) {
.yourlayer {
font-size: 80px !important;
}
}
#media screen and (min-width: 300px) {
.yourlayer {
font-size: 200px !important;
}
}
</style>

How can I display the html email body in a scrollable table cell?

I am trying to build an email inbox browser in vuejs over .NET MVC backend. I am primarily receiving html emails which I want to display in a scrollable table cell.
Here's a sample email body.
html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:w="urn:schemas-microsoft-com:office:word" xmlns:m="http://schemas.microsoft.com/office/2004/12/omml" xmlns="http://www.w3.org/TR/REC-html40">
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=us-ascii">
<meta name=Generator content="Microsoft Word 12 (filtered medium)">
<style><!-- /* Font Definitions */ #font-face {font-family:"Cambria Math"; panose-1:2 4 5 3 5 4 6 3 2 4;} #font-face {font-family:Calibri; panose-1:2 15 5 2 2 2 4 3 2 4;} /* Style Definitions */ p.MsoNormal, li.MsoNormal, div.MsoNormal {margin:0cm; margin-bottom:.0001pt; font-size:11.0pt; font-family:"Calibri","sans-serif";} a:link, span.MsoHyperlink {mso-style-priority:99; color:blue; text-decoration:underline;} a:visited, span.MsoHyperlinkFollowed {mso-style-priority:99; color:purple; text-decoration:underline;} span.EmailStyle17 {mso-style-type:personal-compose; font-family:"Calibri","sans-serif"; color:windowtext;} .MsoChpDefault {mso-style-type:export-only;} #page WordSection1 {size:612.0pt 792.0pt; margin:72.0pt 72.0pt 72.0pt 72.0pt;} div.WordSection1 {page:WordSection1;} -->
</style>
<!--[if gte mso 9]><xml> <o:shapedefaults v:ext="edit" spidmax="1026" /> </xml><![endif]-->
<!--[if gte mso 9]><xml> <o:shapelayout v:ext="edit"> <o:idmap v:ext="edit" data="1" /> </o:shapelayout></xml><![endif]-->
</head>
<body lang=EN-US link=blue vlink=purple>
<div class=WordSection1>
<p class=MsoNormal>
<o:p>Test Email </o:p></p>
</div>
</body>
</html>
Here's my vuejs component
import Vue from 'vue';
import { Component } from 'vue-property-decorator';
interface Email {
to: string;
from: string;
subject: string;
body: string;
}
#Component
export default class FetchDataComponent extends Vue {
inboxEmails: Email[] = [];
mounted() {
fetch('api/Email/InboxEmails')
.then(response => response.json() as Promise<Email[]>)
.then(data => {
this.inboxEmails = data;
});
}
}
And here's template.
<template>
<div>
<h1>Emails</h1>
<p>The following emails are in your inbox</p>
<table v-if="inboxEmails.length" class="table">
<thead>
<tr>
<th>To</th>
<th>From</th>
<th>Subject</th>
<th>Body</th>
</tr>
</thead>
<tbody>
<tr v-for="item in inboxEmails">
<td>{{ item.to }}</td>
<td>{{ item.from }}</td>
<td>{{ item.subject }}</td>
<td><div>{{ item.body }}</div></td>
</tr>
</tbody>
</table>
<p v-else><em>Loading...</em></p>
</div>
</template>
<script src="./emails.ts"></script>
I understand that this is not a scrollable table cell. But I want to solve the display issue first before I put it into a scrollable table cell.

It seems you'd to display the whole email message (<html>email body</html>), if so, uses <iframe :srcdoc="emailBody"> should be one solution.
Check MDN IFrame on the details of property=srcdoc, and the browser compatibility.
let testEmailBody = `<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:w="urn:schemas-microsoft-com:office:word" xmlns:m="http://schemas.microsoft.com/office/2004/12/omml" xmlns="http://www.w3.org/TR/REC-html40">
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=us-ascii">
<meta name=Generator content="Microsoft Word 12 (filtered medium)">
<style><!-- /* Font Definitions */ #font-face {font-family:"Cambria Math"; panose-1:2 4 5 3 5 4 6 3 2 4;} #font-face {font-family:Calibri; panose-1:2 15 5 2 2 2 4 3 2 4;} /* Style Definitions */ p.MsoNormal, li.MsoNormal, div.MsoNormal {margin:0cm; margin-bottom:.0001pt; font-size:11.0pt; font-family:"Calibri","sans-serif";} a:link, span.MsoHyperlink {mso-style-priority:99; color:blue; text-decoration:underline;} a:visited, span.MsoHyperlinkFollowed {mso-style-priority:99; color:purple; text-decoration:underline;} span.EmailStyle17 {mso-style-type:personal-compose; font-family:"Calibri","sans-serif"; color:windowtext;} .MsoChpDefault {mso-style-type:export-only;} #page WordSection1 {size:612.0pt 792.0pt; margin:72.0pt 72.0pt 72.0pt 72.0pt;} div.WordSection1 {page:WordSection1;} -->
</style>
<!--[if gte mso 9]><xml> <o:shapedefaults v:ext="edit" spidmax="1026" /> </xml><![endif]-->
<!--[if gte mso 9]><xml> <o:shapelayout v:ext="edit"> <o:idmap v:ext="edit" data="1" /> </o:shapelayout></xml><![endif]-->
</head>
<body lang=EN-US link=blue vlink=purple>
<div class=WordSection1>
<p class=MsoNormal>
<o:p>Test Email </o:p></p>
<p style="background-color:green;color:white">I am a test!</p>
</div>
</body>
</html>`
Vue.config.productionTip = false
app = new Vue({
el: "#app",
data: {
emails: [
{'from':'stackoverflow', 'to': 'someone#test.com', 'body': testEmailBody},
{'from':'stackoverflow', 'to': 'someone#test.com', 'body': testEmailBody}
]
}
})
<script src="https://unpkg.com/vue#2.5.16/dist/vue.js"></script>
<div id="app">
<div>
<table>
<tr v-for="(email, index) in emails" :key="index">
<td>{{email.from}}</td>
<td>{{email.to}}</td>
<td><iframe :srcdoc="email.body"></iframe></td>
</tr>
</table>
</div>
</div>

Controller cannot go to server Side in mvc

I am doing my application in MVC. I have registration and Login links. I have implemented Login link in all pages. If i click login it is moving to the server side(controller) and opening. MY problem is from whatever page i click login it needs to open in the same window in popup. It means that it doesn't go the server side.
My code is
#model SYTMain.Models.Login
#{
ViewBag.Title = "Login";
Layout = "~/Views/Shared/_Layout_for_login.cshtml";
//Layout = "~/Views/Shared/_Layout_for_login_registration .cshtml";
}
<center><h2>Login</h2></center>
<div id="dialog-modal" title="Login">
#using (Html.BeginForm())
{
#Html.ValidationSummary(true, "Login failed. Check your login details.");
<div style=" margin-bottom: 400px;">
<fieldset>
<legend>Login</legend>
<div class="editor-label">
#Html.LabelFor(u => u.EmailID)
</div>
<div class="editor-field">
#Html.TextBoxFor(u => u.EmailID)
#Html.ValidationMessageFor(u => u.EmailID)
</div>
<div class="editor-label">
#Html.LabelFor(u => u.Password)
</div>
<div class="editor-field">
#Html.PasswordFor(u => u.Password)
#Html.ValidationMessageFor(u => u.Password)
</div>
#*<div class="editor-label">
#Html.CheckBoxFor(u => u.RememberMe)
#Html.LabelFor(u => u.RememberMe)
</div>*#
<input type="submit" value="Log In" />
</fieldset>
</div>
}
</div>
Layout
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>#ViewBag.Title - My ASP.NET MVC Application</title>
#*<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />*#
<meta name="viewport" content="width=device-width" />
#Styles.Render("~/Content/css")
<link href="~/Content/themes/base/jquery-ui.css" rel="stylesheet" />
<link href="~/Content/themes/base/jquery.ui.all.css" rel="stylesheet" />
#Scripts.Render("~/bundles/jquery")
<script src="~/Scripts/jquery-ui-1.8.24.js"></script>
<script src="~/Scripts/Popup/jquery-1.5.1.min.js"></script>
<script src="~/Scripts/Popup/jquery-ui-1.8.11.js"></script>
#Scripts.Render("~/bundles/modernizr")
<script>
$(function () {
$("#dialog-modal").dialog({
width: 400,
height: 200,
show: {
effect: "shake",
duration: 100
},
hide: {
effect: "explode",
duration: 1000
}
});
});
</script>
</head>
<body style=" margin: 0px auto;overflow: scroll; overflow-x: hidden; /* width: 1330px; */height: auto;">
<div class="layoutouter">
<div class="layoutlogo">
#Html.ActionLink("Sell Your Time", "Index", "Home")
</div>
<div class="layoutmenu">
#if (!string.IsNullOrEmpty(Convert.ToString(Session["EmailID"])))
{
#Html.ActionLink("Signout", "Logout", "CU")
}
else
{
#Html.ActionLink("Register", "Create", "CU")
}
</div>
<br /><br />
#*<strong>Welcome #Session["EmailID"]</strong>*#
<div>
#RenderSection("featured", required: false)
</div>
</div>
<div style="width:1000px ; margin:0px auto;">
#RenderBody()
</div>
<div class="layoutfooter">
<div class="layoutfooter_data">
<div class="layout_location">
#Html.ActionLink("Change Location", "yy", "zz")
<span>|</span>
</div>
<div class="layout_feedback">
#Html.ActionLink("Feedback", "yy", "zz")
<span>|</span>
</div>
<div class="layout_help">
#Html.ActionLink("Help", "yy", "zz")
</div>
</div>
<div class="footer_copy">
<p>© #DateTime.Now.Year - acutesoftsys</p>
</div>
<div class="footer_condition">
<div class="footer_term">
<span>|</span>
#Html.ActionLink("Term & Condition", "", "")
</div>
<div class="footer_policy">
#Html.ActionLink("Privacy Policy", "yy", "zz")
</div>
</div>
</div>
#RenderSection("scripts", required: false)
</body>
</html>
My controller code is
[HttpPost, ValidateInput(false)]
public ActionResult Login(Login loginDetails)
{
if (ModelState.IsValid)
{
using (SYTEntities context = new SYTEntities())
{
var LoginUser = context.tblUsers.Where(a => a.EmailID == loginDetails.EmailID && a.Password == loginDetails.Password).FirstOrDefault();
if (LoginUser != null)
{
FormsAuthentication.SetAuthCookie(loginDetails.EmailID, loginDetails.RememberMe);
Session["EmailID"] = LoginUser.EmailID;
Session["UserID"] = LoginUser.UserID;
return RedirectToAction("CalendarView", "Appt", new { CustomerUserid = Session["UserID"]});
// return RedirectToAction("Details/" + Session["UserID"]);
}
else
{
ModelState.AddModelError("", "Login data is incorrect!");
}
}
}
return View(loginDetails);
}
Please help me to achieve this .
Thanks in Advance

Your controller code should look something like this
public ActionResult YourControllerAction( int Userid )
{
//Add your logic here
return PartialView( "UserDetails", model );
}
Your partial view should look like this
#model Models.Login
#{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>login</title>
</head>
<body>
<div>
/*Your markup here*/
</div>
</body>
</html>
Your jQuery code should look something like this.
$('#loginlinkid').on('click', function(evt) {
var $loginDiv = $('#PopUpDiv')
$.get(urlOfYourAction, function(data) {
$loginDiv.replaceWith(data);
});
//Add code to open popup here. eg..bootstrap modal dialog
});
Similar post here Render a partial view inside a Jquery modal popup on top of a parent view

SignalR client script runs only in index page

I'm developing an MVC 4 web application and using signalR library to make a real time notification system.
I have a working script that I use in master page called _Layout.cshtml.
here's the script in _Layout:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title</title>
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
#Scripts.Render("~/bundles/jquery")
<script src="~/Scripts/jquery-ui-1.8.24.min.js"></script>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
<script type="text/javascript" src="Scripts/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="Scripts/jquery.signalR-2.0.1.min.js"></script>
<script src="~/signalr/hubs"></script>
</head>
<body >
<header dir="rtl">
<table align="center" cellpadding="0" cellspacing="0" style="width:100%;">
<tr>
<td style="width:30%; height:40px;" valign="top"><img src="~/Images/header_logo3.png" /></td>
<td style="width: 40%; height: 40px; " valign="top"> <a href='#Url.Action("Index","Home")'><img class="header_logo" src='#Url.Content("~/Images/header_logo2.png")' /></a></td>
<td style="width: 30%; height: 40px; " valign="top" ><img src="~/Images/header_logo4.png" /></td>
</tr>
</table>
<h2>Index</h2>
<span id="mySpanTag"></span>
<script type="text/javascript">
//var notificationHub = $.connection.notificationHub;
$(function () {
//Create Hub on Air
var chat = $.connection.notificationHub;
//Messages
$messages = $("#mySpanTag");
//Client Side Method To Access From Server Side Method
chat.client.sendMessage = function (msg) {
$messages.html(msg);
}
$.connection.hub.start(function () {
chat.server.sendMessage("Hello World!");
});
});
</script>
</header>
<div id="wrapper" dir="rtl">
<div id="Smenu" class="visible">
#{Html.RenderAction("Menu", "SettingsMenu", new { id = "nir"});}
</div>
#RenderSection("JavaScript", false)
<section>
#RenderBody()
</section>
</div>
<footer></footer>
</body>
</html>
the Hub class:
using System.Web;
using Microsoft.AspNet.SignalR.Hubs;
using Microsoft.AspNet.SignalR;
using System.Collections.Concurrent;
using System.Threading.Tasks;
namespace HaifanetMobile.Hubs
{
public class NotificationHub : Hub
{
public void SendMessage(string msg)
{
Clients.All.sendMessage(msg);
}
}
}
Everything goes ok and I see the massage method called from the hub class in my page, except that
this script is running only on the index.cshtml (startup page) and not in all the web pages in the project or in a specific one of them. e.g not working and the script is the same as you can see:
#model schoolnetMobile.Models.UserModel
#{
ViewBag.Title = "Details";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>Index</h2>
<span id="mySpanTag"></span>
<script type="text/javascript">
//var notificationHub = $.connection.notificationHub;
$(function () {
//Create Hub on Air
var chat = $.connection.notificationHub;
//Messages
$messages = $("#mySpanTag");
//Client Side Method To Access From Server Side Method
chat.client.sendMessage = function (msg) {
$messages.html(msg);
}
$.connection.hub.start(function () {
chat.server.sendMessage("Hello World!");
});
});
</script>
<br /><br />
#if (Request.IsAuthenticated) {
<h4>profile: #Model.UserName</h4>
if (User.Identity.Name == #Model.UserName)
{
<br />
<ul style="list-style-type: none;">
<li>first name: #Model.FirstName;</li>
<li>username: #Model.UserName</li>
<li>schoolname: #Model.SchoolName</li>
<li>role: #Model.Role</li>
</ul>
}
else
{
<br />
<ul style="list-style-type: none;">
<li>username: #Model.UserName</li>
<li>school: #Model.SchoolName</li>
<li>role: #Model.Role</li>
</ul>
}
}
else
{
<h4>need to login</h4>
}
Update: I placed the script only if detail.cshtml. Looks like
there is a problem in this line
var chat = $.connection.notificationHub;
as only the first alert("hi") pops up and not the second...
#model HaifanetMobile.Models.UserModel
#{
ViewBag.Title = "Details";
Layout = "~/Views/Shared/_Layout.cshtml";
}
#section Scripts
{
<script type="text/javascript">
$(function () {
//Create Hub on Air
alert("hi");
var chat = $.connection.notificationHub;
alert("hi1");
//Messages
$messages = $("#messages");
alert("hi2");
//Client Side Method To Access From Server Side Method
chat.client.addMessage = function (frm, msg) {
$messages.append("<br /><b>" + frm + ":</b>" + msg);
}
alert("hi3");
$("#txtMsg").keypress(function (e) {
//when enter
if (e.which == 13) {
alert("hi4");
//get value of input
var input = $(this).val();
//send message to "Server Side Method"
chat.server.sendMessage("#Session.SessionID", input);
//Reset TextBox
$(this).val("");
}
});
//Hub Starting
$.connection.hub.start();
});
</script>
}
<div>Your ID: #Session.SessionID</div>
<input type="text" id="txtMsg" />
<div id="messages">
</div>
<h2>Index</h2>
<span id="mySpanTag"></span>
<br /><br />
#if (Request.IsAuthenticated) {
<h4>user profile: #Model.UserName</h4>
if (User.Identity.Name == #Model.UserName)
{
<br />
<ul style="list-style-type: none;">
<li>first name: #Model.FirstName;</li>
<li>user name: #Model.UserName</li>
<li>school: #Model.SchoolName</li>
<li>role: #Model.Role</li>
</ul>
}
else
{
<br />
<ul style="list-style-type: none;">
<li>username: #Model.UserName</li>
<li>school: #Model.SchoolName</li>
<li>role: #Model.Role</li>
</ul>
}
}
else
{
<h4>Please login</h4>
}

Creating Pinterest like layout in ASP.NET webform

I am creating a Pinterest like layout in ASP.NET webform and I followed following two tutorials
Creating Pinetrest like Layout in ASP.NET
How to use Masonry
However, I made changes in the first tutorial based on second and I am getting below output
Clearly, this isn't what I was looking. The gap between two rows and columns is high.
Below is my code:
<
style type="text/css">
body
{
background-color:#EEEEEE;
}
#imgLoad
{
position:fixed;
bottom:0;
left:40%;
display:none;
}
.item {
width: 220px;
margin: 10px;
float: left;
background-color:honeydew;
}
</style>
<div id="container" class="transitions-enabled infinite-scroll clearfix">
<asp:Repeater ID="Repeater1" runat="server">
<ItemTemplate>
<div class="item">
<img src="<%# Eval("Url") %>" />
<p><%# Eval("Description") %></p>
</div>
</ItemTemplate>
</asp:Repeater>
</div>
How do I fix it?
I believe this is related to the height, may be the row height of repeater control takes the highest among the column.
I did tried to do it with ASp.NET MVC
Controller
IEnumerable<Product> model = ProductRepository.GetData(1, 25);
return View(model);
View
<!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<style type="text/css">
.item {
width: 220px;
margin: 5px;
float: left;
background-color:honeydew;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script src="Scripts/Mansory.js" type="text/javascript"></script>
<script type="text/javascript">
var $container = $('#container');
$container.imagesLoaded(function () {
$container.masonry({
itemSelector: '.item',
columnWidth: 100,
isAnimated: false
});
});
</script>
#foreach (var item in Model) {
<div class="item">
<img src="#(item.Url)" />
#Html.DisplayFor(modelItem => item.Description)
</div>
}
but same result
EDIT 1
I have changed my script to
<script type="text/javascript">
$(function () {
var $container = $('#container');
$container.masonry({
itemSelector: '.item',
columnWidth: 240,
isAnimated: false
});
});
</script>
and code to
#foreach (var item in Model) {
<div id="container">
<div class="item">
<img src="#(item.Url)" />
#Html.DisplayFor(modelItem => item.Description)
</div>
</div>
}
but same result

Ok, a few things:
You have spelled "Masonry" wrong when initializing the script
Put a div with Id "container" around your items list
In stead of using $container.imagesLoaded make the whole javascript section run when page is loaded
Like this:
$(function(){
var $container = $('#container');
$container.masonry({
itemSelector: '.item',
columnWidth: 240,
isAnimated: false
});
});
Then it should work.

This is small library which implements Pinterest layout. Filling the grid goes from left to right. Count of columns can be customized in config for each resolution. Columns adaptive changes on resize. Image can be at up or down of pin.
https://github.com/yury-egorenkov/pins-grid