Why ASP.NET routing add id into the url? - asp.net

I am making menu with categories, where first menu item is All categories. All items call method Index in controller Auction, however, first item does not send id as a parameter. I am curious, why I can not call method from view without asp-route-id and I have to set asp-route-id to null for the first item? Otherwise, it will set id the id of last clicked menu item. Are there another way how to solve the issue?
Works:
<div class="menu">
#if (Model.CurrentCategory == null)
{
<a class="d-block active" asp-controller="Auction" asp-action="Index" asp-route-id=null><span></span>All categories</a>
}
else
{
<a class="d-block" asp-controller="Auction" asp-action="Index" asp-route-id=null><span></span>All categories</a>
}
#foreach (var category in Model.Categories)
{
#if (#category.Id_category == Model.CurrentCategory)
{
<a class="d-block active" asp-controller="Auction" asp-action="Index" asp-route-id="#category.Id_category"><span></span>#category.Name</a>
}
else
{
<a class="d-block" asp-controller="Auction" asp-action="Index" asp-route-id="#category.Id_category"><span></span>#category.Name</a>
}
}
</div>
Does not work (copy id from last clicked menu item):
<div class="menu">
#if (Model.CurrentCategory == null)
{
<a class="d-block active" asp-controller="Auction" asp-action="Index"><span></span>All categories</a>
}
else
{
<a class="d-block" asp-controller="Auction" asp-action="Index" ><span></span>All categories</a>
}
#foreach (var category in Model.Categories)
{
#if (#category.Id_category == Model.CurrentCategory)
{
<a class="d-block active" asp-controller="Auction" asp-action="Index" asp-route-id="#category.Id_category"><span></span>#category.Name</a>
}
else
{
<a class="d-block" asp-controller="Auction" asp-action="Index" asp-route-id="#category.Id_category"><span></span>#category.Name</a>
}
}
</div>

ASPNet MVC add Id at the end of your route becuase it is set as default URL Route pattern, passing the Id is optional. It is set up when you create the application. Have a look in StartUp.cs
routes.MapRoute(
name: "Default",
url: "{controller}/{action}/{id}",
defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
);
or Program.cs in ASPNet Core
app.MapControllerRoute(
name: "default",
pattern: "{controller=Home}/{action=Index}/{id?}");

Related

ASP.NET MVC is it possible to use ajax.beginform inside a partial view?

