MVC4 with Telerik Editor not working - c#

For some reason my Telerik MVC Editor() is not working. Can anyone spot what I´m doing wrong?
I´m using MVC4 with Razor view engine and Telerik version 2012.1.214
_Layout.cshtml includes this:
#using Smekklegt.Models
#using Telerik.Web.Mvc.UI
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="is" xml:lang="is">
<head>
<meta charset="utf-8" />
<title>#ViewBag.Title</title>
<link href="#Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/themes/base/jquery.ui.all.css")" rel="stylesheet" type="text/css" />
<script src="#Url.Content("~/Scripts/jquery-1.7.2.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery-ui-1.8.20.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/modernizr-2.5.3.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/AjaxLogin.js")" type="text/javascript"></script>
<meta name="viewport" content="width=device-width" />
<!-- Skrár frá template-->
<link href="#Url.Content("~/Content/rikona/styles/galleriffic.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/rikona/style.css")" rel="stylesheet" type="text/css" />
<script src="#Url.Content("~/Content/rikona/js/jquery-1.3.2.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Content/rikona/js/jquery.opacityrollover.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Content/rikona/js/jquery.galleriffic.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Content/rikona/js/gallery-settings.js")" type="text/javascript"></script>
<!--[if IE 6]>
<script src="../../Content/rikona/js/ie6-transparency.js"></script>
<script>
DD_belatedPNG.fix('#header .logo img, .subtitle img, .slideshow-container, .navigation-container #thumbs .thumbs li .thumb img, .navigation a.next, .footer-line, #sidebar .author-photo, .line, .commentlist .comment-reply-link, #contact-page #contact .submit');
</script>
<link rel="stylesheet" type="text/css" href="../../Content/rikona/styles/ie6.css" />
<![endif]-->
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="../../Content/rikona/styles/ie7.css" />
<![endif]-->
<!--[if IE 8]>
<link rel="stylesheet" type="text/css" href="../../Content/rikona/styles/ie8.css" />
<![endif]-->
#(Html.Telerik().StyleSheetRegistrar()
.DefaultGroup(group => group
.Add("telerik.common.css")
.Add("telerik.simple.css")
.Combined(true)
.Compress(true))
)
</head>
<body>
<div id="wrap">
<div id="header">
<section id="login" style="float: right;">
#Html.Partial("_LogOnPartial")
</section>
<section style="float: left;">
<ul>
<li>#Html.ActionLink("Flokkar", "Index", "Category")</li>
<li>#Html.ActionLink("Vörur", "Index", "Product")</li>
</ul>
</section>
<div class="logo">
<img src="../../Content/rikona/images/smekklegt_banner2.jpg" alt="logo" width="400px;" />
</div>
<div id="nav">
<ul id="nav-pages">
<li>#Html.ActionLink("Forsíða", "Index", "Home")<span>|</span></li>
#foreach (Category category in (IEnumerable<Category>)ViewData["Categories"])
{
<li>#Html.ActionLink(category.Name, "FindProductsByCategory", "Product", new { catId = category.Id }, null)<span>|</span></li>
}
<li>#Html.ActionLink("smekklegt.is", "Contact", "Home")</li>
</ul>
</div>
</div>
<div id="frontpage-content">
<div id="container">
#RenderSection("featured", false)
<section class="content-wrapper main-content clear-fix">
#RenderBody()
</section>
</div>
</div>
<div id="footer" style="margin-top: 15px;">
<div class="footer-line">
</div>
<p>
© #DateTime.Now.Year Smekklegt ehf</p>
<div class="float-right">
<ul id="social">
<li>Facebook</li>
</ul>
</div>
</div>
#Html.Telerik().ScriptRegistrar().jQuery(false).DefaultGroup(g => g.Combined(true).Compress(true))
</div>
Create.cshtml includes this:
#using Telerik.Web.Mvc.UI
#model Smekklegt.Controllers.ProductFormViewModel
#{
ViewBag.Title = "Create";
}
<h2>Create</h2>
<script type="text/javascript" src="#Url.Content("~/Scripts/jquery.validate.min.js")"></script>
<script type="text/javascript" src="#Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")"></script>
#using (Html.BeginForm()) {
#Html.ValidationSummary(true)
<fieldset>
<legend>Product</legend>
<div class="editor-label">
#Html.LabelFor(model => model.Product.Name)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.Product.Name)
#Html.ValidationMessageFor(model => model.Product.Name)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.Product.FK_Category)
</div>
<div class="editor-field">
#*#Html.EditorFor(model => model.Product.FK_Category)*#
#Html.DropDownListFor(d => d.Categories, new SelectList(Model.Categories, "Id", "Name"))
#Html.ValidationMessageFor(model => model.Product.FK_Category)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.Product.Description)
</div>
<div>
#{ Html.Telerik().EditorFor(m => m.Product.Description)
.Name("ProductCreateEditor")
.Encode(false)
.HtmlAttributes(new { style = "width: 500px;" })
.Tools(t => t.Clear()
.Bold().Italic().Underline().Separator().JustifyCenter().JustifyLeft().JustifyRight().JustifyFull())
//.Value((string)ViewData["ProductDescription"])
.Render(); }
</div>
<p>
<input type="submit" value="Stofna" />
<input type="button" value="Til baka" onclick="javascript:history.go(-1)"/>
</p>
</fieldset>
}
The problem I have is that every time I load my page the telerik editor appears but I can not write into the text area. (It looks like it were disabled) :(


Update
Remove this line from your Layout
<script src="#Url.Content("~/Content/rikona/js/jquery-1.3.2.js")" type="text/javascript"></script>
You only need one version of Jquery, they are conflicting is my best bet.
Everything else looks right
Remove this line
.Value((string)ViewData["ProductDescription"])
You are using EditorFor which pulls the value out of the model. So you only need to set the value in one place. You were trying to set it in two places, in the EditorFor and Value.
If you were using just Editor not EditorFor you can use Value
So choose to do EditorFor like so:
#{ Html.Telerik().EditorFor(m => m.Product.Description)
.Name("ProductCreateEditor")
...
.Render();
}
Or Editor
#{ Html.Telerik().Editor()
.Name("ProductCreateEditor")
...
.Value((string)ViewData["ProductDescription"])
.Render();
}
As John also states make sure the placement of your Telerik script is in the right place. It must be in the _Layout page at the bottom like so;
#(Html.Telerik().ScriptRegistrar().jQuery(false).DefaultGroup(group => group.Combined(true).Compress(true)))
</body>
</html>

