I'm trying to create a autocomplete textbox.
This is what I have in view
#model .....
#{
ViewBag.Title = "Create";
Layout = "~/Views/Shared/_Layout.cshtml";
}
#using(Html.BeginForm("Action","Controller"))
{
#Html.TextBoxFor(m=>m.myEmail)
}
#section Scripts{
#Scripts.Render("~/Scripts/jquery-ui-1.10.4.min.js")
<script type="text/javascript">
$(function() {
$("#myEmail").
autocomplete({
source: '/App/Per',
minLength: 1,
}
);
});
</script>
}
When I type lets say s in textbox a request is sent to this method in controller
public JsonResult Person(string term)
{
var persons = FindPersons(term,"bk#hello.com","bk").ToArray();
var fullnameList = persons.Select(person => person.FirstName + " " + person.LastName).ToList();
return Json(fullnameList, JsonRequestBehavior.AllowGet);
}
in browser when I inspect the element in chrome and check the response i get the values, for example
0: "Person1"
1: "Person2"
2: "Person3"
3: "Person4"
Problem
My autocomplete box doesn't fill up with these data. Wasn't i supposed to get a listbox thingy at the bottom of the textbox with above names?
Edit 2: Generated HTML
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Create - My ASP.NET Application</title>
<link href="/Content/bootstrap.css" rel="stylesheet"/>
<link href="/Content/site.css" rel="stylesheet"/>
<script src="/Scripts/modernizr-2.7.1.js"></script>
</head>
<body>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">Date Picker</a>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Register</li>
<li>Log in</li>
</ul>
<div class="container body-content">
<link href="/Content/themes/base/minified/jquery-ui.min.css" rel="stylesheet"/>
<h2>Create</h2>
<form action="/App/Cr" method="post"><input id="myEmail" name="myEmail" type="text" value="" /></form>
</div>
<script src="/Scripts/jquery-2.0.3.js"></script>
<script src="/Scripts/bootstrap.js"></script>
<script src="/Scripts/respond.js"></script>
<script src="/Scripts/jquery-ui-1.10.4.min.js"></script>
<script type="text/javascript">
$(function() {
$("#myEmail").
autocomplete({
source: '/App/Per',
minLength: 1,
}
);
});
</script>
Nothing looks particularly off (aside from the CSS link being misplaced). You might want to try formatting your JSON a bit differently, which would also have the effect of answering your last question.
Instead of this:
public JsonResult Person(string term)
{
var persons = FindPersons(term,"bkc#example.com","bk").ToArray();
var fullnameList = persons.Select(person => person.FirstName + " " + person.LastName).ToList();
return Json(fullnameList, JsonRequestBehavior.AllowGet);
}
Try using:
public JsonResult Person(string term)
{
var persons = FindPersons(term,"bk#example.com","bk").ToArray();
return Json(persons.Select(p => new { label = p.FirstName + " " + p.LastName, value = p.Email }), JsonRequestBehavior.AllowGet);
}
This is one of the results the API says the widget will work with: http://api.jqueryui.com/autocomplete/#option-source
Related
Allright, so the issue I'm having is that my google chart wont display.I am fairly new to working with ASP.NET core applications, and I'm doing a school project.
This is an example that works. I am trying to display data from a list that get it's data from a database, but I don't seem to get it to work.
This hardcoded data works fine:
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', { 'packages': ['corechart'] });
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Time', 'Data'],
['2004', 1000],
['2005', 1170],
['2006', 660],
['2007', 1030]
]);
var options = {
title: 'Temperature',
curveType: 'function',
legend: { position: 'bottom' }
};
var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
chart.draw(data, options);
}
</script>
</head>
<body class="container-fluid lead">
<div id="curve_chart" style="width: 900px; height: 500px"></div>
</body>
</html>
But when i try to replace the hardcoded data with a foreach-loop it won't display. The page is just blank. This is my drawChart() with a foreach-loop.
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Time', 'Data'],
#foreach (var item in Model.measurementDataList)
{
<text>['#item.TimeStamp', #item.MeasuredValue],</text>
}
]);
I have displayed some data from the same database in a table. So the method I'm used to fill the list works. This is my method to getting the data from the database:
public List<MeasurementData> GetMeasurementData(string connectionString)
{
List<MeasurementData> measurementDataList = new List<MeasurementData>();
SqlConnection con = new SqlConnection(connectionString);
string sqlQuery = "SELECT Timestamp, MeasuredValue FROM MEASUREDATA";
SqlCommand cmd = new SqlCommand(sqlQuery, con);
con.Open();
SqlDataReader dr = cmd.ExecuteReader();
while (dr.Read())
{
MeasurementData measureParameter = new MeasurementData();
measureParameter.TimeStamp = dr["Timestamp"].ToString();
measureParameter.MeasuredValue = Convert.ToDouble(dr["MeasuredValue"]);
measurementDataList.Add(measureParameter);
}
return measurementDataList;
}
And here's the OnGet().
public void OnGet()
{
SensorConfig sensorConfig = new SensorConfig();
connectionString = _configuration.GetConnectionString("ConnectionString");
measurementDataList = sensorConfig.GetMeasurementData(connectionString);
}
view data source feature:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>MonitorLog - MonitoringApplication</title>
<link rel="stylesheet" href="/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="/css/site.css" />
</head>
<body>
<header>
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
<div class="container">
<a class="navbar-brand" href="/">MonitoringApplication</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse">
<ul class="navbar-nav flex-grow-1">
<li class="nav-item">
<a class="nav-link text-dark" href="/">Home</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" href="/MonitorLog">Monitor log</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" href="/Privacy">Privacy</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" href="/SensorInformation">About Sensors</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<div class="container">
<main role="main" class="pb-3">
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', { 'packages': ['corechart'] });
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Time', 'Data'],
]);
var options = {
title: 'Temperature',
curveType: 'function',
legend: { position: 'bottom' }
};
var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
chart.draw(data, options);
}
</script>
</head>
<body class="container-fluid lead">
<div id="curve_chart" style="width: 900px; height: 500px"></div>
</body>
</html>
</main>
</div>
<footer class="border-top footer text-muted">
<div class="container">
© 2020 - MonitoringApplication - Privacy
</div>
</footer>
<script src="/lib/jquery/dist/jquery.min.js"></script>
<script src="/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="/js/site.js?v=dLGP40S79Xnx6GqUthRF6NWvjvhQ1nOvdVSwaNcgG18"></script>
</body>
</html>
Here comes the mistake:
#foreach (var item in Model.measurementDataList)
{
<text>['#item.TimeStamp', #item.MeasuredValue],</text>
}
Because if you render C# in cshtml directly, ASP.NET Core will HTML encode your script.
To make your app run, consider changing the script to
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Time', 'Data'],
#foreach (var item in Model.measurementDataList)
{
Html.Raw($"['{item.TimeStamp}', {item.MeasuredValue}],")
}
]);
While this may solve your issue, rendering your data with C# to HTML is not a good practice.
I strongly suggest you writing an API that returns your data and you can write pure javascript to get the data.
Like this:
$.get('/api/mychartdata', function(data) {
google.visualization.arrayToDataTable(data);
})
And the data is rendered as JSON from your ASP.NET Core Web API.
If you are not familiar with Web API, please read document here:
https://learn.microsoft.com/en-us/aspnet/core/tutorials/first-web-api?view=aspnetcore-3.1&tabs=visual-studio
I have developed an application and deployed to cloud. By default index page is loading but once index page is loaded on click on it it will open other page(cshtml page). But i am getting blank page . Please help
Index.cshtml code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Create Invoice Online for Free & Download PDF</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="../Content/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="../Content/bootstrap-responsive.min.css" />
<link rel="stylesheet" type="text/css" href="../Content/quick-invoice.css" />
<script type="text/javascript" src="../Content/jquery.js"></script>
<script type="text/javascript" src="../Content/bootstrap.min.js"></script>
<meta name="google-site-verification" content="FB0t_l2pYlfmLe1hzPyjLXXhDF8Bufut_nDhCP5brrQ" />
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="/">Invoices generator</a>
<div class="nav-collapse">
<ul class="nav">
<li class="active"><i class="icon-home icon-white"></i>Home</li>
<li><i class="icon-file icon-white"></i> Invoice Templates</li>
</ul>
</div>
</div>
</div>
</div>
<div class="container layout">
<div class="row">
<div class="span9">
<div class="container-narrow">
<div class="container-narrow jumbotron">
<h1>Shopping Cart Online Invoice Generator</h1>
<p class="lead">Create & Send your invoice without having to register, and download as <strong>PDF, </strong>quickly & easily for free, email your invoice Select an invoice template from our invoices templates list, Save or send your invoice in minutes</p>
<hr /> Create your invoice
<hr />
</div>
</div>
<div class="pop-layouts">
<h4>Invoice Templates</h4>
<ul class="thumbnails">
<li>
<h4>Shopping Cart Invoice Template</h4>
<a class="thumbnail" href="create" title="Shopping Cart Invoice Template">
<img src="../Images/057e7_b4a13_1.jpg" alt="" date-large="../Images/4dad1_733d6_1.png" />
</a>
<div class="caption">
<!--<i class="icon-eye-open icon-white"></i> Preview-->
<i class="icon-plus-sign icon-white"></i> Create
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<script type="text/javascript">
(function (i, s, o, g, r, a, m) {
i['GoogleAnalyticsObject'] = r; i[r] = i[r] || function () {
(i[r].q = i[r].q || []).push(arguments)
}, i[r].l = 1 * new Date(); a = s.createElement(o),
m = s.getElementsByTagName(o)[0]; a.async = 1; a.src = g; m.parentNode.insertBefore(a, m)
})(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
ga('shopping-cart-invoices', 'UA-47492117-1', 'mybluemix.net');
ga('send', 'pageview');
</script>
</body>
</html>
Startup.cs
using System;
using Microsoft.AspNet.Mvc;
using Microsoft.AspNet.Builder;
using Microsoft.Framework.DependencyInjection;
using Microsoft.AspNet.StaticFiles;
public class Startup
{
public void Configure(IApplicationBuilder app)
{
app.UseServices(services =>
{
services.AddMvc();
});
app.UseFileServer(new FileServerOptions()
{
EnableDirectoryBrowsing = false,
});
app.Use(async (context, next) =>
{
Console.WriteLine(context.Request.Path);
try
{
await next();
}
catch (Exception ex)
{
Console.WriteLine(ex);
}
});
app.UseMvc(routes =>
{
routes.MapRoute(
name: "Default",
template: "{controller=Home}/{action=Index}/{id?}"
);
routes.MapRoute(
name: "CreateInvoice",
template: "{controller=CreateInvoice}/{action=Create}/{id?}"
);
routes.MapRoute(
name: "Preview",
template: "{controller=Preview}/{action=preview}/{id?}"
);
routes.MapRoute(
name: "Thanks",
template: "{controller=Thanks}/{action=Thankyou}/{id?}");
});
}
}
public class HomeController : Controller
{
public ActionResult Index()
{
return View();
}
}
You should be using
#Html.actionlink("Create", "CreateInvoice")
This will allow you to declare the action and the controller
It also means that you will get build errors if the action or controller do not exist
I am trying to render a jquery popup onto a razor view. I have created a link in my view but when I click it I get a 404 error saying the page can't be found.
I have used jsbin.com so I know the jquery code is correct but clearly I am missing something, I guess I am either incorrectly rendering the javascript or I am trying to put the popup in a wrong file.
Can anyone explain what I have done wrong and why?
partial cshtml: popup
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Dialog - Modal confirmation</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<script>
$(function() {
$("#enableDisable").click(function () {
$( "#dialog-confirm" ).dialog({
resizable: false,
height:220,
width:475,
modal: true,
buttons: {
"OK": function() {
$( this ).dialog( "close" );
},
Cancel: function() {
$( this ).dialog( "close" );
}
}
});
});
});
</script>
</head>
<body>
<a id="Link">
click me
</a>
<div id="dialog-confirm" title="Empty the recycle bin?">
Are you sure you want to change the status of: #ViewBag.UserName
</div>
</body>
</html>
My Razor view requring the popup
#{
ViewBag.Title = "User Details";
}
<h2>User Details</h2>
<p><b>#ViewBag.UserName</b></p>
<table class="table">
<tr>
<th>
Application Name
</th>
<th>
Status
</th>
<th>
</th>
</tr>
#if (ViewBag.ApplicationStatuses.Count > 0)
{
#*Iterating Amadeus model using ViewBag *#
foreach (var item in ViewBag.ApplicationStatuses)
{
<tr>
<td>
#item.Key
</td>
<td>
#item.Value
</td>
<td>
<a href="~/Views/Home/ChangeStatusConfirmation" id="enableDisable">
Change Status
</a>
</td>
<td>
#Html.ActionLink("View Permissions", "Permissions", new { userID = View Bag.UserName, applicationName = item.Key })
</td>
</tr>
}
}
</table>
finally my layout view:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title - Business Security System</title>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
#*#Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { #class = "navbar-brand" })*#
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>#Html.ActionLink("Home", "Index", "Home")</li>
<li>#Html.ActionLink("MyTeam", "MyTeam", "Home")</li>
<li>#Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>
#*#Html.Partial("_LoginPartial")*#
<p style="color:grey; text-align:right; margin-top:15px">#System.Security.Principal.WindowsIdentity.GetCurrent().Name</p>
</div>
</div>
</div>
<div class="container body-content">
#RenderBody()
<hr />
#*<footer>
<p>© #DateTime.Now.Year - My ASP.NET Application</p>
</footer>*#
</div>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
</body>
</html>
Any assistance will be greatly appreciated.
I ended up using an action link in my view instead of the action tab I used before as shown:
#Html.ActionLink("Change Status", "ChangeStatus", "Home", new { userName = ViewBag.UserName, applicationName = item.Key, currentStatus = item.Value }, new { #class = "enableDisable" })
and instead of having the Jquery code in a seperate file I put the code I needed in the view file and ran it from there.
<div id="dialog-confirm" title="Change Status?">
Are you sure you want to change the status of: #ViewBag.UserName
</div>
#section Scripts {
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<script type="text/javascript">
$("#dialog-confirm").hide();
$(function () {
$(".enableDisable").click(function () {
$("#dialog-confirm").dialog({
resizable: false,
height: 220,
width: 475,
modal: true,
buttons: {
"OK": function () {
$(this).dialog("close");
window.location.href = "~/Home/ChangeStatus/username/dbname/currentstatus/"
},
Cancel: function () {
$(this).dialog("close");
}
}
});
});
});
</script>
}
This is not the most elegant solution but it works well in the solution I am working in.
href="~/Views/Home/ChangeStatusConfirmation" doesn't seems right.
It should be ~/ControllerName/ActionName. also if you are handling the click event you should not use the href attribute.
I would like to create knockout viewModel from asp.net MVC model using ko.mapping.fromJS() method but my form didn't populating values.
In view I created script looks like that:
<script type="text/javascript">
var tmp = #Html.Raw(Model.ToJson());
var viewModel = ko.mapping.fromJS(tmp);
ko.applyBindings(viewModel);
</script>
#Html.Raw(Model.ToJson() returns value
{"id":1,
"surveyCode":null,
"title":"Życie",
"description":"Ankieta, w której zadawane będą pytania na temat codziennego życia ",
"dateStart":"2013-12-12T00:00:00",
"dateEnd":"2014-12-30T00:00:00",
"createDate":"2014-01-07T03:23:16.053",
"lastModification":"2014-01-07T03:23:16.053",
"isActive":false,
"questions":[{"id":1,
"surveyID":1,
"content":"Co jesz na śniadanie?",
"tips":"wybierz jedną odpowiedź",
"questionType":1,
"isRequired":true,
"answers": [{"id":1,
"questionID":1,
"answerContent":"Jajecznicę",
"isOpenAnswer":false},
{"id":2,
"questionID":1,
"answerContent":"Kiełbaski",
"isOpenAnswer":false},
{"id":3,
"questionID":1,
"answerContent":"Płatki na mleku",
"isOpenAnswer":false},
{"id":4,
"questionID":1,
"answerContent":"Inne",
"isOpenAnswer":true}]},
{"id":2,
"surveyID":1,
"content":"Czym się zajmujesz w życiu?",
"tips":"napisz krótką historię",
"questionType":3,
"isRequired":true,
"answers":[]}]}
but when I want to bind 'title' property to <span> <span data-bind="text:title"></span> it is not working. When I run my app in firefox and turn on firebug script console and set breakpiont to line var tmp = #Html.Raw(Model.ToJson()); returns correct value, press F10 going to next line var viewModel = ko.mapping.fromJS(tmp); and finally press F10 and nothing happen, script not execute next line ko.applyBindings(viewModel);.
And it is my question. Is it possible to mapp my mvc model using knockout mapping plugin automacly? or maybe should I do some manualy staf to map mvc model to knockout viewModel.
I'm looking for answers on this sites:
link1
and
stackowerflow
but maybe I didn't understand this posts.
Edit
my view looks like this:
#using Inżynierka.Extensions
#model Inżynierka.Models.Survey
#{
ViewBag.Title = "Create";
}
#using (Html.BeginForm())
{
#Html.AntiForgeryToken()
<div class="form-horizontal">
<h4>SurveyAnswer</h4>
<hr />
#Html.ValidationSummary(true)
Title: <span data-bind="text:title"></span>
</div>
}
#section Scripts {
<script src="../../Scripts/jQuery.tmpl.min.js" type="text/javascript"></script>
<script src="../../Scripts/knockout-3.0.0.js" type="text/javascript"></script>
<script src="../../Scripts/knockout.validation.js"></script>
<script src="../../Scripts/knockout.knockout.mapping-latest.js"></script>
<script type="text/javascript">
var tmp = #Html.Raw(Model.ToJson());
var viewModel = ko.mapping.fromJS(tmp);
ko.applyBindings(viewModel);
</script>
#Scripts.Render("~/bundles/jqueryval")
}
Edit 2
It is html sourse of my page:
<!DOCTYPE html>
<html>
<head>
<script type='text/javascript' src='http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.0.0.js'></script>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Create</title>
<link href="/Content/bootstrap.css" rel="stylesheet"/>
<link href="/Content/site.css" rel="stylesheet"/>
<script src="/Scripts/modernizr-2.6.2.js"></script>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">Ankietyy</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Moje Ankiety</li>
<li>Strona Główna</li>
<li>O Projekcie</li>
<li>Kontakt</li>
</ul>
<form action="/Account/LogOff" class="navbar-right" id="logoutForm" method="post"><input name="__RequestVerificationToken" type="hidden" value="fWDZFmyGqJyU3ATUf2IbHDdkbo22bzObUMwUfxfqwXIiqGvRYzMhApWS3I5GkkHnZD7ieDxLfh84s2-prLDtSGeE6_D7p7cT-fmQBszeM06p-fZ7RzhOPn0P8EDftLRwT8YQA8t2U56dlLX_lx3G4Q2" /> <ul class="nav navbar-nav navbar-right">
<li>
Witaj Bartek!
</li>
<li>Wyloguj się</li>
</ul>
</form>
</div>
</div>
</div>
<div class="container body-content">
<form action="/SurveyAnswer/CompleteSurvey/1" method="post"><input name="__RequestVerificationToken" type="hidden" value="KOALGZbw0WhFlBV4LHx530Oen59aBWF62b6s58GIUikx3A62uhcAi3-74auJpLtI4fYj9kmcPjlgNu1TeuNrYukpFlll1cGCOIcjjewtFou4M9C3_bHDFk7UoZk_tKpw7SxcXa3UbgwIj4ZhCRM6_g2" /> <div class="form-horizontal">
<h4>SurveyAnswer</h4>
<hr />
Title: <span data-bind="text:title"></span>
</div>
</form><script type="text/javascript">
var tmp = {"id":1,"surveyCode":null,"title":"Życie","description":"Ankieta, w której zadawane będą pytania na temat codziennego życia ","dateStart":"2013-12-12T00:00:00","dateEnd":"2014-12-30T00:00:00","createDate":"2014-01-07T03:23:16.053","lastModification":"2014-01-07T03:23:16.053","isActive":false,"questions":[{"id":1,"surveyID":1,"content":"Co jesz na śniadanie?","tips":"wybierz jedną odpowiedź","questionType":1,"isRequired":true,"answers":[{"id":1,"questionID":1,"answerContent":"Jajecznicę","isOpenAnswer":false},{"id":2,"questionID":1,"answerContent":"Kiełbaski","isOpenAnswer":false},{"id":3,"questionID":1,"answerContent":"Płatki na mleku","isOpenAnswer":false},{"id":4,"questionID":1,"answerContent":"Inne","isOpenAnswer":true}]},{"id":2,"surveyID":1,"content":"Czym się zajmujesz w życiu?","tips":"napisz krótką historię","questionType":3,"isRequired":true,"answers":[]},{"id":14,"surveyID":1,"content":"Pytanie końcowe","tips":"napisz","questionType":1,"isRequired":true,"answers":[{"id":9,"questionID":14,"answerContent":"test","isOpenAnswer":false},{"id":10,"questionID":14,"answerContent":"test2","isOpenAnswer":false},{"id":11,"questionID":14,"answerContent":"test3","isOpenAnswer":false}]}],"surveyAnswers":[],"codeForUsers":[]};
var viewModel = ko.mapping.fromJS(tmp);
ko.applyBindings(viewModel);
</script>
<hr />
<footer>
<p>© 2014 - My ASP.NET Application</p>
</footer>
</div>
<script src="/Scripts/jquery-2.0.3.js"></script>
<script src="/Scripts/bootstrap.js"></script>
<script src="/Scripts/respond.js"></script>
<script src="../../Scripts/jQuery.tmpl.min.js" type="text/javascript"></script>
<script src="../../Scripts/knockout-3.0.0.js" type="text/javascript"></script>
<script src="../../Scripts/knockout.validation.js"></script>
<script src="../../Scripts/knockout.mapping-latest.js"></script>
<script src="/Scripts/jquery.validate.js"></script>
<script src="/Scripts/jquery.validate.unobtrusive.js"></script>
<!-- Visual Studio Browser Link -->
<script type="application/json" id="__browserLink_initializationData">
{"appName":"Firefox","requestId":"9f8e517696004299808eb3caccb0e136"}
</script>
<script type="text/javascript" src="http://localhost:11897/dc47e85290da49019e6425ddd16f962a/browserLink" async="async"></script>
<!-- End Browser Link -->
</body>
</html>
Answer for my issue
View should looks like that:
#using Inżynierka.Extensions
#model Inżynierka.Models.Survey
#{
ViewBag.Title = "Create";
}
#using (Html.BeginForm())
{
#Html.AntiForgeryToken()
<div class="form-horizontal">
<h4>SurveyAnswer</h4>
<hr />
#Html.ValidationSummary(true)
Title: <span data-bind="text:title"></span>
</div>
}
#section Scripts {
<script src="../../Scripts/knockout-3.0.0.js" type="text/javascript"></script>
<script src="../../Scripts/knockout.mapping-latest.js"></script>
<script type="text/javascript">
var tmp = #Html.Raw(Model.ToJson());
var viewModel = ko.mapping.fromJS(tmp);
ko.applyBindings(viewModel);
</script>
#Scripts.Render("~/bundles/jqueryval")
}
Thanks everyone for replies, specially for #VolodymyrBilyachat whose advices were most relevant.
Well after you post source, then other idea what it could is that some scripts are conflicting, try to remove scripts and left only knockout ones
Wrap your knockout view model in a document.ready function
<script type="text/javascript">
$document.ready(function() {
var tmp = #Html.Raw(Model.ToJson());
var viewModel = ko.mapping.fromJS(tmp);
ko.applyBindings(viewModel);});
</script>
Also note that your viewModel isn't a true view model at that point so consider using a view model that contains the ko.observable property 'myData' or something to hold your data and then applying bindings
For complex models I don't believe mappings and simply, I'm parsing json on my own and populate model via loops, ifs and so on. I think, this isn't the worst solution, because debugging and fixing data becomes simplier.
I found simple textbox watermark script that I was going to use in my project but I can't understand whats wrong, I tried debugging with Firebug and I can see it going through jquery code only once when page is loaded,after that textbox acts like nothing was binded to its focus or blur and I don't see any breakpoints getting hitted in script, here is whole layout page with script:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>#ViewBag.Title</title>
<link href="#System.Web.Optimization.BundleTable.Bundles.ResolveBundleUrl("~/Content/css")" rel="stylesheet" type="text/css" />
<link href="#System.Web.Optimization.BundleTable.Bundles.ResolveBundleUrl("~/Content/themes/base/css")" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="#System.Web.Optimization.BundleTable.Bundles.ResolveBundleUrl("~/Scripts/js")"></script>
<style type="text/css">
.water
{
font-family: Tahoma, Arial, sans-serif;
color:gray;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
$(".water").each(function () {
$tb = $(this);
if ($tb.val() != this.title) {
$tb.removeClass("water");
}
});
$(".water").focus(function () {
$tb = $(this);
if ($tb.val() == this.title) {
$tb.val("");
$tb.removeClass("water");
}
});
$(".water").blur(function () {
$tb = $(this);
if ($.trim($tb.val()) == "") {
$tb.val(this.title);
$tb.addClass("water");
}
})
});
</script>
</head>
<body>
<div class="wrapper">
<div id="messageBox" align="center">
</div>
<div class="header">
<div class="header-column">
<h1 id="logo" class="no-border"><img src="../../Content/themes/base/images/ps-logo.png" style="margin-top:10px;" alt="" /></h1>
</div>
<div class="header-column lh50" align="center">
<div>
<input type="text" ID="txtSearch" class="water" title="Search" value="" />
</div>
</div>
<div class="header-column">
<div class="main-menu lh50">
<ul>
<li>
#if(!Request.IsAuthenticated)
{
<a href="Login">Login using
<img alt="Facebook" src="../../Content/themes/base/icons/facebook-icon.png" class="login-icon" />
<img alt="Google" src="../../Content/themes/base/icons/google-icon.png" class="login-icon" />
<img alt="Yahoo" src="../../Content/themes/base/icons/yahoo-icon.png" class="login-icon" />
</a>
<span> or </span>
Register
}
else{
<span>#GetCurrentUsername(this.Context)</span>
Log out
Post
}
</li>
</ul>
</div>
</div>
</div>
<div class="clear">
</div>
#RenderBody()
<div class="push">
</div>
</div>
<div class="footer" align="center">
<ul>
<li>Home</li>
<li>Services</li>
<li>Portfolio</li>
<li><a class="active" href="#">Resources</a></li>
<li>Contact</li>
</ul>
<p>
Copyright © 2012 Domain - All rights reserved</p>
</div>
</body>
</html>
Is there problem in mvc4, my code or something else?
The script works, you just need to ensure that the value of the textbox is the same as the title initially:
<input type="text" ID="txtSearch" class="water" title="Search" value="Search" />
Because that's what you are checking here:
$(".water").each(function () {
$tb = $(this);
if ($tb.val() != this.title) {
$tb.removeClass("water");
}
});
And if the value is different than the title (in your case title="Search" and value="") you remove the water class and nothing will happen later.
You are using the same .water class to describe the set of textboxes that might have watermarks, and also to specifically turn the watermark on and off.
That could get messy, as when you attach the focus and blur events its no longer clear what the .water selector will find because you've already removed it from some textboxes.
Think it should be more like:
$(document).ready(function () {
$(".potentialwater").each(function () {
$tb = $(this);
if ($tb.val() != this.title) {
$tb.removeClass("water");
}
});
$(".potentialwater").focus(function () {
$tb = $(this);
if ($tb.val() == this.title) {
$tb.val("");
$tb.removeClass("water");
}
});
$(".potentialwater").blur(function () {
$tb = $(this);
if ($.trim($tb.val()) == "") {
$tb.val(this.title);
$tb.addClass("water");
}
})
});