KO binding not working in IIS 6 - asp.net-mvc

I have written small piece of code which is working fine when I am debugging it through VS 2010. ( i.e. Using 'Visual Studio Development Server.)
After that I changed project setting and clicked on 'Use Local IIS Web Server' ( automatically created virtual directory) when I run application I found that KO code is not at all getting executed. Could not see text box populated with default values.
Do we have to take any special care while deploying code to IIS?
Below is my piece of code.
#{
ViewBag.Title = "Home Page";
}
<div>
<div>
<div>
<label>
Name</label>
<input type="text" name="txtID" data-bind="value: ID" />
</div>
<div>
<label>
First Name</label>
<input type="text" name="txtFirstName" data-bind="value: FirstName" />
</div>
<div>
<label>
Last Name</label>
<input type="text" name="txtLastName" data-bind="value: LastName" />
</div>
<div>
<label>
Full Name</label>
<input type="text" name="txtFullName" data-bind="value: FullName" />
</div>
</div>
</div>
#section scripts{
<script src="../../Scripts/jquery-1.7.1.js" type="text/javascript"></script>
<script src="../../Scripts/knockout-2.1.0.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
var ViewModel = function () {
var self = this;
self.FirstName = ko.observable("Initial Name");
self.LastName = ko.observable("Last Name");
self.ID = ko.observable(100);
self.FullName = ko.computed({
read: function () {
return self.FirstName() + " " + self.LastName();
},
write: function (value) {
var lastIndex = value.lastIndexOf(" ");
if (lastIndex > 0) {
self.FirstName(value.substring(0, lastIndex));
self.LastName(value.substring(lastIndex + 1));
}
}
});
}
var viewModel = new ViewModel();
ko.applyBindings(viewModel);
var t = function () {
alert(viewModel.FullName());
};
});
</script>
}

Your script references are probably broken because they are relative references and you are using now a virtual directory in IIS.
You need to use the Url.Content helper method where you can specify your root directory with ~ which will take care of the virtual directories and generates the correct urls for you:
<script src="#Url.Content("~/Scripts/jquery-1.7.1.js")" type="text/javascript">
</script>
<script src="#Url.Content("~/Scripts/knockout-2.1.0.js")" type="text/javascript">
</script>

Related

Value Undefined In React.JS View ASP.NET MVC

