这是我的 cshtml 可以正常工作，包括剃须刀和引导程序
@using System.Data
@model IEnumerable<CampRoll.Models.Camp>
<div class="container">
<h2>@ViewBag.PageTitle</h2>
<p>
@Html.ActionLink("Create New", "Create", null, new { @class = "btn btn-success" })
</p>
<div class="row">
<div class="col-xs-8">
<table id='campsTable' class="table table-condensed table-striped">
<tr>
<th>
@Html.DisplayNameFor(model => model.Title)
</th>
<th>
@Html.DisplayNameFor(model => model.Leader)
</th>
<th>
@*@Html.ActionLink("StartDate",null,new{sortOrder=@ViewBag.dateOrder},
new{@class="btn btn-info btn-xs"})*@
<a class="btn btn-xs btn-info" href="@Url.Action("Index", new { sortOrder = @ViewBag.dateOrder })">
@if (ViewBag.dateOrder == "ascDate")
{
<span class="glyphicon glyphicon-arrow-down" aria-hidden="true"></span>
}
else if (ViewBag.dateOrder == "descDate")
{
<span class="glyphicon glyphicon-arrow-up" aria-hidden="true"></span>
}
StartDate
</a>
</th>
<th><a class="btn btn-xs btn-info" href="@Url.Action("Index", new { sortOrder = @ViewBag.numberOrder })">
@if (ViewBag.numberOrder == "descNumber")
{
<span class="glyphicon glyphicon-arrow-up" aria-hidden="true"></span>
}
else if (ViewBag.numberOrder == "ascNumber")
{
<span class="glyphicon glyphicon-arrow-down" aria-hidden="true"></span>
}
Number
</a></th>
<th></th>
</tr>
@foreach (var item in Model)
{
<tr>
<td>
<span class="btn btn-xs btn-warning"
onclick="showChildren('@item.CampId')">@Html.DisplayFor(modelItem => item.Title)</span>
</td>
<td>
<span class="btn btn-xs btn-danger" onclick="showLeader('@item.LeaderId')">
@Html.DisplayFor(modelItem => item.Leader.FirstName)
</span>
</td>
<td>
@Html.DisplayFor(modelItem => item.StartDate)
</td>
<td>
@if (item.Children.Count == 0)
{
<p style="margin: 0px">None</p>
}
else
{
@Html.DisplayFor(modelItem => item.Children.Count)
}
</td>
<td>
@Html.ActionLink("Edit", "Edit", new { id = item.CampId }, new { @class = "btn btn-info btn-xs" })
@Html.ActionLink("Details", "Details", new { id = item.CampId }, new { @class = "btn btn-info btn-xs" })
@Html.ActionLink("Delete", "Delete", new { id = item.CampId }, new { @class = "btn btn-danger btn-xs" })
</td>
</tr>
}
</table>
</div>
<div class="col-xs-4">
<div id="Detail"></div>
<div>
<form id="CreateChild" hidden="">
<div class="form-group" style="margin-top: 10px">
<input type="hidden" name="campId">
<input type="submit" value="Add" class="btn btn-xs btn-success" style="margin-top: -5px;" />
<input type="text" name="name"><span> to Camp</span>
</div>
</form>
<form id="EditChild" hidden="">
<div class="form-group" style="margin-top: 10px">
<input type="hidden" name="campId"><input type="hidden" name="childId">
<input type="hidden" name="sex">
<input type="submit" value="Save" class="btn btn-xs btn-success" style="margin-top: -5px;" />
<input type="button" onclick="$('#EditChild').hide(); $('#CreateChild').show();" value="Cancel" class="btn btn-xs btn-warning" style="margin-top: -5px;" />
<input type="text" name="name" value="">
<div style="margin:-5px 5px" class='badge alert-info'><input type="radio" name="male" value="">M
<input type="radio" name="female" value="">F</div>
</div>
</form>
</div>
</div>
<!-- End Details -->
</div>
@section scripts
{
<script>
$(function() { // ready event
toastr.info('Welcome to Camp Roll');
// Handle toggle of male/female
$('#EditChild :input[name="male"]').click(function() {
$('#EditChild :input[name="female"]').prop('checked', false);
});
$('#EditChild :input[name="female"]').click(function() {
$('#EditChild :input[name="male"]').prop('checked', false);
});
@if (Model.Any())
{
// On display show the children in the first camp
<text>
showChildren(@Model.First().CampId);
</text>
}
});
// POSTback of creating a new child
$('#CreateChild').submit(function() {
if ($(this).find('input[name="name"]').val()!="") {
$.ajax({
url: '@Url.Action("CreateChild")',
type: "POST",
data: $(this).serialize(), // serialize the input controls for this form '#CreateChild'
success: function() {
showChildren($('form').find('input[name="campId"]').val()); // refresh the table of children
toastr.info($('form').find('input[name="name"]').val() + ' Added'); // toast
$('form').find('input[name="name"]').val(""); // zero out the add child box
}
});
}
return false;
});
// Display leader of the camp
function showLeader(leaderId) {
// When Leader name clicked, invoke Controler action method to return partial view and ajax it into place
@*$('#Detail').load('@Url.Action("LeaderById")' + '?id=' + leaderId).fadeIn(1000);*@
$.ajax({
url: '@Url.Action("LeaderById")',
data: { id: leaderId },
success: function(data) {
$('#Detail').hide();
$('#CreateChild').hide();
$('#Detail').html(data);
$('#Detail').fadeIn(1000);
},
error: function() {
$('#Detail').html("<h3>Couldn't find a leader</h3>");
}
}
);
}
// ajax Display of Children in the selected camp
function showChildren(campId) {
// When Leader name clicked, invoke Controler action method to return partial view and ajax it into place
$.ajax({
type: "GET",
url: '@Url.Action("ChildrenById")',
data: { id: campId },
success: function(data) {
$('#Detail').hide();
$('#CreateChild').hide();
$('#Detail').html(data);
$('#Detail').fadeIn("slow");
$('#CreateChild').find('input[name="campId"]').val(campId); // set campId for the Create Child form
$('#CreateChild').find('input[name="name"]').val("");
$('#CreateChild').fadeIn("slow");
},
error: function(data) {
$('#Detail').html('<h3>Error in retrieval</h3>');
}
});
}
function showEditChild(campId, childId, childName, sex) {
$('#EditChild').slideDown("fast");
$('#EditChild').show();
$('#CreateChild').hide();
$('#EditChild :input[name="childId"]').val(childId);
$('#EditChild :input[name="campId"]').val(campId);
$('#EditChild :input[name="name"]').val(childName);
if (sex == 'Male') {
$('#EditChild :input[name="male"]').prop('checked', true);
$('#EditChild :input[name="female"]').prop('checked', false);
} else {
$('#EditChild :input[name="female"]').prop('checked', true);
$('#EditChild :input[name="male"]').prop('checked', false);
}
}
$('#EditChild').submit(function() {
if ($('#EditChild :input[name="male"]').prop('checked') == true) {
$('#EditChild :input[name="sex"]').val('male');
} else {
$('#EditChild :input[name="sex"]').val('female');
}
$.ajax({
url: '@Url.Action("UpdateChild")',
type: "POST",
data: $(this).serialize(),
success: function() {
$('#EditChild').hide();
showChildren($('#EditChild :input[name="campId"]').val()); // refresh the table of children
toastr.info($('#EditChild :input[name="name"]').val() + ' Updated');
},
error: function(data) {
$('#Detail').html('<h3>Could not update Child record</h3>');
}
});
return false;
});
function deleteChild(childId, campId) {
$.ajax({
type: "POST",
url: '@Url.Action("DeleteChild")',
data: { id: childId, campId: campId },
success: function(data) {
$('#Detail').hide();
$('#CreateChild').hide();
$('#Detail').html(data);
$('#Detail').fadeIn("slow");
$('#CreateChild').find('input[name="campId"]').val(campId); // set campId for the Create Child form
$('#CreateChild').find('input[name="name"]').val("");
$('#CreateChild').fadeIn("slow");
},
error: function(data) {
$('#Detail').html('<h3>Error in retrieval</h3>');
}
});
}
</script>
}