Now I read the book "ASP.NET MVC5, Freeman" and I have create a web-site.
Here how it looks like:
Button Home must looks like another button, I can't understand, what's wrong.
I am new in the ASP.NET, so I don't know, whe to look for the error.
Here is structure of my project:
SportsStore.Domain - for logic
SportsStore.UnitTests - for tests
SportsStore.WebUI - for views and controllers
I think, that problem is somevhere in the SportsStore.WebUI.
Menu.schtml:
#model IEnumerable<string>
#Html.ActionLink("Home", "List", "Product", null,
new { #class = "btn btn-block btn-defautl btn-lg" })
#foreach (var link in Model)
{
#Html.RouteLink(link, new
{
controller = "Product",
action = "List",
category = link,
page = 1
}, new
{
#class = "btn btn-block btn-default btn-lg"
+ (link == ViewBag.SelectedCategory ? " btn-primary" : "")
})
}
List.cshtml
#model SportsStore.WebUI.Models.ProductsListViewModel
#{
ViewBag.Title = "Products";
}
#foreach (var p in Model.Products )
{
#Html.Partial("ProductSummary", p)
}
<div class="btn-group pull-right">
#Html.PageLinks(Model.PagingInfo, x => Url.Action("List",
new { page = x, category = Model.CurrentCategory }))
</div>
Edit1 - Generated HTML-code
<html><div id="coFrameDiv" style="height:0px;display:none;"><iframe id="coToolbarFrame" src="chrome-extension://cjabmdjcfcfdmffimndhafhblfmpjdpe/toolbar/placeholder.html" style="height: 0px; width: 100%; display: none;"></iframe></div><head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="/Content/bootstrap.css" rel="stylesheet">
<link href="/Content/bootstrap-theme.css" rel="stylesheet">
<title>Products</title>
<link rel="stylesheet" id="coToolbarStyle" href="chrome-extension://cjabmdjcfcfdmffimndhafhblfmpjdpe/toolbar/styles/placeholder.css" type="text/css"><script type="text/javascript" id="cosymantecbfw_removeToolbar">(function () { var toolbarElement = {}, parent = {}, interval = 0, retryCount = 0, isRemoved = false; if (window.location.protocol === 'file:') { interval = window.setInterval(function () { toolbarElement = document.getElementById('coFrameDiv'); if (toolbarElement) { parent = toolbarElement.parentNode; if (parent) { parent.removeChild(toolbarElement); isRemoved = true; if (document.body && document.body.style) { document.body.style.setProperty('margin-top', '0px', 'important'); } } } retryCount += 1; if (retryCount > 10 || isRemoved) { window.clearInterval(interval); } }, 10); } })();</script></head>
<body>
<div class="navbar navbar-inverse" role="navigation">
<a class="navbar-brand" href="#">SPORTS STORE</a>
</div>
<div class="row panel">
<div id="categories" class="col-xs-3">
<a class="btn btn-block btn-defautl btn-lg" href="/">Home</a>
<a class="btn btn-block btn-default btn-lg" href="/Chess">Chess</a><a class="btn btn-block btn-default btn-lg" href="/Soccer">Soccer</a><a class="btn btn-block btn-default btn-lg" href="/Watersports">Watersports</a>;
</div>
<div class="col-xs-8">
<div class="well">
<h3>
<strong>Kayak</strong>
<span class="pull-right label label-primary">275,00 ₽</span>
</h3>
<span class="lead">A boat for one person</span>
</div><div class="well">
<h3>
<strong>Lifejacket</strong>
<span class="pull-right label label-primary">48,95 ₽</span>
</h3>
<span class="lead">Protective and fascionable</span>
</div><div class="well">
<h3>
<strong>Soccre ball</strong>
<span class="pull-right label label-primary">19,50 ₽</span>
</h3>
<span class="lead">FIFA-approver size and weight</span>
</div><div class="well">
<h3>
<strong>Corner Flags</strong>
<span class="pull-right label label-primary">34,95 ₽</span>
</h3>
<span class="lead">Give you playing field a professional touch</span>
</div>
<div class="btn-group pull-right">
<a class="btn btn-default btn-primary selected" href="/">1</a><a class="btn btn-default" href="/Page2">2</a><a class="btn btn-default" href="/Page3">3</a>
</div>
</div>
</div>
<!-- Visual Studio Browser Link -->
<script type="application/json" id="__browserLink_initializationData">
{"appName":"Chrome","requestId":"71da9908a09f40e490a8f3c96abdeaaa"}
</script>
<script type="text/javascript" src="http://localhost:60023/6e11616ea0ef4c01be4ca7cc7741a6e8/browserLink" async="async"></script>
<!-- End Browser Link -->
</body></html>
Maybe it will help:
https://github.com/dmitrykozyr/SportsStoreMVC
Using categories - part of the file _Layout.cshtml
<body>
<div class="navbar navbar-inverse" role="navigation">
<a class="navbar-brand" href="#">SPORTS STORE</a>
</div>
<div class="row panel">
<div id="categories" class="col-xs-3">
#Html.Action("Menu", "Nav");
</div>
<div class="col-xs-8">
#RenderBody()
</div>
</div>
</body>
When creating your Home-link, you have misspelled default
#Html.ActionLink("Home", "List", "Product", null,
new { #class = "btn btn-block btn-defautl btn-lg" })
should be
#Html.ActionLink("Home", "List", "Product", null,
new { #class = "btn btn-block btn-default btn-lg" })
Related
EDIT: Problem solved! I had no data in my database, so the foreach loop had no model items to iterate through. Upon populating the database, the HTML within the foreach loop is rendering correctly on the view.
My brain is currently hurting due to this problem I have with my partial view not being rendered within my Home/Index view.
I am trying to use Html.Action() helper to call my PhotoGallery action within my Photos controller in order to dynamically populate and return a _PhotoGallery.cshtml partial view.
Here is my PhotoGallery action in my Photos controller:
[ChildActionOnly] //This attribute means the action cannot be accessed from the brower's address bar
public ActionResult PhotoGallery(int num = 0)
{
//In the view, display the latest photos when num is greater than 0
//Otherwise, display all photos
List<Photo> photos;
if (num == 0)
{
photos = db.Photos.ToList();
}
else
{
photos = db.Photos
.OrderByDescending(p => p.createdDate)
.Take(num).ToList();
}
return PartialView("~/Views/Shared/_PhotoGallery.cshtml", photos);
}
Views/Home/Index.cshtml:
#{
ViewBag.Title = "Welcome to PhotoSocial";
}
<p class="lead">Create an account to instantly share your favourite moments with everyone.</p>
<h2>Latest Photos:</h2>
#Html.Action("PhotoGallery", "Photos", new { num = 3 })
Views/Shared/_PhotoGallery.cshtml:
#model IEnumerable<SocialNetwork.Models.Photo>
#{
Layout = null;
}
#foreach (var item in Model)
{
<div class="" id="photo-gallery">
<h3>
#Html.DisplayFor(modelItem => item.title)
</h3>
#if (item.photoFile != null)
{
<div class="photo-display">
<img class="" src="#Url.Action("GetImage", "Photo", new { photoId = item.photoId})" />
</div>
}
<div class="" id="photo-data">
<div>
<div class="" id="display-label">
<p>Uploaded by:</p>
</div>
<div class="display-field">
#Html.DisplayFor(modelItem => item.username)
</div>
</div>
<div>
<div class="" id="display-label">
#Html.DisplayNameFor(model => model.createdDate):
</div>
<div class="display-field">
#Html.DisplayFor(modelItem => item.createdDate)
</div>
</div>
<div>
<div class="" id="display-label">
#Html.DisplayNameFor(model => model.modifiedDate):
</div>
<div class="display-field">
#Html.DisplayFor(modelItem => item.modifiedDate)
</div>
</div>
</div>
#Html.ActionLink("Details", "Details", new { id = item.photoId }) |
#Html.ActionLink("Delete", "Delete", new { id = item.photoId })
</div>
}
Here is the HTML source code that is rendered upon loading up Home/Index:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Welcome to PhotoSocial</title>
<link href="/Content/bootstrap.css" rel="stylesheet"/>
<link href="/Content/site.css" rel="stylesheet"/>
<script src="/Scripts/modernizr-2.8.3.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="/">PhotoSocial</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li>About</li>
<li>Contact</li>
<ul class="nav navbar-nav navbar-right">
<li>Login</li>
<li>Register</li>
</ul>
</ul>
</div>
</div>
</div>
<div class="container body-content">
<p class="lead">Create an account to instantly share your favourite moments with everyone.</p>
<h2>Latest Photos:</h2>
<hr />
<footer>
<p>© 2019 - Thomas Dam</p>
</footer>
</div>
<script src="/Scripts/jquery-3.3.1.js"></script>
<script src="/Scripts/bootstrap.js"></script>
</body>
</html>
As you can see in the final output, my Home/Index.cshtml and _Layout view have correctly rendered, however my _PhotoGallery partial view has not been rendered.
I have tried Html.RenderAction() but I need the model to map a photo to the view. I have also tried Html.RenderPartial() but I need to return a Model object. One thing I've noticed, though, is that when I place HTML outside of the #foreach loop, it appears on my view!
What is it that I am doing wrong? Thanks guys.
I am prety new to Razor Pages so maybe I am doing it just wrong.
I am using .Net Core 3 preview 5 and for some reason my asp-route parameter is not working.
I have the following button in my cshtml (index) page:
<form method="get" asp-page-handler="RetrieveData" asp-route-retrieveid="5">
<button class="btn btn-primary">Retrieve Data</button>
</form>
My code behind for this action:
public async Task<IActionResult> OnGetRetrieveData(int retrieveid)
{
// Do stuff
return Page();
}
Everytime I press the button the retrieveid parameter remains 0 (null):
My entire cshtml code:
#page "{handler?}"
#model IndexModel
#{
ViewData["Title"] = "Retrieve Data";
}
#section Scripts
{
<script type="text/javascript">
// Some jQuery
</script>
}
<div class="text-center">
<h1 class="display-4">Retrieve Data</h1>
</div>
#if (Model.ErrorMessage != null)
{
<div id="ErrorMsg" class="alert alert-info alert-dismissible fade show" role="alert">
#Model.ErrorMessage
<button type="button" class="accept-policy close" data-dismiss="alert" aria-label="Close" data-cookie-string="#Model.ErrorMessage">
<span aria-hidden="true">Sluiten</span>
</button>
</div>
}
<button id="getData" class="btn btn-primary" data-toggle="modal" data-target="#modalGetDataConfirm">
Get Data
</button>
<!-- Modal -->
<div id="modalGetDataConfirm" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Get Data</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<p>Do you want to retrieve the data</p>
</div>
<div class="modal-footer">
<form method="get" asp-page-handler="RetrieveData" asp-route-retrieveid="5">
<button class="btn btn-primary">Retrieve Data</button>
</form>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
<br />
#if (Model.DataModel != null)
{
// table with search and the retrieved data
var prevDisabled = !Model.DataModel.HasPreviousPage ? "disabled" : "";
var nextDisabled = !Model.DataModel.HasNextPage ? "disabled" : "";
<a asp-page-handler="LoadData"
asp-route-sortOrder="#Model.CurrentSort"
asp-route-pageIndex="#(Model.DataModel.PageIndex - 1)"
asp-route-currentFilter="#Model.CurrentFilter"
class="btn btn-default #prevDisabled">
Vorige
</a>
<a asp-page-handler="LoadData"
asp-route-sortOrder="#Model.CurrentSort"
asp-route-pageIndex="#(Model.DataModel.PageIndex + 1)"
asp-route-currentFilter="#Model.CurrentFilter"
class="btn btn-default #nextDisabled">
Volgende
</a>
}
The strange thing is that the asp-route values in the paging <a> element IS working..
You need to add the parameter to the route template:
#page "{handler?}/{id?}"
#model IndexModel
#{
ViewData["Title"] = "Retrieve Data";
}
...
my index page is here
<div ng-app="CommentApp" ng-controller="MyController">
<div class=" col-md-12">
<div class="alert alert-info"><h2 class="text-center">Comment App</h2></div>
<div id="CommentList" class="container col-md-7" scroll="Comments" style="height:650px; overflow:scroll">
<div class="row" style="border:0px solid;padding:20px;" ng-repeat="Comment in Comments | orderBy:'LastUpdateTime'">
<div class="well well-sm row">
<div class="col-md-8">
**<h3><text style="color:mediumpurple;" e-form="rowform" data-ng-model="UpdateCommentText" editable-text="Comment.CommentText">{{Comment.CommentText || 'Empty'}}</text></h3>**
</div>
<div class="col-md-4 pull-right" style="margin-top:17px">
<div class="buttons pull-right">
<form editable-form name="rowform" ng-show="rowform.$visible" class="form-buttons form-inline">
<button type="submit" ng-disabled="rowform.$waiting" ng-click="EditComment()" class="btn btn-primary">
Save
</button>
<button type="button" ng-disabled="rowform.$waiting" ng-click="rowform.$cancel()" class="btn btn-default">
Cancel
</button>
</form>
</div>
<div class="buttons pull-right" ng-show="!rowform.$visible">
<button class="btn btn-primary" ng-click="rowform.$show()">Edit</button>
<button class="btn btn-danger" ng-click="RemoveComment(Comment)">Delete</button>
</div>
</div>
</div>
<div class="col-md-12 row" style="margin-bottom:10px" ng-repeat="img in Comment.Images">
<img style="margin-bottom:15px" src="{{img}}" />
</div>
<h2 class="pull-right" style="color:green;font-size:15px; margin-right:20px">By User {{Comment.Id}}</h2>
<h2 class="pull-right" style="color: darkviolet; font-size: 15px; margin-right: 20px">{{Comment.LastUpdateTime.slice(6,-2) | date: 'hh:mm a dd-MMM-yyyy' }}</h2>
<div class="clearfix"> </div>
<hr />
</div>
</div>
</div>
<div class="col-sm-10" style="font-size:17px">
<form novalidate name="f1" ng-submit="AddComment()">
<div style="color: red">{{Message}}</div>
<div class="col-sm-1">
<div class="glyphicon glyphicon-plus" style="height: 50px;border:1px solid; width: 50px; cursor:pointer;" onclick="getFile()">
<div style="height: 0px;width:0px; overflow:hidden;">
<input id="filesel" type="file" name="file" accept="image/*" onchange="angular.element(this).scope().selectFileforUpload(this.files)" required multiple />
</div>
</div>
<span class="error">{{FileInvalidMessage}}</span>
</div>
<div class="col-sm-6 pull-left">
<input type="text" placeholder="Enter Your Comment Here" style="height: 50px;font-size:30px;width:500px" name=" ufiledescription" ng-model="CommentText" class="{{(IsFormSubmitted?'ng-dirty' + (f1.uFileDescription.$invalid?' ng-invalid':''):'')}}" autofocus />
</div>
<div class="col-sm-3 pull-left">
<input class="btn btn-primary" style="height:50px;width:100px" value="Send" id="Submit" type="submit" />
</div>
</form>
</div>
</div>
my angular controller
app.controller("MyController", function ($scope, MyServices,$http) {
// Get All Comments
GetAllComments();
function GetAllComments() {
var getData = MyServices.getComments();
getData.then(function (cmnt) {
$scope.Comments = cmnt.data;
},
function () {
alert('Error in getting Comments');
});
};
// Add New Comment
$scope.AddComment = function () {
var Comment = {
CommentText: $scope.CommentText
};
var getData = MyServices.AddCmnt(Comment);
getData.then(function (ResultMsg) {
GetAllComments();
alert(ResultMsg.data);
});
ClearFields();
$scope.refresh();
};
// Edit The Comment
$scope.EditComment = function () {
Comment =
{
Id: Comment.Id,
CommentText: $scope.UpdateCommentText
}
alert(Comment.CommentText);
//var getData = MyServices.getCommentById(Comment.Id);
var getData = MyServices.EditCmnt(Comment);
getData.then(function (ResultMsg) {
alert(ResultMsg.data);
GetAllComments();
});
};
// Delete The Comment
$scope.RemoveComment = function (Comment) {
var getData = MyServices.DeleteCmnt(Comment);
getData.then(function (ResultMsg) {
alert(ResultMsg.data);
GetAllComments();
},
function () {
alert('Error in Deleting Comment');
});
}
//Clear Fields After Comment Addition
function ClearFields() {
$scope.CommentText = "";
angular.forEach(angular.element("input[type='file']"), function (inputElem) {
angular.element(inputElem).val(null);
});
};
});
in the index page the comment.commenttext which is editable text and coming from database on click of edit there will be a editable text box and after editing the text on click of save button i cant get value of edited text what shpold to in editcomment section to retrieve value of edited text?
i tried $scope.Comment.commenttext but it is undefined..
help me thanks in advance..
You have a double bind here:
<h3>
<text
style="color:mediumpurple;"
e-form="rowform"
data-ng-model="UpdateCommentText"
editable-text="Comment.CommentText"
>
{{Comment.CommentText || 'Empty'}}
</text>
</h3>
So basically you see what is binded with data-ng-model, not experssion in {{ }} Try getting UpdateCommentText value. Maybe this helps.
I developing business application in ASP MVC 5. I was trying to use Remote attribute but its not working.
Metadata class - where i put attribute
[MetadataType(typeof(Departmanmetadata))]
public partial class DepartmanTable
{
}
public class Departmanmetadata
{
[Key]
[DisplayName("Deparman No")]
public int DepartmanID { get; set; }
[Required(ErrorMessage = "Bu alan boş bırakılamaz!")]
[StringLength(50, MinimumLength = 2, ErrorMessage = "Lütfen 2 ile 50 karakter arasında veri giriniz!")]
[DisplayName("Departman Adı")]
[Remote("IsNameAvaible", "Departman", ErrorMessage = "Sistemde zaten var!")]
public string DepartmanName { get; set; }
}
Controller
public JsonResult IsNameAvaible(string name)
{
return Json(!db.DepartmanTable.Any(a => a.DepartmanName == name), JsonRequestBehavior.AllowGet);
}
View
<link href="~/css/eklemeler.css" rel="stylesheet" />
<script src="~/scripts/jquery-1.10.2.min.js"></script>
<script src="~/scripts/jquery.validate.unobtrusive.min.js"></script>
<script src="~/scripts/jquery.validate.min.js"></script>
<div class="row wrapper border-bottom white-bg page-heading">
<div class="col-lg-10">
<h2>DEPARTMAN</h2>
<ol class="breadcrumb">
<li>
<a>Home</a>
</li>
<li>
<a>Departman</a>
</li>
<li class="active">
<strong>Departman Add</strong>
</li>
</ol>
</div>
<div class="col-lg-2">
</div>
</div>
<br />
<div class="row">
<div class="col-lg-12">
<div class="ibox float-e-margins">
<div class="ibox-title">
<h5>Departman Add</h5>
<div class="ibox-tools">
<a class="collapse-link">
<i class="fa fa-chevron-up"></i>
</a>
<a class="close-link">
<i class="fa fa-times"></i>
</a>
</div>
</div>
<div class="ibox-content">
<form class="form-horizontal form-label-left" method="post" action="~/Departman/Create" novalidate>
#Html.AntiForgeryToken()
<div class="form-horizontal">
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
<div class="item form-group">
#Html.LabelFor(model => model.DepartmanName, htmlAttributes: new { #class = "control-label col-md-3 col-sm-3 col-xs-12" })
<div class="col-md-6 col-sm-6 col-xs-12">
#Html.EditorFor(model => model.DepartmanName, new { htmlAttributes = new { #class = "form-control col-md-7 col-xs-12" } })<span class="fa fa-long-arrow-up form-control-feedback right" aria-hidden="true"></span>
#Html.ValidationMessageFor(model => model.DepartmanName, "", new { #class = "text-danger" })
</div>
</div>
<br />
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Ekle" class="btn btn-primary" /> |
<i class="fa fa-share fa-2x"></i> #Html.ActionLink("Geri Dön!", "Index")
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
Create button doesn't working.
I think Scripts is the problem. Here the scripts.
<script src="~/scripts/jquery-1.10.2.min.js"></script>
<script src="~/scripts/jquery.validate.unobtrusive.min.js"></script>
<script src="~/scripts/jquery.validate.min.js"></script>
What might be the issue?
The property you apply the attribute to is named DepartmanName and generates the following html
<input type="text" name="DepartmanName" ..... />
which means you controller method must have a matching parameter. Change it to
public JsonResult IsNameAvaible(string departmanName)
{
....
}
I'm trying to create a search method, that is called in my _Layout.cshtml and when I click on submit button, the user is redirected to "search view".
I' following this tutorial, but the author call your method at index view and I need to call the method at _Layout to be redirect to another view that will give me the return of method.
This is my _Layout, is basic a nav-bar from bootstrap with a textfield and a button, that the user can put what he need to find:
#model IEnumerable<TestTcc2.Models.Musica>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>#ViewBag.Title</title>
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
#Styles.Render("~/Content/Bootstrap")
#Scripts.Render("~/bundles/modernizr")
#Scripts.Render("~/bundles/jquery")
</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="#">#Html.ActionLink("your logo here", "IndexOuvinte", "Home")</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>#Html.ActionLink("Home", "IndexOuvinte", "Home")</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>#Html.ActionLink("Manage Account", "Manage", "Account")</li>
<li>#using (Html.BeginForm("LogOff", "Account", FormMethod.Post, new { id = "logoutForm" }))
{
#Html.AntiForgeryToken()
Log off}</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</div>
<div class="container">
#RenderSection("featured", required: false)
#RenderBody()
</div>
<!--Fim container -->
</body>
</html>
and this is the method that I want to call at _Layout.cshtml:
public ActionResult Search(string search)
{
var musicas = from m in db.Musicas select m;
if (!String.IsNullOrEmpty(search))
{
musicas = musicas.Where(s => s.Nome.Contains(search));
return RedirectToAction("Search"); //name of view that will return the data
}
return View(musicas);
}
Well, you might consider specifying an action to the form or just use the appropriate helper to generate it:
#using (Html.BeginForm("Search", "SomeController", null, FormMethod.Post, new { #class = "navbar-form navbar-left", role = "search" }))
{
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
}