I am working on my MVCOnlineShop, i made on the homepage on the navbar a dropdownlist with categories as dropdown button and products as dropdowncontent, i want to keep this on the ProductList View:
this is my CategoryLayout.cshtml(PartialView):
#model IEnumerable<MVCOnlineShop.Models.Category>
#{
ViewBag.Title = "CategoryLayout";
}
#foreach (var Category in Model)
{
<li>
<div class="dropdown">
<button class="dropbtn">
#Html.ActionLink(Category.CategoryName,
"ProductList", new { Category = Category.CategoryID }, new { #style = "color:#1ABC9C;text-decoration:none;" })
</button>
<div class="dropdown-content">
#foreach (var Product in Category.Products)
{
#Html.ActionLink(Product.ProductName,
"Details", new { id = Product.CategoryID }, new { style = "text-decoration:none;" })
}
</div>
</div>
</li>
}
this is my ProductList.cshtml PartialView:
#model MVCOnlineShop.Models.Category
#{
ViewBag.Title = "ProductList";
}
<script src="~/Scripts/Productjs/bootstrap.min.js"></script>
<script src="~/Scripts/Productjs/jquery.js"></script>
<link href="~/Content/Productcss/bootstrap.min.css" rel="stylesheet">
<link href="~/Content/Productcss/2-col-portfolio.css" rel="stylesheet">
<div class="container">
<!-- Page Header -->
<div class="row">
#foreach (var Product in Model.Products)
{
<div class="col-md-6 portfolio-item">
<a href="#">
<img class="img-responsive" src="#Product.ImageID" alt="">
</a>
<h3>
#Html.ActionLink(Product.ProductName, "Details", new { id = Product.CategoryID })
</h3>
</div>
}
</div>
</div>
and this is how i rendered the CategoryLayout.cshtml in the _Layout.cshtml to show the dropdownlist on the homepage:
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
#Html.Partial("CategoryLayout")
</ul>
</div>
</div>
</div>
Question: how to show this navbar on the ProductList too?
Thanks in advance!
Create a child action:
[ChildActionOnly]
public ActionResult Navbar()
{
var categories = // get categories;
return PartialView("_Navbar", categories);
}
Then, create a partial view to render the navbar (_Navbar.cshtml):
#model IEnumerable<MVCOnlineShop.Models.Category>
#foreach (var Category in Model)
{
<li>
<div class="dropdown">
<button class="dropbtn">
#Html.ActionLink(Category.CategoryName, "ProductList", new { Category = Category.CategoryID }, new { #style = "color:#1ABC9C;text-decoration:none;" })
</button>
<div class="dropdown-content">
#foreach (var Product in Category.Products)
{
#Html.ActionLink(Product.ProductName, "Details", new { id = Product.CategoryID }, new { style = "text-decoration:none;" })
}
</div>
</div>
</li>
}
Then, call the following where you want the navbar to appear:
#Html.Action("Navbar", "Foo")
Where "Foo" is the name of the controller where you added the child action. Then, the view can use whatever model it needs to you and you can still render your navbar with its own model.
If I understood I think what you are looking for is a master page
MSDN says :
ASP.NET master pages allow you to create a consistent layout for the pages in your application. A single master page defines the look and feel and standard behavior that you want for all of the pages (or a group of pages) in your application.
Notice the part saying : standard behavior that you want for all of the pages ...in your application
So what you'll do is rethink your approach. Every element that must appear on every page is to be defined in the master page view.
Please read this MSDN article about creating a master page and child pages
Simply, this is how your master page should be :
<%# Master Language="C#" AutoEventWireup="true" CodeFile="you_file_name.cs" Inherits="Site" %>
<html>
<head>
<asp:ContentPlaceHolder ID="head" runat="server"></asp:ContentPlaceHolder>
<!-- some other elements like scripts, css, etc...-->
</head>
<body>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">#Html.Partial("CategoryLayout")</ul>
</div>
<!-- Here add the code for rendering any other view at will ; for instance ProductList -->
</body>
</html>
Becarefull though : ALL other views that you want to render inside the master page will have to be created accordingly (create view content with master page... and select the appropriate master page on view creation dialog)
Can you please explain me how should i use Ajax properly.
I have an easy example in Asp.Net MVC:
This is my layout view
<html>
<head>
//scripts
</head>
<body>
<div id="header">
<div class="logo">
<img id="LogoImg" src="http://www.ruralcomshow.com/wpontent/uploads/2014/06/Midwest-Data-Center-Logo-175x75.png" />
</div>
</div>
<div class="wrapper">
<div class="left-side">
//some navigation
</div>
<div id="right-side">
#RenderBody()
</div>
</div>
<div id="footer">
<div class="clearfix">
//some footer
</div>
</div>
</body>
</html>
This is my controller:
public class HomeController : Controller
{
public PartialViewResult Ajax()
{
return PartialView();
}
public ActionResult Index()
{
return View();
}
}
This is Ajax partial view:
<h2>This is how it's done</h2>
#Html.ActionLink("back :C","Index","Home")
This is Index view:
#{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
#Ajax.ActionLink("Go, go Ajax!", "Ajax", "Home", new AjaxOptions { UpdateTargetId = "right-side", InsertionMode = InsertionMode.Replace})
So, as I understood when i click Ajax ActionLink my whole page should not rerender, and the only thing that should change is div with id "right-side"? So the problem is that the whole page always gets rerendered.
Am I doing something wrong? Or is this a problem of my understanding?
Include jquery and unobtrusive-ajax at the bottom of the page as shown :-
</footer>
#Scripts.Render("~/bundles/jquery")
<script src="#Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>
#RenderSection("scripts", required: false)
</body>
</html>
iam working on fileUpload in mvc.
my code is as follows:
Views/Client/AddClient.aspx
<%# Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<Auditz.UI.Web.Automation.ClientService.ClientDto>" %>
<%# Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<h1>
Add A Client</h1>
<% using (Html.BeginForm("AddClient","Client",FormMethod.Post,new {enctype = "multipart/form-data" }))
{ %>
<%: Html.ValidationSummary(true) %>
<div class="tabcontrol">
<asp:Panel ID="pnlClientDtls" runat="server">
<asp:TabContainer ID="TabContainer" runat="server" Width="100%" ActiveTabIndex="1">
<asp:TabPanel ID="tb1" runat="server">
<HeaderTemplate>
Client Details
</HeaderTemplate>
<ContentTemplate>
<div class="formelements">
.....................
..............
</div>
Controllers/FileUploadController.cs
namespace FileUploadTest.Controllers
{
public class FileUploadController : Controller
{
//
// GET: /FileUpload/
public ActionResult FileUpload()
{
return View();
}
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult FileUpload(HttpPostedFileBase uploadFile)
{
if (uploadFile.ContentLength > 0)
{
string filePath = Path.Combine(HttpContext.Server.MapPath("~/Uploads"),
Path.GetFileName(uploadFile.FileName));
uploadFile.SaveAs(filePath);
}
return View();
}
}
}
Evrything works as desired with this code.
But if i place and in of Shared/Site.Master,iam getting null value in "HttpPostedFileBase uploadFile".
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
</form>
<div>
<asp:ContentPlaceHolder ID="MainContent" runat="server">
</asp:ContentPlaceHolder>
</div>
i cannot remove from my code as i want to add few ajax controls.
Make sure that you don't nest HTML forms. So in your Master page when you open the <form> tag ensure that you close it before rendering the view:
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
</form>
...
<asp:ContentPlaceHolder ID="MainContent" runat="server" />
</body>
What I am trying to do is I am Listing all the record and then provide option to delete the record. When User clicks on Delete Link on Index page he is redirected to Delete Confirmation Page( Delete View created by MVC framework), now what I was expecting was when I click on Submit button on the Delete View it will come to my Delete Action of Controller with the object that needs to be deleted. But the problem is I am getting a object but all the properties are set to null.
Below is the code:
//GET
public ActionResult DeleteUser (long id )
{
return View(_repository.GetUserById(id));
}
//POST
[HttpPost]
public ActionResult DeleteUser (UserDTO user)
{
_repository.DeleteUser(user.UserId);
/
return RedirectToAction("Index");
}
I was expecting that one submit is clicked then Second (HttpPost) method will be called and user will be filled with the values, but that is not happening..
can anyone tell me what wrong am I doing ???
This is my Delete View Code
<%# Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<RepositoryPatternSample.DTOs.UserDTO>" %>
<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
DeleteUser
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<h2>DeleteUser</h2>
<h3>Are you sure you want to delete this?</h3>
<fieldset>
<legend>UserDTO</legend>
<div class="display-label">UserId</div>
<div class="display-field"><%: Model.UserId %></div>
<div class="display-label">Username</div>
<div class="display-field"><%: Model.Username %></div>
<div class="display-label">FirstName</div>
<div class="display-field"><%: Model.FirstName %></div>
<div class="display-label">LastName</div>
<div class="display-field"><%: Model.LastName %></div>
</fieldset>
<% using (Html.BeginForm()) { %>
<p>
<input type="submit" value="Delete User" /> |
<%: Html.ActionLink("Back to List", "Index") %>
</p>
<% } %>
</asp:Content>
Your properties are out of the form post. That's why you see the model null.
Personally instead of passing all the model properties I would pass only the id.
Something like that
<% using (Html.BeginForm()) { %>
<p>
<%: Html.HiddenFor(model=> model.UserId) %>
<input type="submit" value="Delete User" /> |
<%: Html.ActionLink("Back to List", "Index") %>
</p>
<% } %>
and your controller would be
[HttpPost]
public ActionResult DeleteUser (int userId)
{
_repository.DeleteUser(userId);
return RedirectToAction("Index");
}
I'm getting some very strange behaviour with tinyMCE in an ASP.NET MVC 2 beta app (same happend with MVC 1). I have a view called "edit.aspx" that is called when the user tries to create or edit an entity. The view uses jquery to load tinyMCE where ever it finds textarea's.
Here are my 2 action methods that both call the same "edit.aspx" view
public ActionResult Create()
{
return View("Edit", new FutureEvent());
}
[HttpGet]
public ActionResult Edit(int id)
{
FutureEvent futureEvent = (from fe in adminGalleryRepository.FutureEvents
where fe.ID == id
select fe).FirstOrDefault();
return View("Edit", futureEvent);
}
The "Edit.aspx" view:
<%# Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Admin.Master" Inherits="System.Web.Mvc.ViewPage<DomainModel.Entities.FutureEvent>" %>
<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
Future event
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<script type="text/javascript">
$(function() {
$("#tabs").tabs();
$('textarea').tinymce({
script_url: '../../Scripts/tiny_mce/tiny_mce.js',
theme: "advanced",
plugins: "safari,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template",
// Theme options
theme_advanced_buttons1: "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect",
theme_advanced_buttons2: "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
theme_advanced_buttons3: "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
theme_advanced_buttons4: "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak",
theme_advanced_toolbar_location: "top",
theme_advanced_toolbar_align: "left",
theme_advanced_statusbar_location: "bottom",
theme_advanced_resizing: true
});
});
</script>
<h2>Future event</h2>
<%= Html.ValidationSummary("Edit was unsuccessful. Please correct the errors and try again.") %>
<% using (Html.BeginForm("Edit", "FutureEvents")) {%>
<div id="tabs">
<ul>
<li>Future event</li>
</ul>
<div id="tabs-1">
<%= Html.Hidden("ID") %>
<label class="formLabel" for="Title">Title:
<%= Html.ValidationMessage("Title", "*") %>
<%= Html.TextBox("Title", Model.Title, new { size = "40px" })%>
</label>
<label class="formLabel" for="Info">Info:
<br />
<%= Html.TextArea("Info", Model.Info, 15, 130, null) %>
</label>
<br />
<label class="formLabel" for="WebSite">Web site address:
<%= Html.TextBox("WebSite", Model.WebSite, new { size = "40px" })%>
</label>
</div>
</div>
<div class="clear" ></div>
<div id="footer" style="text-align: left">
<input type="submit" value="Save" />
<%=Html.ActionLink("Back to List", "List") %>
</div>
<% } %>
</asp:Content>
The strange thing is that the create method renders the "edit" view and the tinyMCE edit appears correctly. But when the edit action method renders the "edit" view, the view appears as you would expect - but without the tinyMCE editor.
No errors appear in FireBug, I get exactly the same behaviour in IE.
I also tried removing the $("#tabs").tabs() line but it made no difference.
It could be related to this line:
script_url: '../../Scripts/tiny_mce/tiny_mce.js',
Since the problem is in the Edit view, maybe the extra parameter adds one level to the folder structure.
Why don't you try:
script_url: '/Scripts/tiny_mce/tiny_mce.js',