I'm trying to upload an image with Fineuploader processing it with Razor (not MVC).
The error I get is:
Error when Attempting to parse XHR response text (Unexpected token {).
The code is this:
test.cshtml
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<link href="assets/fine-uploader.css" rel="stylesheet">
<link href="fineuploader-4.2.2.min.css" rel="stylesheet">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="jquery.fineuploader-4.2.2.js"></script>
<script src="jquery.fineuploader-4.2.2.min.js"></script>
</head>
<body>
<div id="fine-uploader"></div>
<script src="assets/fine-uploader.js"></script>
<script type="text/template" id="qq-template">
<div class="qq-uploader-selector qq-uploader">
<div class="qq-total-progress-bar-container-selector qq-total-progress-bar-container">
<div class="qq-total-progress-bar-selector qq-progress-bar qq-total-progress-bar"></div>
</div>
<div class="qq-upload-drop-area-selector qq-upload-drop-area" qq-hide-dropzone>
<span>Drop files here to upload</span>
</div>
<div class="qq-upload-button-selector qq-upload-button">
<div>Upload a file</div>
</div>
<span class="qq-drop-processing-selector qq-drop-processing">
<span>Processing dropped files...</span>
<span class="qq-drop-processing-spinner-selector qq-drop-processing-spinner"></span>
</span>
<ul class="qq-upload-list-selector qq-upload-list">
<li>
<div class="qq-progress-bar-container-selector">
<div class="qq-progress-bar-selector qq-progress-bar"></div>
</div>
<span class="qq-upload-spinner-selector qq-upload-spinner"></span>
<span class="qq-edit-filename-icon-selector qq-edit-filename-icon"></span>
<span class="qq-upload-file-selector qq-upload-file"></span>
<input class="qq-edit-filename-selector qq-edit-filename" tabindex="0" type="text">
<span class="qq-upload-size-selector qq-upload-size"></span>
<a class="qq-upload-cancel-selector qq-upload-cancel" href="#">Cancel</a>
<a class="qq-upload-retry-selector qq-upload-retry" href="#">Retry</a>
<a class="qq-upload-delete-selector qq-upload-delete" href="#">Delete</a>
<span class="qq-upload-status-text-selector qq-upload-status-text"></span>
</li>
</ul>
</div>
</script>
</body>
</html>
fine-uploader.js
function createUploader() {
var uploader = new qq.FineUploader({
// Pass the HTML element here
// element: document.getElementById('fine-uploader'),
// or, if using jQuery
element: $('#fine-uploader')[0],
// Use the relevant server script url here
// if it's different from the default “/server/upload”
text: {
uploadButton: 'SELEZIONA FILE'
},
request: {
`enter code here` multiple: false,
validation: {
sizeLimit: 2147483648 //2GB
},
endpoint: 'FileUpload.cshtml',
forceMultipart: false,
customHeaders: { Accept: 'application/json' },
debug: true,
//
callbacks: {
onComplete: function (id, fileName, responseJSON) {
if (responseJSON.success) {
$('#imgPreview').html('<img src="~/Scripts/fineuploader/upload/' + filename + '" alt="' + filename + '">');
}
}
}
//
}
});
}
FineUpload.cshtml
#{
if(IsPost) {
var file = Request.Files[0];
var fileName = Path.GetFileName(file.FileName);
var rootPath = Server.MapPath("~/Scripts/fineuploader/upload/");
file.SaveAs(Path.Combine(rootPath, fileName));
// Json.Write(fileSavePath, Response.Output);
var json = Html.Raw(Json.Encode(new { link = #"~/Scripts/fineuploader/upload/" + fileName}));
//Response.ContentType = "text/plain";
Response.Write(json);
Response.ContentType = "application/json";
Response.Write("{\"success\":true}");
Response.End();
}
}
Related
It appears that after solving my previous issue with CSS, I've come into another roadblock. I was trying to do the "Optimization: Server-side rendering" exercise from the reactjs.net website. Unfortunately, problem - I can't use the "#Html.React" method in the razor view to pass the Comment Box model. I've tried several what were probably unnecessary imports, and ensuring that my ReactConfig file was updated so that I could use that code. Can anyone tell me what I'm missing here?
ReactConfig.cs:
using React;
[assembly: WebActivatorEx.PreApplicationStartMethod(typeof(ReactExamplePractice.ReactConfig), "Configure")]
namespace ReactExamplePractice
{
using React;
public static class ReactConfig
{
public static void Configure()
{
// If you want to use server-side rendering of React components,
// add all the necessary JavaScript files here. This includes
// your components as well as all of their dependencies.
// See http://reactjs.net/ for more information. Example:
//ReactSiteConfiguration.Configuration
// .AddScript("~/Scripts/First.jsx")
// .AddScript("~/Scripts/Second.jsx");
ReactSiteConfiguration.Configuration = new ReactSiteConfiguration()
.AddScript("~/Scripts/react/Tutorial.jsx");
//ReactSiteConfiguration.Configuration
// //.AddScript("~/js/remarkable.min.js")
// .AddScript("~/Scripts/react/Tutorial.jsx");
// If you use an external build too (for example, Babel, Webpack,
// Browserify or Gulp), you can improve performance by disabling
// ReactJS.NET's version of Babel and loading the pre-transpiled
// scripts. Example:
//ReactSiteConfiguration.Configuration
// .SetLoadBabel(false)
// .AddScriptWithoutTransform("~/Scripts/bundle.server.js")
}
}
}
BundleConfig.cs:
using System.Web;
using System.Web.Optimization;
using System.Web.Optimization.React;
namespace ReactExamplePractice
{
public class BundleConfig
{
// For more information on bundling, visit https://go.microsoft.com/fwlink/?LinkId=301862
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js"));
bundles.Add(new BabelBundle("~/bundles/main").Include(
"~/Scripts/react/Tutorial.jsx"
));
// Forces files to be combined and minified in debug mode
// Only used here to demonstrate how combination/minification works
// Normally you would use unminified versions in debug mode.
BundleTable.EnableOptimizations = true;
bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
"~/Scripts/jquery.validate*"));
// Use the development version of Modernizr to develop with and learn from. Then, when you're
// ready for production, use the build tool at https://modernizr.com to pick only the tests you need.
bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
"~/Scripts/modernizr-*"));
bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
"~/Scripts/bootstrap.js"));
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/bootstrap.css",
"~/Content/site.css"));
}
}
}
_Layout.cshtml:
#using System.Web.Optimization.React;
#using React;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
#*<environment exclude="Development">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
</environment>*#
<environment exclude="Development">
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
</environment>
<title>#ViewData["Title"] - ASP.NET Core Pages Webpack</title>
#model IEnumerable<ReactExamplePractice.Models.CommentModel>
#{
Layout = null;
}
</head>
<body>
<div class="container">
<nav class="bg-dark mb-4 navbar navbar-dark navbar-expand-md">
<a asp-page="/Index" class="navbar-brand">
<em>ASP.NET Core Pages Webpack</em>
</a>
<button aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler" data-target="#topNavbarCollapse" data-toggle="collapse" type="button">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="topNavbarCollapse">
<ul class="mr-auto navbar-nav">
<li class="nav-item">
#Html.ActionLink("Application Name", "Index", "Default", new { area = "" }, new { #class = "navbar-brand" })
</li>
<li class="nav-item">
<a asp-page="/About" class="nav-link">About</a>
</li>
<li class="nav-item">
<a asp-page="/Contact" class="nav-link">Contact</a>
</li>
</ul>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="https://twitter.com/damien_bod">
<img height="30" src="assets/damienbod.jpg" />
</a>
</li>
</ul>
</div>
</nav>
</div>
<partial name="_CookieConsentPartial" />
<div class="container body-content">
#RenderBody()
<hr />
<footer>
<p>© 2018 - ASP.NET Core Pages Webpack Bootstrap 4</p>
</footer>
</div>
<environment exclude="Development">
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
#*<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>*#
<script src="~/Scripts/jquery-3.3.1.slim.min.js"></script>
<script src="~/Scripts/popper.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/remarkable/1.7.1/remarkable.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prop-types/15.6.0/prop-types.js"></script>
#Scripts.Render("~/bundles/main");
#*<script src="#Url.Content("~/Scripts/react/Tutorial.jsx")"></script>*#
</environment>
#RenderSection("Scripts", required: false)
</body>
</html>
DefaultController.cs:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Web.UI;
using ReactExamplePractice.Models;
using System.Web.Optimization.React;
using React;
namespace ReactExamplePractice.Controllers
{
public class DefaultController : Controller
{
private static readonly IList<CommentModel> _comments;
static DefaultController()
{
_comments = new List<CommentModel>
{
new CommentModel
{
Id = 1,
Author = "Daniel Lo Nigro",
Text = "Hello ReactJS.NET World!"
},
new CommentModel
{
Id = 2,
Author = "Pete Hunt",
Text = "This is one comment"
},
new CommentModel
{
Id = 3,
Author = "Jordan Walke",
Text = "This is *another* comment"
},
};
}
[OutputCache(Location = OutputCacheLocation.None)]
public ActionResult Comments()
{
return Json(_comments, JsonRequestBehavior.AllowGet);
}
[HttpPost]
public ActionResult AddComment(CommentModel comment)
{
//Create a fake ID for this comment or something
comment.Id = _comments.Count + 1;
_comments.Add(comment);
return Content("Success :)");
}
// GET: Default
public ActionResult Index()
{
return View();
}
}
}
Tutorial.jsx:
class CommentBox extends React.Component {
constructor(props) {
super(props);
this.state = { data: this.props.initialData };
this.handleCommentSubmit = this.handleCommentSubmit.bind(this);
}
loadCommentsFromServer() {
const xhr = new XMLHttpRequest();
xhr.open('get', this.props.url, true);
xhr.onload = () => {
const data = JSON.parse(xhr.responseText);
this.setState({ data: data });
};
xhr.send();
}
handleCommentSubmit(comment) {
const comments = this.state.data;
// Optimistically set an id on the new comment. It will be replaced by an
// use a more robust system for ID generation.
// id generated by the server. In a production application you would likely
comment.Id = comments.length + 1;
const newComments = comments.concat([comment]);
this.setState({data: newComments});
const data = new FormData();
data.append('Author', comment.Author);
data.append('Text', comment.Text);
const xhr = new XMLHttpRequest();
xhr.open('post', this.props.submitUrl, true);
xhr.onload = () => this.loadCommentsFromServer();
xhr.send(data);
}
componentDidMount() {
window.setInterval(() => this.loadCommentsFromServer(), this.props.pollInterval);
}
render() {
return (
<div className="commentBox">
<h1>Comments</h1>
<CommentList data={this.state.data} />
<CommentForm onCommentSubmit={this.handleCommentSubmit} />
</div>
);
}
}
class CommentList extends React.Component {
render() {
const commentNodes = this.props.data.map(comment => (
<Comment author={comment.Author} key={comment.Id}>
{comment.Text}
</Comment>
));
return (
<div className="commentList">
{commentNodes}
</div>
);
}
}
class CommentForm extends React.Component {
constructor(props) {
super(props);
this.state = { author: '', text: '' };
this.handleAuthorChange = this.handleAuthorChange.bind(this);
this.handleTextChange = this.handleTextChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleAuthorChange(e) {
this.setState({author: e.target.value});
}
handleTextChange(e) {
this.setState({ text: e.target.value });
}
handleSubmit(e) {
e.preventDefault();
const author = this.state.author.trim();
const text = this.state.text.trim();
if (!text || !author) {
return;
}
this.props.onCommentSubmit({Author: author, Text: text});
this.setState({ author: '', text: '' });
}
render() {
return (
<form className="commentForm" onSubmit={this.handleSubmit} >
<input type="text" placeholder="Your name" value={this.state.author} onChange={this.handleAuthorChange} />
<input type="text" placeholder="Post something here!" value={this.state.text} onChange={this.handleTextChange} />
<input type="submit" value="Post" />
</form>
);
}
}
class Comment extends React.Component {
rawMarkup() {
const md = new (global.Remarkable || window.Remarkable)();
const rawMarkup = md.render(this.props.children.toString());
return { __html: rawMarkup };
}
render() {
return (
<div className="comment">
<h2 className="commentAuthor">
{this.props.author}
</h2>
<span dangerouslySetInnerHTML={this.rawMarkup()} />
</div>
);
}
}
class HelloWorld extends React.Component {
render() {
return (
<div>
<h1> Hello World React JS! </h1>
</div>)
}
}
//ReactDOM.render(
// <CommentBox url="/comments" submitUrl="/comments/new" pollInterval={2000} />,
// document.getElementById('content')
//);
Any help/insight on this would be greatly appreciated. Thanks a ton in advance!
So, I've come to discover something odd, and maybe it's just my Visual Studio environment or something else, but when using the Html.React library from the NuGet package, it would fail to load the methods at first - but then, as soon as I saved the project, exited, and opened back up, this intellisense glitch disappeared!
I also want to mention quickly that there is a bug in the Remarkable library in the ASP.NET tutorial online. See the following post:
https://github.com/reactjs/React.NET/issues/349
I believe there is a workaround in there for this bug as well, whoever needs it.
This scenario was a strange one. I hope this post helps someone else down the road.
I am trying to make a simple HTTP:GET request using Unity to a local NodeJs Server.
My network is protected by proxy but, in this case, I am requesting to localhost.
By the way, the request works if I test it on browser or Postman.
I believe that maybe it is something related to the headers. From UnityWebRequest.SetRequestHeader documentation:
These headers cannot be set with custom values on any platform: accept-charset, access-control-request-headers, access-control-request-method, connection, date, dnt, expect, host, keep-alive, origin, referer, te, trailer, transfer-encoding, upgrade, via.
What I don't understand is why it is hitting the proxy?
Below are the scripts I used and the response.
NodeJs server
const express = require('express');
const app = express();
app.get('/', function(req, res) {
console.log('test');
return res.sendStatus(200);
})
app.listen(8080, () => {
console.log(`Magic happens on port 8080`);
});
module.exports = app;
Unity Script
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.Networking;
public class Request : MonoBehaviour
{
private GUIStyle guiStyle = new GUIStyle ();
string uri = "http://127.0.0.1:8080";
void Start ()
{
Get();
}
void Update ()
{
}
public void Get ()
{
StartCoroutine (SendGet ());
}
IEnumerator SendGet ()
{
Debug.Log (uri);
using (UnityWebRequest www = UnityWebRequest.Get (uri)) {
yield return www.Send ();
if (www.isError) {
Debug.Log (www.error);
} else {
Debug.Log (www.downloadHandler.text);
byte[] results = www.downloadHandler.data;
Debug.Log (results);
}
}
}
}
Output
<!DOCTYPE html>
<!--
Message.TemplateName: authenticationrequired
Message.Language: Fallback
-->
<html>
<!-- head -->
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/>
<title>McAfee Web Gateway - Notification - Authentication Required</title>
<script src="/mwg-internal/de5fs23hu73ds/files/javascript/sw.js" type="text/javascript" ></script>
<link rel="stylesheet" type="text/css" href="/mwg-internal/de5fs23hu73ds/files/system/stylesheet.css" />
</head>
<!-- /head -->
<!-- body -->
<body onload="swOnLoad();" style="background-image: url('/mwg-internal/de5fs23hu73ds/files/system/img/bg_body.jpg');">
<!-- wrapper -->
<div class="wrapper">
<!-- maincontent -->
<div class="maincontent" style="background-image: url('/mwg-internal/de5fs23hu73ds/files/system/img/bg_container.png');">
<div class="header" id="header" style="background-image: url('/mwg-internal/de5fs23hu73ds/files/system/img/bg_navbar.png');">
Authentication Required
</div>
<!-- content -->
<div class="content">
You must be authenticated to access this URL.<br/>
<div class="info">
<!-- Client IP -->
<b>Client IP:</b> 10.0.20.188
<br/>
<!-- URL -->
<b>URL:</b> <script type="text/javascript">break_line("http://localhost:8080");</script>
<br/>
</div>
</div>
<!-- /content -->
<!-- action -->
<!-- spacer --><div style="height: 10px;"></div><!-- /spacer -->
<div class="action">
<form name="ftpform" method="get" action="" id="ftpform" style="display:none;">
<table>
<tr><td><b>FTP User Name:</b></td><td><input type="text" name="ftpUsername" id="ftpUsername" /></td></tr>
<tr><td><b>FTP Password:</b></td><td><input type="password" name="ftpPassword" id="ftpPassword" /></td></tr>
<tr><td><b>Please confirm:</b></td><td><input type="button" value="Access FTP" onClick="redirectToFTP();" /></td></tr>
</table>
</form>
</div>
<script language="javascript" type="text/javascript">
urlprotocol = "http";
statuscode=407;
if(statuscode==401 && urlprotocol == "ftp"){
document.getElementById("ftpform").style.display = "block";
}
function redirectToFTP(){
var username=escape(document.getElementById("ftpUsername").value);
var password=escape(document.getElementById("ftpPassword").value);
location.href = "ftp://"+username+":"+password+"#localhost:8080"
}
</script>
<!-- /action -->
<!-- footer -->
<div class="footer">
generated 2018-03-20 08:28:01
by MWGBP01 <span class="notdisplayfalse">(10.0.1.186:8080)</span><br/>
Autenticação: Active Directory(Autenticação: Proxy explícito)
</div>
<!-- /footer -->
</div>
<!-- /maincontent -->
</div>
<!-- /wrapper -->
</body>
<!-- /body -->
</html>
UnityEngine.Debug:Log(Object)
<SendGet>c__Iterator0:MoveNext() (at Assets/Scripts/Request.cs:39)
UnityEngine.SetupCoroutine:InvokeMoveNext(IEnumerator, IntPtr)
I am new to AngularJS programming. Any help would be highly appreciated.
A HTML text box will be created each time a HTML button is clicked.
In webform1.aspx submit button click even cannot capture the values entered in those text boxes.
I used request.form, loop through controls in the form1 but cannot find dynamically created controls.
How to post and see the data entered in those textboxes from code behind?
Please find the code below:
webform1.aspx
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://raw.githubusercontent.com/eligrey/FileSaver.js/master/FileSaver.js"></script>
</head>
<body>
<form id="form1" runat="`server">
<div>
<div ng-app="myApp" ng-controller="myCtrl">
<li ng-repeat="element in elements ">
<input type="text" ng-model="element.id" runat=server/>
</li>
<input type="button" value="+" ng-click="newItem()" />
</div>
</form>
</body>
<script language="JavaScript">
var app = angular. Module('myApp', []);
app.controller('myCtrl', function ($scope) {
var counter = 0;
$scope.elements = [{ id: counter, value: ''}];
$scope.newItem = function () {
if ($scope.elements[counter].value != '') {
counter++;
var str1 = 'txtdynamic';
str1 += counter;
$scope.elements.push({ id: str1, value: '' });
}
}
});
</script>
</html>
webform1.aspx.cs
protected void Button2_Click(object sender, EventArgs e)
{
//get the html ng repeat textbox control values
}
Try it the right way my friend. Compare the following codes with your approach.
> demo fiddle.
View
<div ng-controller="myCtrl">
<form id="form1" runat="`server">
<div>
<div ng-app="myApp" ng-controller="myCtrl">
<li ng-repeat="element in elements">
<input type="text" ng-model="elements[element.id].value" runat=server/>
</li>
<input type="button" value="+" ng-click="newItem()" />
<input type="button" value="send" ng-click="ButtonClick()" />
</div>
</div>
</form>
</div>
AngularJS application
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
var counter = 0;
$scope.elements = [{
id: counter,
value: ''
}];
$scope.newItem = function() {
if ($scope.elements[counter].value != '') {
counter++;
var str1 = 'txtdynamic';
str1 += counter;
$scope.elements.push({
id: str1,
value: ''
});
}
}
$scope.ButtonClick = function() {
var post = $http({
method: "POST",
url: "/Home/AjaxMethod",
dataType: 'json',
data: {
id: angular.isDefined($scope.elements[0]) ? $scope.elements[0].value : null
},
headers: {
"Content-Type": "application/json"
}
});
}
});
I am really new to MVC and C#
I modified the _Layout.cshtml to have a menu and on click of any menu item I have a jquery function to create sub menu items based on the parent that I clicked. When I click on any link in the sub menu It reloads the master page and clears my sub menu which is something I don't like. Can someone help me recreate dynamically the same sub menu after page reload or any idea to fix that issue is welcome
OK
I created a controller that I am accessing in my _Layout to create my menu bar
public abstract class MainController : Controller
{
private static HRMenuDataContext db = new HRMenuDataContext();
public static string theVal, toCheck;
public static int num;
public static HRMenuDataContext theData
{
get { return db; }
}
public MainController()
{
//ViewData["Parent"] = from c in theData.psHCMLanguages
// where
// (from m in theData.psHCMMenus
// where
// m.sModule == "AP"
// select m.sMainRef
// ).Distinct().Contains(c.szCode)
// select c;
ViewData["parent"] = theData.theParent("HR");
ViewData["check"] = theData.doCheck(toCheck);
ViewData["Child"] = from c in theData.psHCMLanguages
where
(from m in theData.psHCMMenu_1s
let parent = theVal
where
m.sModule == "HR" &&
m.sSubRef == parent
select
m.sPrompt
).Contains(c.szCode)
select c;
}
}
in my _Layout.cshtml I have this
#using Menus.Data;
#using Menus.Controllers;
#using System.Linq;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>#ViewBag.Title - Persol Systems</title>
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
<link href="~/Content/theStyle.css" rel="stylesheet" />
<style type="text/css">
#theSide {
clear:both;
position:relative;
float:left;
left:100px;
bottom:50px;
top:0;
border:1px solid red;
width:150px;
height:600px;
}
</style>
</head>
<body>
#{
string[] name;
char[] sep = { ' ', '/', '\\', '.' };
string mess="";
}
<header>
<div class="content-wrapper">
<div class="float-left">
<p class="site-title">#Html.ActionLink("your logo here", "Index", "Home")</p>
</div>
<div class="float-right">
<section id="login">
#Html.Partial("_LoginPartial")
</section>
<nav>
<ul id="menux">
#{
foreach (var c in (IEnumerable<theParentResult>)ViewData["parent"])
{
<li><a>#c.English </a>
#{MainController.theVal = c.szCode;}
<ul class="firstChild">
#{foreach (var d in (IEnumerable<psHCMLanguage>)ViewData["Child"])
{
var data = MainController.theData.doCheck(d.szCode);
if ((int)data == 1)
{
<li><a onclick="theAlert('#d.szCode','#d.English')">#d.English</a>
#{
MainController.theVal = d.szCode;
}
</li>
}
else if (data == 0)
{
name = d.English.Split(sep);
foreach (string nams in name)
{
mess += nams;
}
<li>
<a onclick="theAlert('#d.szCode','#d.English')">#d.English</a>
#*#Html.ActionLink(d.English, mess, c.English)*#
</li>
mess = "";
Array.Clear(name, 0, name.Length);
}
}
}
</ul>
</li>
}
}
</ul>
</nav>
</div>
</div>
</header>
<div id="body">
<div id="theSide">
<ul id="sidePanel">
</ul>
</div>
#RenderSection("featured", required: false)
<section class="content-wrapper main-content clear-fix">
#RenderBody()
</section>
</div>
<footer>
<div class="content-wrapper">
<div class="float-left">
<p>© #DateTime.Now.Year - Persol Systems</p>
</div>
</div>
</footer>
#Scripts.Render("~/bundles/jquery")
#RenderSection("scripts", required: false)
<script type="text/javascript">
function theAlert(theId, theName) {
$("ul#sidePanel").contents().remove();
$("ul#sidePanel ").append("<li id='" + theId + "'><a >" + theId + "</a></li>");
$("li#" + theId + "> a").click(function (e) {
window.location.href("../Home/About");
});
return false;
}
</script>
</body>
</html>
on click of the link It reloads the entire page and clears my sidePanel
HTTP is stateless which means any data that you do not persist will get lost between postbacks. If you want to persist that information you will need to use Javascript to send the menu structure to the server through Ajax or use browser based local storage.
An example scenerio
model
public class Menu
{
// prop parent for example
public List<Parents> parents{ get; set; }
// prop child
public List<Childs> child{ get; set; }
// prop check
public bool checked { get; set; }
}
controller
public class Menu: Controller
{
public ActionResult _MainMenu()
{
Menu menu = new Menu();
menu.Parent = // parent elements from your db context
menu.Child = // child elements from your db context
menu.Parent = // check element from your db context
return PartialView(menu);
}
}
_MainMenu.cshtml
#model Menu
// same like your layout view, fill here like layout
// for example
#foreach(var parent in Model.Parents)
{
// generate menus
....
}
_Layout.cshtml
...
<nav>
<ul id="menux">
#Html.Action("_MainMenu", "Menu")
</ul>
</nav>
...
I suggest you an example code you should modify Data Types that you want.
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