Skip to content

Instantly share code, notes, and snippets.

@bhameyie
Created May 28, 2013 22:18
Show Gist options
  • Save bhameyie/5666602 to your computer and use it in GitHub Desktop.
Save bhameyie/5666602 to your computer and use it in GitHub Desktop.
knockoutjs with mvc
@using Charcoal.Core.Entities
@using Charcoal.Models
@model Charcoal.Models.StoryViewModel
<div class="modal-form" id="createStoryModal">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
×</button>
<h3 id="myModalLabel">
Create Story</h3>
</div>
<div class="modal-body container-fluid">
<div class="alert-danger">
<strong data-bind="text: titleError"></strong>
</div>
<div class="control-group">
<div class="control-label">
@Html.LabelFor(model => model.Title)
</div>
<div class="controls" id="title">
<input data-bind="value: storyTitle" />
</div>
</div>
<div class="control-group">
<div class="control-label">
@Html.LabelFor(model => model.Description)
</div>
<div class="controls">
<textarea data-bind="value: description" type="text"></textarea>
</div>
</div>
<div class="control-group">
<div class="control-label">
@Html.LabelFor(model => model.Estimate)
</div>
<div class="controls">
<select data-bind="options: estimates,
optionsCaption: 'Choose estimate',
value: estimate">
</select>
</div>
</div>
<div class="control-group">
<div class="control-label">
@Html.LabelFor(model => model.Status)
</div>
<div class="controls">
<select data-bind="options: statuses,
optionsCaption: 'Choose status',
value: storyStatus">
</select>
</div>
</div>
<div class="control-group">
<div class="control-label">
@Html.LabelFor(model => model.IterationType)
</div>
<div class="controls">
<select data-bind="options: iterationTypes,
optionsCaption: 'Choose iteration',
value: iterationType">
</select>
</div>
</div>
<div class="control-group">
<div class="control-label">
@Html.LabelFor(model => model.StoryType)
</div>
<div class="controls">
<select data-bind="options: storyTypes,
optionsCaption: 'Choose type',
value: storyType">
</select>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">
Close</button>
<button type="submit" class="btn btn-primary" value="Save" data-bind="click: createStory">
Create</button>
@*onclick="CreateStory(@Model.ProjectId,'@Html.Raw(@Model.Title)', '@Html.Raw(@Model.Description)',@Model.Estimate,@Html.Raw(@Model.IterationType.ToString())','@Html.Raw(@Model.StoryType.ToString())', '@Html.Raw(@Model.Status.ToString())')" />*@
</div>
</div>
<script type="text/javascript">
function isNullOrEmpty(str) {
return (!str || /^\s*$/ .test(str));
}
function StoryModel() {
this.iterationTypes = @Html.Raw(EnumHelper.GetEnumStrings<IterationType>()) ;
this.storyTypes = @Html.Raw(EnumHelper.GetEnumStrings<StoryType>());
this.statuses = @Html.Raw(EnumHelper.GetEnumStrings<StoryStatus>());
this.estimates = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
this.storyTitle = ko.observable("");
this.description = ko.observable("");
this.estimate = ko.observable("");
this.iterationType = ko.observable("");
this.storyType = ko.observable("");
this.projectId = @Model.ProjectId ;
this.storyStatus = ko.observable("");
this.titleError = ko.computed(function() {
var str = this.storyTitle();
if(isNullOrEmpty(str)) {
return "no title specified";
} else {
return "";
}
}, this);
this.createStory = function () {
if(isNullOrEmpty(this.storyTitle())) {
alert("you are yet to specify a title");
}
else {
$.ajax({
url: "/Stories/CreateStory",
type: "POST",
data: 'projectId=' + this.projectId + '&title=' + this.storyTitle() + '&description=' + this.description()
+ '&estimate=' + this.estimate() + '&iterationType=' + this.iterationType()
+ '&storytype=' + this.storyType() + '&status=' + this.storyStatus(),
success: function(data) {
$("#storyTable").append($(data));
$('#newstory').modal('hide');
//alert(data);
},
error: function(xhr, textStatus, error) {
alert('ajax:failure', [xhr, status, error]);
}
});
}
};
};
ko.applyBindings(new StoryModel(), document.getElementById("createStoryModal"));
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment