I am currently building a website of the creation of custom computers however I have the problem that my TTFB is very slow when running on my home IIS server. I have multiple websites running on this server and this is the only one with a 20-30s TTFB.
I have used webpagetest.org to test my website and am getting this water fall image.
However I then tester my website on debug using VS and chrome's own Dev Tools and my water fall here give me 1 second. I was wondering how to diagnose and test for the issues either on the server or in my page that may be causing this.
Here is a snippet of my home page code for anyone wondering-
Controller:
namespace ComputerSite.Controllers
{
public class HomeController : Controller
{
public ActionResult Index()
{
return View();
}
Layout (The only part of the page without static content):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title - Computers for you!</title>
#Styles.Render("~/Content/boot")
#Scripts.Render("~/bundles/modernizr")
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/jqueryval")
#Scripts.Render("~/bundles/ajaxgroup")
#Scripts.Render("~/bundles/bootstrap")
#Scripts.Render("~/bundles/datatables")
#Scripts.Render("~/bundles/tawk")
#if (Request.IsAuthenticated)
{
string text = UserHelper.GetUserEmail(User.Identity.Name), key = "MY APIKEY";
System.Text.UTF8Encoding encoding = new System.Text.UTF8Encoding();
Byte[] textBytes = encoding.GetBytes(text);
Byte[] keyBytes = encoding.GetBytes(key);
Byte[] hashBytes;
using (System.Security.Cryptography.HMACSHA256 hash = new System.Security.Cryptography.HMACSHA256(keyBytes)) { hashBytes = hash.ComputeHash(textBytes); }
string hashTxt = BitConverter.ToString(hashBytes).Replace("-", "").ToLower();
<script type="text/javascript">
Tawk_API.onLoad = function(){
Tawk_API.setAttributes({
'name' : '#User.Identity.Name',
'email': '#UserHelper.GetUserEmail(User.Identity.Name)',
'hash': '#hashTxt'
}, function (error) {});
};
</script>
}
#RenderSection("scripts", required: false)
</head>
<body>
#{ Html.RenderPartial("_navBar"); }
<div class="container body-content">
#RenderBody()
<hr />
<footer>
<p>© #DateTime.Now.Year - Building computer for you by you!</p>
</footer>
</div>
</body>
</html>
As requested I created a brand new ASP.net website and debugged it, from this I got a waterfall with a load time of 270 ms and TTFB of 12ms
Related
I have a Razor view Html.DisplayFor where I am displaying some text. Now I want to truncate the text using jquery. I am using the jquery code from this Jquery Truncate.
In my csHtml, I have something like follows, the BlogContent is some string that I am Binding. Of course I think I can do SubString etc in C# on the BlogContent to truncate. But I want to do it using jquery. I have tried the below code but no luck. Please help.
#{
Layout = null;
}
<div class="blog-post-body">
<p class="p-bottom-20">#Html.DisplayFor(modelItem => item.BlogContent)</p>
</div>
#section scripts
{
<script src="~/js/jquery.min.js"></script>
<!-- Bootstrap -->
<script src="~/bootstrap/js/bootstrap.min.js"></script>
<script>
$(document).ready(function () {
$('ul.pagination > li.disabled > a').addClass('page-link');
truncateText(".p-bottom-20", 100);
});
function truncateText(selector, maxLength) {
$(selector).text((i, txt) => txt.length > maxLength ? txt.substr(0, maxLength) + "..." : txt);
};
</script>
}
I don't see any errors on the Browser Console related to this.
If you are using Layout = null; then #section Scripts doesn't work because the section is defined in _Layout.cshtml. You have to add a full html document in your view.
#{
Layout = null;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>title</title>
</head>
<body>
<div class="blog-post-body">
<p class="p-bottom-20">#Html.DisplayFor(modelItem => item.BlogContent)</p>
</div>
<script src="~/js/jquery.min.js"></script>
<script src="~/bootstrap/js/bootstrap.min.js"></script>
<script>
$(document).ready(function() {
$('ul.pagination > li.disabled > a').addClass('page-link');
truncateText(".p-bottom-20", 100);
});
function truncateText(selector, maxLength) {
$(selector).text((i, txt) => txt.length > maxLength ? txt.substr(0, maxLength) + "..." : txt);
}
</script>
</body>
</html>
So I've been browsing other threads, however none of the fixes I've found have solved my issue. I hope some of the more experienced coders here will be kind enough to help me out, mods I'm sorry if it turns out I'm being stupid here.
So I've built an app in Angular for an asp.net web app, the angular module should be displaying data from an entity model and displaying it inside a div.
Right now the code is not working, and I have no errors. From what I've seen I suspect its the Booking-controller however I cannot fathom what's wrong.
Here's my code
_Layout.cshtml
` <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title - Web App</title>
#Styles.Render("~/Content/css")
#Styles.Render("~/Content/js")
#Scripts.Render("~/bundles/angular")
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/modernizr")
#Scripts.Render("~/bundles/bootstrap")
</head>
<body ng-app="BookingsApp">
//a bunch of navbar stuff and other content
#RenderSection("scripts", required: false)
</body>
</html>
`
HomeController.cs
`using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace WebApp.Controllers
{
public class HomeController : Controller
{
//More navigation stuff
public JsonResult GetAll()
{
List<Booking_form> Booking = new List<Booking_form>();
using (BookingEntities1 ed = new BookingEntities1())
{
Booking = ed.Booking_forms.ToList();
return new JsonResult { Data = Booking, JsonRequestBehavior = JsonRequestBehavior.AllowGet };
}
}
}
}
Page where I expect booking to be displayed
#section scripts{
<script src="~/Content/Angular/BookingModule.js"></script>
<script src="~/Content/Angular/BookingController.js"></script>
<script src="~/Content/Angular/BookingService.js"></script>
<link href="~/Content/TableStyle.css" rel="stylesheet" />
}
<div ng-controller="BookingController">
<table>
<tr>
<th>Id</th>
<th>Class</th>
<th>Day</th>
</tr>
<tr></tr>
<tr ng-repeat="e in BookingList">
<td>{{e.BookingId}}</td>
<td>{{e.ClassName}}</td>
<td>
{{e.Day}}
</td>
</tr>
</table>
</div>
Angular Module
var app = angular.module('BookingsApp',[]);
Angular Service
app.service('BookingService', function ($http) {
this.getBookings=function () {
return $http.get('/HomeController/GetAll');
}
});
Angular Controller
`app.controller('BookingController',function($scope,BookingService) {
function getBookingList() {
BookingService.getBookings().then(function (emp) {
$scope.BookingList = emp.data;
}, function (error) {
alert('Failed to fetch data');
});
}
});
`
I'd prefer to have a div on the page displaying the info with the ng-app="BookingApp" line, however this caused the BookingController reference to cause errors.
Any help would be greatly appreciated.
Edit:
Having looked again through browser console this message appears for all 3 angular scripts:
`Resource interpreted as Stylesheet but transferred with MIME type application/javascript: "http://localhost:49532/Content/Angular/BookingModule.js".
Solved, had to do a complete rebuild and make use of the service factory. For anyone else encountering this issue, see the provided link for a tutorial.
http://www.infragistics.com/community/blogs/dhananjay_kumar/archive/2015/05/13/how-to-use-angularjs-in-asp-net-mvc-and-entity-framework-4.aspx
note this solution will not work if solution uses multiple tables with foreign key dependencies.
I have a Partial View in my Layout page which contain a Form. The partial view open as popup. After submitting form I have to return back to the current page with opened popup and a success message should appear there but I am not able to return back to the right view.
My Layout Page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>#ViewBag.Title || Midas WebSite</title>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/jqueryui")
#Scripts.Render("~/bundles/site")
#Scripts.Render("~/bundles/modernizr")
<script type="text/javascript" language="javascript">
/* Superior Web Systems */
function displayHideBox(boxNumber) {
if (document.getElementById("LightBox" + boxNumber).style.display == "none") {
$("#LightBox" + boxNumber).fadeIn();
$("#grayBG").fadeIn();
} else {
$("#LightBox" + boxNumber).fadeOut();
$("#grayBG").fadeOut();
}
}
</script>
</head>
<body>
<div id="grayBG" class="grayBox" style="display:none;"></div>
<div id="LightBox1" class="box_content" style="display:none;">
<div onclick="displayHideBox('1'); return false;" class="close">X</div>
#Html.Action("ActionToBindPartialView", "ControllerName")
</div>
#RenderBody()
#RenderSection("scripts", required: false)
#Scripts.Render("~/bundles/jqueryval")
My Partial View
<div id="divActions">
// My Form Here
#Ajax.ActionLink("Submit", "ActionName", "ControllerName", new AjaxOptions
{
HttpMethod = "POST",
UpdateTargetId = "divActions",
OnSuccess = "onSucess()"
})
</div>
Now my action code which I have tried so far:
1.
// My Code
return PartialView("MyPartialView");
2
// My Code
return PartialView("MyPartialView", MyModel);
3
// My Code
return View();
4
// My Code
return ParialView();
I am a beginner and not able to find what I am doing wrong. Please suggest what should I do to make this work.
It is hard to say what you are doing wrong, due to the limited workspace that we have to discuss the problem. However here is a working example that may help you, please follow each step:
Bundles
bundles.Add(new ScriptBundle("~/bundles/jquery")
.Include("~/Scripts/jquery-{version}.js"));
bundles.Add(new ScriptBundle("~/bundles/jqueryval")
.Include(
"~/Scripts/jquery.unobtrusive*",
"~/Scripts/jquery.validate*"));
HomeController
public ActionResult Index()
{
return View();
}
public PartialViewResult GetPartial()
{
return PartialView("_MyPartial");
}
Index.cshtml
<h2>Index</h2>
<div id="divActions">
#Ajax.ActionLink("Submit", "GetPartial", "Home", new AjaxOptions
{
HttpMethod = "POST",
UpdateTargetId = "divActions",
OnSuccess="onSuccess()"
})
</div>
<script type="text/javascript">
function onSuccess()
{
alert("Success!");
}
</script>
_MyPartial.cshtml
<h2>_MyPartial</h2>
_Layout.cshtml
<!DOCTYPE html>
<html>
<head>
<title>#ViewBag.Title</title>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
</head>
<body>
#RenderBody()
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/jqueryval")
#RenderSection("scripts", required: false)
</body>
</html>
To confirm the rendered scripts in the page source (in the browser):
<script src="/Scripts/jquery-1.8.2.js"></script>
<script src="/Scripts/jquery.unobtrusive-ajax.js"></script>
<script src="/Scripts/jquery.validate.js"></script>
<script src="/Scripts/jquery.validate.unobtrusive.js"></script>
As you can see, there is nothing hard about it. You just need to follow the steps above.
I hope it helps.
Hint: check for other scripts errors, maybe your custom code to show the popup is causing a error. Double check if you are rendering javascript inside the partial view. Consider extract it to the regular view.
How to add link to JavaScript file into the header of the certain ASP .NET MVC page?
Lets say there are _Layout.cshtml and About.cshtml and I need to put some javascript file to the header of the About.cshtml. I mean to that page only.
http://www.dotnetcurry.com/ShowArticle.aspx?ID=636
How it can be done?
Why must it be in the header? You can include any script you need inline:
<script src="#Url.Content("~/Scripts/jquery-ui.min.js")" type="text/javascript"></script>
My solution:
_Layout.cshtml
!DOCTYPE html>
<html>
<head>
<title>#ViewBag.Title</title>
<link href="#Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<script src="#Url.Content("~/Scripts/jquery-1.4.4.min.js")" type="text/javascript"></script>
#if (IsSectionDefined("AddToHead"))
{
#RenderSection("AddToHead", required: false)
}
</head>
About.cshtml
#{
ViewBag.Title = "Index";
}
<h2>Index</h2>
#section footer {
<b>Footer Here</b>
}
#section AddToHead {
<script src="#Url.Content("~/Scripts/test.js")" type="text/javascript">
</script>
}
Try below code
HtmlGenericControl my_js = new HtmlGenericControl("script");
my_js.Attributes["async"] = "async";
my_js.Attributes["type"] = "text/javascript";
my_js.Attributes["src"] = "http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js";
Page.Header.Controls.Add(my_js);
You need to use namespace : "using System.Web.UI.HtmlControls" to use HtmlGenericControl.
I have two methods and first one returns a video file, the other one returns thumbnail image.
public ActionResult Video(string id)
{
UserVideo videoEntity = AccountBasicEntity.GetUserVideoWithID(id);
string videoPath = ConfigurationManager.AppSettings["VideoPath"] + videoEntity.VideoFileName;
return File(videoPath, "video/mp4");
}
public ActionResult Thumb(string id)
{
UserVideo videoEntity = AccountBasicEntity.GetUserVideoWithID(id);
string thumbPath = ConfigurationManager.AppSettings["ThumbsPath"] + videoEntity.PreviewImageFileName;
return File(thumbPath, "image/jpg");
}
and I can reach the urls as
http://localhost/media/video/GTt-b2DcEG ( returns video file )
http://localhost/media/thumb/GTt-b2DcEG ( returns image file )
The method works fine which returns image file. But the other one doesn't work, browser (chrome) doesn't play or jPlayer doesn't play the video file But browser or jplayer shows the thumbnail image. I debugged and paths are ok.
Video path is : C:\Web\data\videos\GTt-b2DcEG.mp4
Image path is : C:\Web\data\thumbs\GTt-b2DcEG.jpg
Do I miss something ? what is the best way to feed a ajax-based video player in this situation?
Thanks.
Client side :
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<!-- Website Design By: www.happyworm.com -->
<title>Demo : jPlayer as a video player</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="skin/pink.flag/jplayer.pink.flag.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.jplayer.min.js"></script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
$("#jquery_jplayer_1").jPlayer({
ready: function () {
$(this).jPlayer("setMedia", {
m4v: "http://localhost/media/video/GTt-b2DcEG",
poster: "http://localhost/media/thumb/GTt-b2DcEG"
});
},
swfPath: "js",
supplied: "webmv, ogv, m4v",
size: {
width: "640px",
height: "360px",
cssClass: "jp-video-360p"
}
});
});
//]]>
</script>
</head>
<body>
<div id="jp_container_1" class="jp-video jp-video-360p">
<div class="jp-type-single">
<div id="jquery_jplayer_1" class="jp-jplayer"></div>
<div class="jp-gui">
<div class="jp-video-play">
play
</div>
<div class="jp-interface">
<div class="jp-progress">
<div class="jp-seek-bar">
<div class="jp-play-bar"></div>
</div>
</div>
<div class="jp-current-time"></div>
<div class="jp-duration"></div>
<div class="jp-title">
<ul>
<li>Big Buck Bunny Trailer</li>
</ul>
</div>
<div class="jp-controls-holder">
<ul class="jp-controls">
<li>play</li>
<li>pause</li>
<li>stop</li>
<li>mute</li>
<li>unmute</li>
<li>max volume</li>
</ul>
<div class="jp-volume-bar">
<div class="jp-volume-bar-value"></div>
</div>
<ul class="jp-toggles">
<li>full screen</li>
<li>restore screen</li>
<li>repeat</li>
<li>repeat off</li>
</ul>
</div>
</div>
</div>
<div class="jp-no-solution">
<span>Update Required</span>
To play the media you will need to either update your browser to a recent version or update your Flash plugin.
</div>
</div>
</div>
</body>
</html>
You didn't mention what troubleshooting you had already done.
When I've had this issue in the past, the first thing I check is that you have added the mime type in IIS. By default, IIS 6 & 7 won't serve up content for mime types that are not configured.
How to add mime types with IIS7 Web.config
Next would be that the codec used to encode the mp4 is playable by the jPlayer.
jPlayer Media Encoding