I'm new to ASP.Net, I tried to create a simple login page. Layout page has a jumbotron. But my login controls are overlapped with the jumbotron.
Appreciate your help
_Layout.cshtml - file
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title - Title</title>
<link href="~/Content/Site.css" rel="stylesheet" />
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<link href="~/Content/bootstrap.css" rel="stylesheet" />
<link href="~/css/Main.scss" rel="stylesheet" type="text/css"/>
<script src="~/Scripts/modernizr-2.6.2.js"></script>
</head>
<body>
<div class="navbar navbar-fixed-top">
<div class="container-fluid">
<div class="jumbotron">
<h2>Welcome to Application</h2>
</div>
</div>
</div>
<div id ="main" class="col-lg-8">
#RenderBody()
</div>
</body>
</html>
Login.cshtml - Login View
#{
Layout = "~/Views/Shared/_Layout.cshtml";
ViewBag.Title = "Login";
}
#using (Html.BeginForm("Login", "Home", FormMethod.Post))
{
#Html.AntiForgeryToken()
#Html.ValidationSummary(true)
if (#ViewBag.LoginErrorMsg != null)
{
<div class="form-group has-error">
#ViewBag.LoginErrorMsg
</div>
}
<div class="container body-content">
<div class="container-fluid">
<div class="col-md-4"></div>
<div class="col-md-4">
<div class="form-group">
#Html.LabelFor(a => a.email, new { #class = "control-label" })
#Html.TextBoxFor(a => a.email, new { #class = "form-control" })
#Html.ValidationMessageFor(a => a.email)
</div>
<div class="form-group">
#Html.LabelFor(a => a.Password, new { #class = "control-label" })
#Html.TextBoxFor(a => a.Password, new { #class = "form-control" })
#Html.ValidationMessageFor(a => a.Password)
</div>
<button type="submit" class="btn btn-default">Login</button>
</div>
<div class="col-md-4"></div>
</div>
</div>
}
This is the result I get screenshot
Read the Bootstrap documentation on Fixed to Top.
Body padding required
The fixed navbar will overlay your other
content, unless you add padding to the top of the . Try out your
own values or use our snippet below. Tip: By default, the navbar is
50px high.
body { padding-top: 70px; }
Make sure to include this after the core Bootstrap CSS.
Related
I am trying to apply a style by using bootstrap css but every time i am being un-successful .
What i am trying to do is :
<link href="~/Theme/css/chosen.css" rel="stylesheet" />
<link href="~/Theme/Bootstrap37/css/chosen-bootstrap.css" rel="stylesheet" />
<section id="contact-page" class="EditMode" style="display:none;">
<div class="container">
<div class="row ">
<div class="status alert alert-success" style="display: none"></div>
<div class="col-md-12 col-xs-12">
<h5> Change your information</h5>
<form id="" class="" name="c_signup" method="post" action='#Url.Action("CSignUp","Profile", new { area="CPortal"})'
enctype="multipart/form-data" onSubmit="return validation(this)">
<div class="col-xs-6">
<div class="form-group">
<label>Speciality</label>
<div >
#Html.HiddenFor(m => m.SelectedSpecialityTest)
#Html.ListBoxFor(m => m.SelectedSpecialityIds,
new MultiSelectList(Model.Specialities, "OID", "SpecialityDesc"),
new { #class = "chosen-select form-control", #required = "required" })
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</section>
jQuery(document).ready(function () {
$(".chosen-select").chosen({ no_results_text: "Oops, nothing found!" });
});
Now when i see the view then chosen-select dropdown is not displaying instead just a tiny line.
See the complete working same at here:
https://codepen.io/maifs/pen/VWMwWw
I try to get a jquery mobile multipage form with local variables running, but I have two problems.
a) the second value is not updated after save, but reloaded in the edit page
b) when I continuously change between view and edit (4 times), the edit-button calls the edit page (see URL), but the page is not shown
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Form test</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div id="view" data-role="page">
<div id="view-head" data-role="header">
<h1>View</h1>
Edit
</div>
<div id="content" data-role="content">
<h2 id="unit-title">x</h2>
<p id="unit-summary">y</p>
</div>
</div>
<div id="edit" data-role="page">
<div id="edit-head" data-role="header">
View
<h1>Edit</h1>
</div>
<form>
<label for="edit-title" class="ui-hidden-accessible">Unit title</label>
<input type="text" name="edit-title" id="edit-title" data-clear-btn="true" placeholder="Title ...">
<label for="edit-summary" class="ui-hidden-accessible">Unit summary</label>
<textarea name="edit-summary" id="edit-summary" placeholder="Summary ..."></textarea>
<input type="button" name="edit-submit" id="edit-submit" value="Save">
</form>
</div>
<script type="text/javascript">
var unit = { "id":"1" , "title" : "Hello", "summary" : "World" };
$(document).on("pagebeforeshow","#view",function() {
document.getElementById('unit-title').innerHTML = unit.title;
document.getElementById('unit-summary').innerHTML = unit.summary;
});
$(document).on("pagebeforeshow","#edit",function() {
$(document).on('click', '#edit-submit', function() {
unit.title = document.getElementById('edit-title').value;
unit.summary = document.getElementById('edit-summary').innerHTML;
$.mobile.navigate("#view", {});
});
document.getElementById('edit-title').value = unit.title;
document.getElementById('edit-summary').innerHTML = unit.summary;
});
</script>
</body>
</html>
Here is the complete example
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Form test</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div id="view" data-role="page">
<div id="view-head" data-role="header">
<h1>View</h1>
Edit
</div>
<div id="view-content" data-role="content">
<h2 id="unit-title">x</h2>
<p id="unit-summary">y</p>
</div>
</div>
<div id="edit" data-role="page">
<div id="edit-head" data-role="header">
View
<h1>Edit</h1>
</div>
<form>
<label for="edit-title" class="ui-hidden-accessible">Unit title</label>
<input type="text" name="edit-title" id="edit-title" data-clear-btn="true" placeholder="Title ...">
<label for="edit-summary" class="ui-hidden-accessible">Unit summary</label>
<textarea name="edit-summary" id="edit-summary" placeholder="Summary ..."></textarea>
<input type="button" name="edit-submit" id="edit-submit" value="Save">
</form>
</div>
<script type="text/javascript">
var unit = { "title" : "Hello", "summary" : "World" };
$(document).on("pagebeforeshow","#view",function() {
document.getElementById('unit-title').innerHTML = unit.title;
document.getElementById('unit-summary').innerHTML = unit.summary;
});
$(document).on("pagebeforeshow","#edit",function() {
document.getElementById('edit-title').value = unit.title;
document.getElementById('edit-summary').innerHTML = unit.summary;
});
$(document).on('click', '#edit-submit', function() {
unit.title = document.getElementById('edit-title').value;
unit.summary = document.getElementById('edit-summary').value;
$.mobile.navigate("#view", {});
});
</script>
</body>
</html>
I am using JQuery Mobile 1.4 and MVC 4 to test dialog. But I don’t know what should be returned in dialog post action.
There are two questions:
1. What should be returned for dialog action
2. The input data in master page will be lost after dialog post
Master page View Code:
#model MvcApplication4.Models.ViewModel
#{
Layout = null;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>TestDialog</title>
<meta name="viewport" content="width=device-width" />
<link href="/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<link href="/Content/site.css" rel="stylesheet"/>
<link href="/Content/jquery.mobile-1.4.0-beta.1.css" rel="stylesheet" />
<script src="/Scripts/modernizr-2.6.2.js"></script>
<script src="/Scripts/jquery-2.0.3.js"></script>
<script src="/Scripts/jquery-ui-1.10.3.js"></script>
<script src="/Scripts/jquery.mobile-1.4.0-beta.1.js"></script>
</head>
<body>
<div id="layoutPage" data-role="page" data-theme="a">
<div id="layoutHeader" data-role="header">
<h2>TestDialog</h2>
</div>
<div id="layoutContent" data-role="content">
#using (Html.BeginForm())
{
<div>
<div class="editor-label">
#Html.LabelFor(model => model.IDDocument)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.IDDocument)
#Html.ValidationMessageFor(model => model.IDDocument)
</div>
</div>
<div data-role="controlgroup" data-type="horizontal" data-mini="true">
<a id="addDetail" href="#Url.Action("ShowDialog", "SampleTest")" data-rel="dialog" data-role="button" >Test dialog</a>
</div>
}
</div>
</div>
<script>
$(document).on("mobileinit", function () {
$.mobile.ajaxEnabled = false;
});
</script>
</body>
</html>
Dialog View Code:
#model MvcApplication4.Models.ViewModel
#{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>DialogView</title>
</head>
<body>
<div id="detailPage1" data-role="dialog" >
#using (Html.BeginForm("ShowDialogActioinPost", "SampleTest", FormMethod.Post))
{
<div data-role="header">
<button type="submit" data-icon="check" class="ui-submit" data-inline="true" data-mini="true">Save</button>
<h2 >Dialog Information</h2>
<a data-rel="back" data-icon="back">Go back</a>
</div> //end header
<div data-role="content">
<div class="editor-label">
#Html.LabelFor(model => model.SeqNo)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.SeqNo)
#Html.ValidationMessageFor(model => model.SeqNo)
</div>
</div>
}
</div>
</body>
</html>
Controller Code:
[HttpGet]
public ActionResult ShowDialog()
{
return View("DialogView");
}
[HttpPost]
public ActionResult ShowDialogActioinPost(ViewModel vm)
{
return View("Index"); // should return to master page, but it doesn't work
}
Thanks
Wilson
Try RedirectToAction("Index"); instead of View("Index");
You have to return the model to your master page.
[HttpPost]
public ActionResult ShowDialogActioinPost(ViewModel vm)
{
return View("Index", vm);
}
The answer is here.
Thanks
Wilson
I have MVC4 project that i want to use Telerik Q2 2013 panel bar in my _layout razor file for showing my menu. it uses a site map. in Telerik website it bind panel bar with controller .but i do not know how can i get controller for my layout page or is it true (it means is it true to use controller for _layout and how can i do this ?)i try section but i cant do any thing.
This is my _layout code:
enter link description here
<!DOCTYPE html>
<html lang="en">
#using StackExchange.Profiling;
#using Telerik.Web.Mvc.UI;
<head>
<meta charset="utf-8" />
<title>#ViewBag.Title - My ASP.NET MVC Application</title>
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
#(Html.Telerik().StyleSheetRegistrar()
.DefaultGroup(group => group
.Add("telerik.common.min.css")
.Add("telerik.webblue.min.css")
.Add("telerik.rtl.min.css")
.Combined(true)
.Compress(true))
)
</head>
<body>
<div class="container">
<div style="width: 950px; margin: 0 auto;">
<div id="Header" class="span-24 last" style="height: 100px"></div>
<div id="HeaderTitle" class="span-20 last" style="height: 50px">
<section id="login">
#Html.Partial("_LoginPartial")
</section>
</div>
<div id="Content" class="span-24 last" style="height: 400px">
<div id="Menu" class="span-4 last" style="width: 150px; float: right; height: 450px">
<div class="t-rtl">
#{ Html.Telerik().PanelBar()
.Name("PanelBar")
.HtmlAttributes(new { style = "width: 300px;" })
.BindTo("SparepartsManagement")
.Render();
}
</div>
</div>
<div style="float: right; width: 800px; height: 400px;">
<div id="HeadContent" style="height: 50px;">Head Content</div>
<div id="MainContetnt" style="height: 400px;">
#RenderSection("featured", required: false)
#RenderBody()
</div>
</div>
</div>
<div id="footer" class="span-24 last" style="height: 50px; text-align: center">
<h6 class="alt">Copyright ©2013 artec</h6>
</div>
</div>
</div>
#Scripts.Render("~/bundles/jquery")
#RenderSection("scripts", required: false)
#MiniProfiler.RenderIncludes()
#(Html.Telerik().ScriptRegistrar()
.DefaultGroup(group => group
.Add("telerik.common.min.js")
.Add("telerik.panelbar.min.js")
.Compress(true)))
</body>
</html>
I have a multi-level Layout master pages in an ASP.NET MVC 4.
I have the following:
<title>#ViewBag.Title</title>
The order of Layout pages is as follows:
_Layout.cshtml
_SubLayout.cshtml (based on _Layout.cshtml)
Index.cshtml (based on _SubLayout.cshtml)
I am setting the #ViewBag.Title inside Index Action. However, I get the following exception:
Value cannot be null or empty. Parameter name: contentPath
Here is the code I have. I am simply making the code of ASP.NET Design Patterns books work for VS 2012 / MVC 4
_Layout.cshtml
<!DOCTYPE html>
<html lang="en">
<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" />
<link href="#Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="main">
<div id="header">
<span><a href="#Url.Content("")">
<img alt="Agatha's Clothing Store"
src="#Url.Content("/Content/Images/Structure/lg_logo.png")"
border="0" /></a></span>
</div>
<div id="headerSummary">
#RenderSection("headerBasketSummary", required: false)
</div>
<div class="topBarContainer">
<div id="background">
<div id="navigation">
#RenderSection("MenuContent", required: false)
</div>
<div id="content">
#RenderBody()
</div>
<div style="clear: both;" />
</div>
</div>
#Html.Partial("_SiteFooter")
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/json2/20121008/json2.js"></script>
<script type="text/javascript" src="#Url.Content("~/Scripts/jquery-jtemplates.js")"></script>
<script type="text/javascript" src="#Url.Content("~/Scripts/agatha-common-scripts.js")"></script>
</body>
</html>
_ProductCatalogProduct.cshtml
#model BaseProductCatalogPageView
#using Agathas.Storefront.Controllers.ViewModels.ProductCatalog
#using Agathas.Storefront.UI.Web.MVC.Helpers
#{
Layout = "~/Views/Shared/_Layout.cshtml";
}
#if (IsSectionDefined("MenuContent"))
{
#RenderSection("MenuContent", required: false)
}
else
{
#Html.Partial("_Categories", ((BaseProductCatalogPageView)Model).Categories)
}
#RenderBody();
Index.cshtml
#model HomePageView
#using Agathas.Storefront.Controllers.ViewModels.ProductCatalog
#using Agathas.Storefront.Services.ViewModels
#using Agathas.Storefront.UI.Web.MVC.Helpers
#{
Layout = "~/Views/Shared/_ProductCatalogLayout.cshtml";
ViewBag.Title = "Home Page";
}
<img width="559" height="297"
src="#Url.Content("~/Content/Images/Products/product-lifestyle.jpg")"
style="border-width: 0px; padding: 0px; margin: 0px" />
<div style="clear: both;"></div>
<h2>Top Products</h2>
<div id="items" style="border-width: 1px; padding: 0px; margin: 0px">
<ul class="items-list">
#foreach (ProductSummaryView product in Model.Products)
{
<li class="item-detail">
<a class="item-productimage-link" href="#Url.Action("Detail", "Product", new { id = product.Id }, null)">
<img class="item-productimage" src="#Url.Content("~/Content/Images/Products/" + product.Id.ToString() +".jpg"))" /></a>
<div class="item-productname">#Html.ActionLink(product.BrandName + " " + product.Name, "Detail", "Product", new { id = product.Id }, null)</div>
<div class="item-price">#product.Price</div>
</li>
}
</ul>
</div>
Many thanks
This piece of code is throwing the exception: <a href="#Url.Content("")">. This happens because contentPath parameter of Url.Content method cannot be null or empty.
This can happen if you are assigning a value in the Child Razor view file that is also set in the parent one, but is displayed in a partial called by the Layout.cshtml
For example
_Layout.cshtml
|
(parent of)
|
Parent.cshtml
|
(parent of)
|
Page1.cshtml
In Page1.cshtml I do
ViewBag.Title= "Value1";
In Parent.cshtml I do the same but using the Umbraco call:
ViewBag.Title = Umbraco.Field("value").ToString();
The fix is to remove the assignment in Parent.cshtml. This appears to be a bug and I'm afraid that this is the only fix I've found. Hope it helps you out...
You should check if path not null or empty before use it as source of image
#foreach (var post in Model)
{
<div class="col-md-6">
<div class="product-list post-list">
#if (!string.IsNullOrWhiteSpace(post.Photo))
{
<a href="#" class="product-list-img">
<img src="#Url.Content(post.Photo)" alt="">
</a>
}
</div>
</div>