Related

Render partial with Ajax.ActionLink

I have the following code in the view:
#model IEnumerable<soundyladder.Service.Models.Profile>
#{
ViewBag.Title = "Profile Login";
Layout = "/Views/Shared/_Layout2.cshtml";
}
<style>
#tableTest tr:hover {
cursor: pointer;
}
</style>
<div class="centering col-lg-6 logged_in_mainboxes">
<h3>Profiles</h3>
<table class="table table-striped" id="tableTest" style="margin-top: 15px;">
#foreach (var m in Model)
{
<tr>
<td>#Ajax.ActionLink(m.Name, "Edit", "ProfileLogin", null, new AjaxOptions()
{
HttpMethod = "Post",
InsertionMode = InsertionMode.Replace,
UpdateTargetId = "result", // <-- DOM element ID to update
// <-- Replace the content of DOM element
// <-- HTTP method(Post/Get)
})</td>
</tr>
}
</table>
<div id="result">
</div>
</div>
Here is my controller:
public ActionResult Edit()
{
return PartialView("_EditProfile");
}
Layout.cshtml:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title - My ASP.NET Application</title>
<link href="~/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="~/Content/Site.css" rel="stylesheet" type="text/css" />
<link href="~/Content/select2.min.css" rel="stylesheet" type="text/css" />
<script src="~/Scripts/modernizr-2.6.2.js"></script>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<script src="~/Scripts/select2.min.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="centering col-lg-6" style="padding: 0;">
#Html.ActionLink("", "Index", "Home", new { area = "" }, new { #class = "navbar-brand" })
</div>
</div>
</div>
<div class="body-content" style="margin-top: 40px;">
<div class="container-fluid">
<div class="row-fluid">
#RenderBody()
<div class="centering col-lg-6 footer" style="text-align: center; margin-bottom: 25px;">
<ul>
<li>About us</li>
<li>Blog</li>
<li>Help</li>
<li>Privacy</li>
<li>Cookies</li>
</ul>
<div style="float: right; margin-bottom: 25px; margin-right: -15px;">
<img src="https://sdltridionworld.com/images/AppStore-Icon_tcm89-19881.png" width="100" height="35" />
<img src="https://portal.xsede.org/dashboard-portlet/images/playstore.png" width="90" height="35" />
</div>
</div>
</div>
</div>
</div>
</body>
</html>
The problem I have Is that when I hit the link, I am redirected to a new page, localhost:65148/ProfileLogin/Edit. I want the partial view to appear in the divbox, result. What am I doing wrong?