Layout -> View -> Partial View
In the View:
<div class="col-md-8">
#{Html.RenderPartial("_komentari", commentlist);}
<div class="gap gap-small"></div>
<div class="box bg-gray">
<h3>#Res.commentwrite_title</h3>
#using (Ajax.BeginForm("postcomment", new { propertyid = Model.PublicID }, new AjaxOptions { UpdateTargetId = "commentsarea", HttpMethod = "Post", InsertionMode = InsertionMode.Replace }, null))
{
<div class="row">
<div class="col-md-8">
<div class="form-group">
<label>#Res.commentwrite_content</label>
<textarea id="comment" name="comment" class="form-control" rows="6"></textarea>
</div>
<div class="form-group">
<input class="btn btn-primary" type="submit" value='#Res.commentwrite_btn' />
</div>
</div>
</div>
}
</div>
</div>
In the Partial View:
<div id="commentsarea">
<ul class="booking-item-reviews list">
#if (Model != null)
{
foreach (Comment item in Model)
{
<li>
<div class="row">
<div class="col-md-2">
<div class="booking-item-review-person">
<a class="booking-item-review-person-avatar round" href="#">
<img src="/assets/img/70x70.png" alt="Image Alternative text" title="Bubbles" />
</a>
<p class="booking-item-review-person-name">
#if (item.UserId != null)
{
<a href='#Url.Action("details", "user", new { userid = item.User.PublicId })'>#item.User.Username</a>
}
else
{
Anonymous
}
</p>
</div>
</div>
<div class="col-md-10">
<div class="booking-item-review-content">
<p>
#item.Content
</p>
<p class="text-small mt20">#item.DateOnMarket</p>
<p class="booking-item-review-rate">
#using (Ajax.BeginForm("reportcomment", new { comment = item.PublicId }, new AjaxOptions { UpdateTargetId = "reportscount", HttpMethod = "Post", InsertionMode = InsertionMode.Replace }, null))
{
<a id="submit_link" href="#">Spam?</a>
<a class="fa fa-thumbs-o-down box-icon-inline round" href="#"></a>
}
<b id="reportscount" class="text-color">#item.CommentReports.Count</b>
</p>
</div>
</div>
</div>
</li>
}
}
</ul>
</div>
<script>
$(function () {
$('a#submit_link').click(function () {
$(this).closest("form").submit();
});
});
</script>
View
Both scripts for Ajax are always included in the Layout (I'm already using Ajax on other pages too). On the View page, when I add a new comment, it is added in the database and shows the updated list of comments via ajax. Everything works fine.
Partial View
But if I want to report the comment as spam, I have to click on the link inside the Partial View (#submit_link), and after reporting, inside the #reportscount part, I want to show the updated number of reports of that comment. The actionresults returns that number like Content(numberofreports.toString()). It works but I get the number in a blank page?
Thank you very much.
It's better if you don't. The main issue is that, for security reasons, <script> tags are ignored, when HTML is inserted into the DOM. Since the Ajax.* family of helpers work by inserting <script> tags in place, when you return the partial via AJAX, those will not be present. It's better if you only include the HTML contents of the form in the partial, and not the form itself.

How can I center the nav menu items using bootstrap 3?

My Navbar:
Problem
How can I get the admin menu item to be in the middle rather than dropping to the left? I'm using a template I purchased from wrapbootstrap and cannot figure out why this is happening. I've tweaked a lot of CSS using the dev tools in firefox and no matter what I do, ADMIN hangs to the left.
CSS:
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!-- Toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="active">#Html.ActionLink("Home", "Index", "Home", new { area = "" }, new { })</li>
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">Games</a>
<ul role="menu" class="dropdown-menu">
<li>#Html.ActionLink("Results", "Index", "Results", new { area = "" }, new { })</li>
<li>#Html.ActionLink("League Table", "Index", "LeagueTable", new { area = "" }, new { })</li>
</ul>
</li>
<li>#Html.ActionLink("Schedule", "Index", "Schedule", new { area = "" }, new { })</li>
<li>#Html.ActionLink("Players", "Index", "Players", new { area = "" }, new { })</li>
<li>#Html.ActionLink("News", "Index", "News", new { area = "" }, new { })</li>
<li>#Html.ActionLink("Gallery", "Index", "Gallery", new { area = "" }, new { })</li>
<li>#Html.ActionLink("Contact", "Contact", "Home", new { area = "" }, new { })</li>
#if (Request.IsAuthenticated)
{
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">Admin</a>
<ul role="menu" class="dropdown-menu">
<li>#Html.ActionLink("Admin Home", "Index", "Home", new { area = "Admin" }, new { })</li>
<li>#Html.ActionLink("Games", "Index", "Games", new { area = "Admin" }, new { })</li>
<li>#Html.ActionLink("Game Types", "Index", "GameTypes", new { area = "Admin" }, new { })</li>
<li>#Html.ActionLink("News", "Index", "News", new { area = "Admin" }, new { })</li>
<li>#Html.ActionLink("Players", "Index", "Players", new { area = "Admin" }, new { })</li>
<li>#Html.ActionLink("Seasons", "Index", "Seasons", new { area = "Admin" }, new { })</li>
</ul>
</li>
}
</ul>
</div>
</div>
</nav>
I had a similar problem before. I reduced the font-size.
.nav.navbar-nav.navbar-right li a {
/*reduce font-size here*/
}
I reduced the padding between the navbar elements.
.navbar-nav > li{
padding-left:30px;/*reduce*/
padding-right:30px;
}
You can also change the margins. It works too:
.navbar-nav > li{
margin-left:30px;
margin-right:30px;
}
Another way to go about it is using the media queries: check which screen-size has the admin dropping down and maybe turn one or two elements into a dropdown at that screen-size: for example have gallery and contacts into a dropdown called More. So when the user clicks it, he will have the option to choose between the two.

How can i get data on change event of dropdownlist in MVC4?

Hi i am using partial view in mvc. i put dropdown in partial view and render that partial view in index page.
I have to get data on change event of dropdown list.I prefer angularjs instead of java script.but i am not able to call controller Action from view using angularjs.
In Controller:
public class HomeController : AthController
{
public ActionResult Index()
{
var dashboardList = GetAllDashboards() as List<DashboardDefinition>;
return View(dashboardList);
}
public ActionResult GetDashboard()
{
return View();
}
...
...
}
In View:
#model IEnumerable<Portal.Domain.ReportingModule.ReportDefinition.DashboardDefinition>
#{
ViewBag.Title = "Reporting";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>Reporting View</h2>
#Html.ActionLink("Add new Chart", "Create", "Chart", new { area = "Reporting" }, null)
#section SubMenu{
#Html.Partial("_ReportingMenu")
}
In PartialView:
#model IEnumerable<Portal.Domain.ReportingModule.ReportDefinition.DashboardDefinition>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<div data-ng-app="">
<div class="nav navbar navbar-default navbar-no-margin submenu" data-ng-controller="dashboardController">
<select class="btn btn-default" id="drpDashboard" data-ng-model="dashboard" data-ng-change="dashboardChange(dashboard)">
#foreach (var dashboard in #Model)
{
<option value="#dashboard.Id">#dashboard.DashboardName</option>
}
</select>
<a id="SubMenuIntegratorNew" class="btn btn-default submenu-item" href="#">
<i class="fa fa-file-o fa-lg"></i>
<span class="submenu-item-text">New</span>
</a>
<a id="SubMenuIntegratorSave" class="btn btn-default submenu-item" href="#">
<i class="fa fa-floppy-o fa-lg"></i>
<span class="submenu-item-text">Save</span>
</a>
<a id="SubMenuIntegratorSaveAs" class="btn btn-default submenu-item" href="#">
<i class="fa fa-files-o fa-lg"></i>
<span class="submenu-item-text">Save As</span>
</a>
<a id="SubMenuIntegratorAddChart" class="btn btn-default submenu-item" href="#">
<i class="fa fa-picture-o fa-lg"></i>
<span class="submenu-item-text">Add Chart</span>
</a>
</div>
</div>
<script type="text/javascript">
function dashboardController($scope) {
$scope.dashboardChange = function (item) {
$http({
url: "/Home/GetDashboard",
method: "GET"
});
}
}
</script>
In this code i checked using debauging that dashboardChage metho is calling but GetDashboard action can't be call.
You can put the Drop down inside a form and include the change attribute to this dropdown like this
#{ Html.BeginForm("Action", "Controller", FormMethod.Post, new { enctype = "multipart/form-data" }); }
#Html.DropDownList("Id", ViewData["Id"] as List<SelectListItem>, new { onchange = "this.form.submit();" })
#{ Html.EndForm(); }

ASP.NET MVC refresh table in tab-pill

I have a problem with my solution.
I have 2 related classes and display them like the example on the ASP.net -Webseite, but only with one related class.
This class is displayed in a tab-pill.
Now I added Modals and a Javascript to edit, delete and create new Entitys, like This., but i don't know how to implement the refresh function, that only my table from the related class refresh and not the page. I will not lose the tab-pill, with is activated.
Thanks for help
Here my View-Page:
#model Armageddon.Models.itUser
#{
ViewBag.Title = "Details ";
}
#using Armageddon.Helpers;
<h2>Details:</h2>
<div>
<hr />
<div class="col-md-5" style="text-align:right">#Html.LabelFor(model => model.displayName)</div>
<div class="col-md-5">#Html.DisplayFor(model => model.displayName)</div>
</div>
<!-- modal placeholder-->
<div id='myModal' class='modal fade in'>
<div class="modal-dialog">
<div class="modal-content">
<div id='myModalContent'></div>
</div>
</div>
</div>
<ul class="nav nav-tabs" role="tablist" id="myTab">
<li role="presentation" class="active">Logins</li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane" id="UIT2SysGroup">
#if (Model.UIT2SystemGroup != null)
{
<table class="table">
<tr>
<th>Gruppen</th>
<th>#Html.NoEncodeActionLink("<span class='glyphicon glyphicon-plus'></span>", "Add", "Create", "UIT2SystemGroup", routeValues: new { PersonId = Model.itUserID }, htmlAttributes: new { data_modal = "", #class = "btn btn-primary pull-right" })</th>
</tr>
#if (Model.UIT2SystemGroup.Count() != 0)
{
foreach (var item in Model.UIT2SystemGroup)
{
<tr>
<td>
#item.SystemGroup.Name
</td>
<td>
<div class="pull-right">
#Html.NoEncodeActionLink("<span class='glyphicon glyphicon-trash'></span>", "Delete", "Delete", "UIT2SystemGroup", routeValues: new { id = item.UIT2SystemGroupID}, htmlAttributes: new { data_modal = "", #class = "btn btn-danger" })
</div>
</td>
</tr>
}
}
else
{
<tr><td colspan="3"><div class="alert alert-info" role="alert"><div class="glyphicon glyphicon-info-sign"></div> Zurzeit sind keine administrativen Aufgaben vergeben.</div></td></tr>
}
</table>
}
</div>
</div>
You need to look into Ajax to call the controller that is returning the view.
There is a good sample here
http://www.c-sharpcorner.com/UploadFile/d551d3/how-to-load-partial-views-in-Asp-Net-mvc-using-jquery-ajax/
You could put your table inside a partial view and return this as part of your page.

Image as link to action method

I have a question about using an image as link to a specific action in a controller.
I load my images from the database and show them in a view:
#foreach(var imgID in Model.DeliverablesIDsList)
{
<div class='small-3 columns'>
<img src="#Url.Action("ShowImage", "Deliverable", new { DeliverableID = imgID })" />
</div>
}
</div>
Now I would like to have a link around that image so that I can link to a view and send the linked DeliverableID with it.
How can I do this?
You should try this.
#foreach(var imgID in Model.DeliverablesIDsList)
{
<div class='small-3 columns'>
<a href="#Url.Action("ShowImage", "Deliverable", new { DeliverableID = imgID })">
<img src="image-url" />
</a>
</div>
}

Resources