I am Making a Lib Managment System to Add Books to My DB.
I am doing this through ASP.NET MVC AND my view is in REACT.JS
My Controller for CREATE BOOK is :
public ActionResult Create()
{
return View();
}
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Create([Bind(Include = "BookName,BookSerialNumber,BookAuther,BookPublisher")] Book book)
{
using (LibraryManagmentSystemDBEntities db = new LibraryManagmentSystemDBEntities())
if (ModelState.IsValid)
{
db.Books.Add(book);
db.SaveChanges();
return RedirectToAction("Index");
}
return View(book);
}
My view which is in React.js is as follows
Error is coming Uncaught TypeError: Cannot read property 'value' of undefined
I have also added a screen shot so that it is easier to point my mistake out.
<div id="app" class="container">
</div>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.6/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.6/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<script type="text/babel">
class InputValues extends React.Component
{
constructor(props)
{
super(props);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleSubmit(e)
{
e.preventDefault();
const data = new FormData();
data.append('BookName', this.BookName.value);
data.append('BookSerialNumber', this.BookSerialNumber.value);
data.append('BookAuther', this.BookAuther.value);
data.append('BookPublisher', this.BookPublisher.value);
var xhr = new XMLHttpRequest();
xhr.open('post', this.props.url, true);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.onreadystatechange = function()
{
if(xhr.readyState == XMLHttpRequest.DONE && xhr.status == 200)
{
alert("good!!!");
}
}
xhr.send(data);
}
render()
{
return(
<div>
<form onSubmit={this.handleSubmit}>
<label htmlFor="BookName">Book Name </label><br />
<input id="BookName" type="text" placeholder="Enter BookName" ref={this.BookName} />
<br /><br />
<label htmlFor="BookSerialNumber">Book Serial Number: </label><br />
<input id="BookSerialNumber" type="text" placeholder="Enter BookSerialNumber" ref={this.BookSerialNumber} />
<br /><br />
<label htmlFor="BookAuther">BookAuther: </label><br />
<input id="BookAuther" type="text" placeholder="BookAuther" ref={this.BookAuther} />
<br /><br />
<label htmlFor="BookPublisher">BookPublisher: </label><br />
<input id="BookPublisher" type="text" placeholder="Enter BookPublisher" ref={this.BookPublisher} />
<br /><br />
<p>
<button type="submit">Submit</button>
</p>
</form>
</div>
);
}
}
ReactDOM.render
(<InputValues />, document.getElementById("app"));
</script>

Render html form into main html page using AngularJS app method

I am very new to AngularJS and trying to understand how AngularJS can use along with ASP.NET-MVC5 application. In my first attempt I want to run AngularJS app from basic HTML page (in my case index.html) where app holding form template in html format, also I have add global variable, controller, service via factory and directives but I cannot manage to run this app 'employee-form' inside index.html. In order to test if angularJS is initialize and working properly, I have added very basic angularjs code inside in html and it works.. I am not sure where I have done mistake
AngularFormsApp.js (global variable)
var angularFormsApp = angular.module('angularFormsApp', []);
efController.js
angularFormsApp.controller('efController',
function efController($scope, efService) {
$scope.employee = efService.employee;
});
efService.js
angularFormsApp.factory('efService',
function () {
return {
employee: {
fullName: "Khurram Zahid",
notes: "The ideal employee, just don't mess with him",
department: "IT Development",
perkCar: true,
perkStock: false,
perkSixWeeks: true,
payrollType: "none"
}
}
});
efDirective.js
angularFormsApp.directive('employeeForm',
function () {
return {
restrict: 'E', //E stands for element, meaning we want to use this directive as element
templateUrl: '~/App/EmployeeForm/efTemplate.html'
}
});
efTemplate.html (form)
<div class="form-group">
<label for="fullName">Name</label>
<input type="text" id="fullName" name="fullName" class="form-control" />
</div>
<div class="form-group">
<label for="notes">Notes</label>
<input type="text" id="notes" name="notes" class="form-control" />
</div>
<div class="form-group">
<label for="department">Department</label>
<select id="department" name="department" class="form-control">
<option>Engineering</option>
<option>Marketing</option>
<option>Finance</option>
<option>IT Development</option>
</select>
</div>
<br/>
<span><b>Perks</b></span>
<div class="checkbox">
<label><input type="checkbox" value="perCar"/>Company Car</label>
</div>
<div class="checkbox">
<label><input type="checkbox" value="perkStock" />perk Stock</label>
</div>
<div class="checkbox">
<label><input type="checkbox" value="perkSixWeeks" />perk Six Weeks</label>
</div>
<input type="submit" value="Submit Form" />
index.html
<!DOCTYPE html>
<html>
<head >
<title>Angular JS</title>
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<script src="Scripts/angular.min.js"></script>
<script src="App/AngularFormsApp.js"></script>
<script src="App/EmployeeForm/efController.js"></script>
<script src="App/EmployeeForm/efService.js"></script>
<script src="App/EmployeeForm/efDirective.js"></script>
</head>
<body ng-app="angularFormsApp">
<div class="AngularJSTestBlockCode">
<div>
<input type="text" ng-model="name" />
<br />
<h1>Hello {{name}}</h1>
</div>
<br /><br />
<div>
{{458/8}}
</div>
</div>
<div>-------------------------------------------------------</div> <br/><br/>
<div ng-controller="efController">
<employee-form>????????????????????
</div>
You need a route provider to render your html page. Here is your example
.config(['$stateProvider',function($stateProvider) {
$stateProvider.state('dashboard', {
url:'/dashboard',
templateUrl: 'views/dashboard/main.html',
})
.state('dashboard.create-example',{
templateUrl:'views/example/create.html',
url:'/create-example',
controller:'Ctrl'
})
then in your controller(efController.js) put this $state.transitionTo('dashboard.create-example'); to render your page to any html you want

jQuery: Clearing Form Inputs on Html.TextBox and then refreshing page

I have found this JSFiddle that clear text from input? http://jsfiddle.net/xavi3r/D3prt/
How do I use this for Html.TextBox in razor View in MVC and then refresh page?
So far my solution is this (it works):
#{
Layout = "~/Views/Shared/_Layout.cshtml";
}
<script type="text/javascript">
$(function () {
//this part clean text from textboxes
$('#button').click(function () {
$(':input', '#form')
.not(':button, :submit, :reset, :hidden')
.val('')
.removeAttr('checked')
.removeAttr('selected');
});
//this part submit my search button - it is like refresh button, returns state as it was in begin - this is the same as I click on search without entering parameters
$('#button').click(function () {
document.myForm.onSubmit.click();
});
});
</script>
using (Html.BeginForm("Index", "LoginUser", FormMethod.Get, new { id = "form", name = "myForm"}))
{
<div class="form-group">
#Html.TextBox("order", Model.Search.Order, new { placeholder="Luška št.", id ="quantity1", #class="quantity form-control"})
<button type="submit" class="btn btn-primary" name="onSubmit">Search</button>
<input type="button" class="btn btn-primary" value="Clear" id="button" />
</div>
}
In _Layout:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="~/Scripts/jquery.validate.min.js"></script>
<script type="text/javascript" src="~/scripts/jquery.validate.unobtrusive.min.js"></script>
<script type="text/javascript" src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
<script type="text/javascript" src="~/Scripts/bootstrap.min.js"></script>
Realy thanks for help...
Your view will be rendered like this as html:
<div class="form-group">
<input type="text" name="order" id="quantity1" placeholder="Luška št." class="quantity form-control" value="SomeValue" />
<input type="button" />
</div>
and you can do it with this code:
$(function () {
$('.form-group input:button').click(function () {
$('input#quantity1').val('');
});
});

On-click jquery mobile

I need some sort on onclick function for my jquery mobile/php website. The following on-click wont work...
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
_END;
$int = 0;
foreach (array_slice($list,1) as $value) {
echo <<<_END
<input type="checkbox" name="checkbox-$int" id="checkbox-$int" class="custom" />
<label for="checkbox-$int">$value</label>
_END;
$int = $int+1;
}
echo <<<_END
</fieldset>
<script type="text/javascript" >
$(".checkbox-1").click(function(){
alert('clicked!');
});
</script>
</div>
_END;
Your jQuery is using a class selector, you need to update to it used an ID selector to match the output.
Replace
$(".checkbox-1").click
with
$("#checkbox-1").click

ASP.Net MVC3 Rendering partial action returns error

I have a problem while trying to render a partial action on my layout. On the line :
#{Html.RenderAction("Login");}
i get an error "CS1501: No overload for method 'Write' takes 0 arguments". I have tried also invoking the RenderPartial directly, with the same result... Can you tell me what is wrong?
The code of my partial view:
#model SikWebRole.Models.LogOnModel
<script src="#Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.LoginLink').click(function () {
$('#loginForm').submit();
});
});
</script>
#using (Html.BeginForm("LogOn", "Account", FormMethod.Post, new { id = "loginForm" }))
{
<div class="loginBox">
<div class="errorMsg">
#Html.ValidationSummary(true, "Błędny login/hasło.")
</div>
<div class="loginHolder">
<input type="text" class="textInput" name="UserName" value="Login" />
</div>
<div class="passwordHolder">
<input type="text" class="textInput" name="Password" value="Hasło" />
</div>
<input name="RememberMe" style="display:none;" type="hidden" value="true"/>
Zaloguj</span>
<ul><li class="registerLi">Zarejestruj</li><li class="RemindLi">Przypomnij hasło</li></ul>
</div>
}
The function used for render action:
public PartialViewResult Login()
{
return PartialView("LogOnForm", new SikWebRole.Models.LogOnModel());
}
The partial view I want to render belongs to the "LogOn" method which is from the Account Controller, and the Login method is in the Picture Controller, maybe this is the reason?
I would be glad for all the answers.
Best Regards
As requested this is the code of my Layout.cshtml: http://pastebin.com/He2Rp5P4
In your cshtml file use #Html.Partial, not #Html.RenderPartial.

Resources