Why wont my bootstrap DateTimePicker work?

I have used this in another MVC project of mine and the code works perfect when I run that program. I'm trying to use it in my new MVC application now and I cant get it to work with the same code. I've added all of the references to jQuery and bootstrap.
The text box shows up fine, along with the glyphicon for the datetimepicker and when I hover over it the mouse changes into the hand symbol. When I click the button nothing happens at that point. Here is what my code looks like for the datetimepicker:
<div class="form-group">
#Html.LabelFor(m => m.InterviewDate, new { #class = "col-sm-2 control-label" })
<div class="col-sm-3">
<div class='input-group date' id='datetimepicker1'>
#Html.TextBoxFor(m => m.InterviewDate, new { #class = "form-control" })
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
<script type="text/javascript">
$(function () {
//$('.datepicker').datepicker({
// format: 'mm-dd-yyyy'
//});
$('#datetimepicker1').datetimepicker();
});
</script>
</div>
</div>
</div>
My _Layout page references these at the top:
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title Job Manager</title>
<link rel="stylesheet" href="~/Content/bootstrap.min.css">
<link rel="stylesheet" href="~/Content/bootstrap-theme.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" href="~/Content/jquery-ui.min.css">
<link rel="stylesheet" href="~/Content/jquery-ui.theme.min.css">
<link rel="stylesheet" href="~/Content/bootstrap-datetimepicker.min.css">
<style type="text/css">
body {
margin-top: 60px;
background: #d9edf7;
}
</style>
<script src="~/Scripts/jquery-2.1.3.min.js"></script>
<script src="~/Scripts/jquery-ui-1.11.4.min.js"></script>
<script src="~/Scripts/moment-with-locales.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="~/Scripts/bootstrap-datetimepicker.min.js"></script>
</head>
And then references these at the bottom:
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", false)
If I'm forgetting anything or you need more information please let me know. I appreciate any and all help!

Client Side Validation not performing MVC 4

LAYOUT
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<!-- Apple devices fullscreen -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<!-- Apple devices fullscreen -->
<meta names="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<title>New Indus Goods - Loagin</title>
<link rel="stylesheet" type="text/css" href="#Url.Content("~/css/bootstrap.min.css")"/>
<link rel="stylesheet" type="text/css" href="#Url.Content("~/css/plugins/icheck/all.css")"/>
<link rel="stylesheet" type="text/css" href="#Url.Content("~/css/style.css")"/>
<link rel="stylesheet" type="text/css" href="#Url.Content("~/css/themes.css")"/>
<link href="#Url.Content("~/Styles/view_specific_style.css")" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="#Url.Content("~/js/jquery.min.js")"></script>
<script type="text/javascript" src="#Url.Content("~/js/plugins/nicescroll/jquery.nicescroll.min.js")"></script>
<script type="text/javascript" src="#Url.Content("~/js/plugins/validation/jquery.validate.min.js")"></script>
<script type="text/javascript" src="#Url.Content("~/js/plugins/validation/additional-methods.min.js")"></script>
<script type="text/javascript" src="#Url.Content("~/js/plugins/icheck/jquery.icheck.min.js")"></script>
<script type="text/javascript" src="#Url.Content("~/js/bootstrap.min.js")"></script>
<script type="text/javascript" src="#Url.Content("~/js/eakroko.js")"></script>
<!--[if lte IE 9]>
<script type="text/javascript" src="#Url.Content("~/js/plugins/placeholder/jquery.placeholder.min.js")"></script>
<script>
$(document).ready(function() {
$('input, textarea').placeholder();
});
</script>
<![endif]-->
<!-- Favicon -->
<link rel="shortcut icon" href="~/img/favicon.ico" />
<!-- Apple devices Homescreen icon -->
<link rel="apple-touch-icon-precomposed" href="~/img/apple-touch-icon-precomposed.png" />
</head>
<body class='login'>
<div class="wrapper">
<h1>
<a href="index.html">
<img src="#Url.Content("~/img/logo-big.png")" alt="" class='retina-ready' width="59" height="49">New Indus Goods</a>
</h1>
<div id="body" class="login-body">
#RenderSection("featured",required:false)
<section class="content-wrapper">
#RenderBody()
</section>
</div>
</div>
</body>
</html>
VIEW
#model Test1.Models.UserProfile
#{
Layout = "~/Views/_LayoutPage1.cshtml";
ViewBag.Title = "Index";
Test1.Models.UserProfile lol = ViewBag.Profile;
}
#section featured
{
#using (Html.BeginForm("Index", "Input"))
{
#Html.ValidationSummary(true)
<fieldset>
<div class="content-wrapper">
<div class="form-group">
<div class="email controls">
#Html.EditorFor(model => model.Name, new { #class = "form-control" })
#Html.ValidationMessageFor(model => model.Name)
</div>
</div>
</div>
<p>lol what is is</p>
</fieldset>
<p>
<input type="submit" value="Save" />
</p>
}
}
<div>
#Html.ActionLink("Back To Index", "Index");
</div>
Server side validation is performed but client side is not happening! please tell me what am I missing here?? I have tried finding a solution on Google but failed. I am new to MVC so kindly help me! Page goes back for POST then come back and says Name field is required, why it is not validating before POSTING BACK??

