I try to bind a dropdownlist in knockout with MVC 4. Here is my code:
Action
JavaScript
x
15
15
1
public JsonResult GetUserTypes()
2
{
3
using (QuestApplicationEntities db = new QuestApplicationEntities())
4
{
5
var usertypes = (from usertype in db.UserTypes
6
select new
7
{
8
usertype.Id,
9
usertype.Name
10
}).ToArray();
11
12
return Json(usertypes, JsonRequestBehavior.AllowGet);
13
}
14
}
15
Knockout.js
JavaScript
1
37
37
1
var Register =
2
{
3
Name: ko.observable("Ragesh"),
4
Email: ko.observable().extend({ email: true }),
5
Password: ko.observable(),
6
UserTypes: ko.observableArray([]),
7
8
UserType: ko.observable(),
9
10
SaveRegistration: function () {
11
//alert('saved');
12
$.ajax({
13
url: '/Home/RegisterUser',
14
type: 'post',
15
datatype: 'json',
16
data: ko.toJSON(this),
17
contentType: 'application/json',
18
success: function () {
19
alert('saved');
20
}
21
});
22
}
23
};
24
25
$.ajax({
26
url: '/Home/GetUserTypes',
27
type: 'post',
28
datatype: 'json',
29
data: ko.toJSON(this),
30
contentType: 'application/json',
31
success: function () {
32
ko.mapping.fromJS(data,Register.UserTypes);
33
}
34
});
35
36
ko.applyBindings(Register);
37
Html
JavaScript
1
30
30
1
<h4>Register</h4>
2
<fieldset>
3
<legend>New User Registration</legend>
4
<div class="editor-label">
5
Name
6
</div>
7
<div class="editor-field">
8
<input data-bind="value:Name" />
9
</div>
10
<div class="editor-label">
11
Email
12
</div>
13
<div class="editor-field">
14
<input data-bind="value:Email" />
15
</div>
16
<div class="editor-label">
17
User Type
18
</div>
19
<div class="editor-field">
20
<select data-bind="options: UserTypes, value: UserType, optionsCaption: 'Select User Type...'">
21
</select>
22
</div>
23
<p>
24
<button type="button" data-bind="click:SaveRegistration">Register</button>
25
</p>
26
</fieldset>
27
<script src="~/Scripts/knockout-2.2.1.js"></script>
28
<script src="~/Scripts/knockout.validation.js"></script>
29
<script src="~/Scripts/App/Register.js"></script>
30
But the GetUserTypes action is not fired.
And there is another error show in the Firebug.
Advertisement
Answer
Your action GetUserTypes
doesn’t expected any parameters, but you pass viewModel object:
JavaScript
1
8
1
.
2
$.ajax({
3
url: '/Home/GetUserTypes',
4
type: 'post',
5
datatype: 'json',
6
data: ko.toJSON(this),
7
8
Try to remove this property from ajax call.
About error in FireBug, just include jQuery script in your page.