i had to add
<add key="ClientValidationEnabled" value="true" />
<add key="UnobtrusiveJavaScriptEnabled" value="true" />
in page-related web.config too :)

button not disabling after click

I am using this post to disable my buttons on click:
Prevent multiple form submits in MVC 3 with validation
This is my page source after it is rendered:
<!DOCTYPE html>
<html>
<head>
<title>Do not bookmark this page.</title>
<link href="/Content/reset.css" rel="stylesheet" type="text/css" />
<link href="/Content/Site.css" rel="stylesheet" type="text/css" />
<link href="/Content/styer.css?t=335" rel="stylesheet" type="text/css" />
<script src="/Scripts/jquery-1.5.1.min.js" type="text/javascript"></script>
<script src="/Scripts/Views/main.js" type="text/javascript"></script>
<link rel="shortcut icon" href="/Content/favicon.ico" type="image/ico" />
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<script language="javascript" type="text/javascript">
$(function () {
$('form').submit(function () {
if ($(this).valid()) {
$('input[type="submit"]').attr('disabled', 'disabled');
}
});
});
</script>
</head>
<body>
<div class="page">
<div id="header">
<div id="headerimg"></div>
<div id="logindisplay">
[ Log On ]
</div>
<div id="menucontainer">
<ul id="menu">
<li>Home</li>
<li>Logon</li>
<li>Register</li>
<li>Contact Us</li>
<li>News</li>
</ul>
</div>
<div id="main">
<h2>Forgot Username</h2>
<p>
Please provide the email address on your web account. Once validated, your username will be sent to your email address for your records.
</p>
<script src="/Scripts/jquery.validate.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery.validate.unobtrusive.min.js" type="text/javascript"></script>
<form action="/Account/ForgotUsername" method="post"> <div>
<fieldset>
<legend>Email address</legend>
<div class="editor-label">
<label for="EmailAddress">Email</label>
</div>
<div class="editor-field focus">
<input class="GenericTextBox" data-val="true" data-val-length="The Email must be at least 7 characters long." data-val-length-max="100" data-val-length-min="7" id="EmailAddress" name="EmailAddress" type="text" value="" />
<span class="field-validation-valid" data-valmsg-for="EmailAddress" data-valmsg-replace="true"></span>
</div>
<p>
<input id="btn" class="makePaymentInput" type="submit" value="Submit"/>
</p>
</fieldset>
</div>
</form>
<div style="clear: both;"></div>
</div>
<div id="footer">
</div>
</div>
</div>
<!-- Start of StatCounter Code for Default Guide -->
<script type="text/javascript">
var sc_project = 9150358;
var sc_invisible = 1;
var sc_security = "1af31df9";
var scJsHost = (("https:" == document.location.protocol) ? "https://secure." : "http://www.");
document.write("<sc" + "ript type='text/javascript' src='" + scJsHost + "statcounter.com/counter/counter.js'></" + "script>");
</script>
<noscript>
<div class="statcounter"><a title="web analytics" href="http://statcounter.com/" target="_blank"><img class="statcounter" src="http://c.statcounter.com/9150358/0/1af31df9/1/" alt="web analytics"></a></div>
</noscript>
<!-- Visual Studio Browser Link -->
<script type="application/json" id="__browserLink_initializationData">
{"appName":"Internet Explorer"}
</script>
<script type="text/javascript" src="http://localhost:25759/610299fe88d74cee8d0267b4fc859da0/browserLink" async="async"></script>
<!-- End Browser Link -->
</body>
</html>
This works on most forms but this one, which is the main reason I used this code.
Anyone see why this one is not working?

Instead of writing this :-
$('input[type="submit"]').attr('disabled', 'disabled');
You should write this :-
$('input[type="submit"]').prop('disabled','true');

Creating a KnockoutJS Model From an ASP.NET MVC complex model

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.

Categories

Resources