I'm working with ASP.NET MVC 5 web apps and can't get DevExpress 17.1's file upload control to work properly. Or to be more precise, I've done everything their instructions describe to integrate their software (I've tried both using their templates and integrating manually) but when I use a file upload control the browse button does nothing.
The control appears properly in my Razor view, but none of the features are active. Clicking the browse button does nothing, clicking add, upload, etc. all do nothing. I'm using the example straight out of their documentation:
#using System.Web.UI.WebControls
#using DevExpress.Web.Mvc.UI
#model dynamic
#{
ViewBag.Title = "title";
}
#using (Html.BeginForm()) {
#Html.DevExpress().UploadControl(
settings => {
settings.Name = "uploadControl";
settings.FileInputCount = 2;
settings.ShowAddRemoveButtons = true;
}).GetHtml()
}
I feel like I must be missing something obvious, but I've got all their scrips, all their style sheets, everything integrated as near as I can tell. Can anyone suggest what might be going wrong?
Ok, I found the answer after creating sample apps and doing file-by-file compares. I thought I'd post it here for other unfortunate souls. The trick is that the ordering of things in the shared layout file (~/Views/Shared/_Layout.cshtml) is extremely finicky. Consider the following:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title - My ASP.NET Application</title>
#Html.DevExpress().GetStyleSheets(
new StyleSheet { ExtensionSuite = ExtensionSuite.NavigationAndLayout },
new StyleSheet { ExtensionSuite = ExtensionSuite.Editors }
)
#Html.DevExpress().GetScripts(
new Script { ExtensionSuite = ExtensionSuite.NavigationAndLayout },
new Script { ExtensionSuite = ExtensionSuite.Editors }
)
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
</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>
#Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { #class = "navbar-brand" })
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>#Html.ActionLink("Home", "Index", "Home")</li>
<li>#Html.ActionLink("About", "About", "Home")</li>
<li>#Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>
</div>
</div>
</div>
<div class="container body-content">
#RenderBody()
<hr />
<footer>
<p>© #DateTime.Now.Year - My ASP.NET Application</p>
</footer>
</div>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
</body>
</html>
Whenever my inclusion of the scripts and style sheets for DevExpress was otherwise than precisely that ordering, I had failures. I don't understand what was going wrong, but I doubt I'll be the only person to run into this.
Hope it helps!
Related
Basically what the title says. I have a view named books in which the search bar works perfectly and gives results. This is not happening in the _Layout shared view. I've tried several scripts and stuff but to no avail. Any advice?
This is the _Layout
<!DOCTYPE html>
#model IEnumerable<GoodReads.Models.Libro>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title</title>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
</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>
#Html.ActionLink("Nombre de aplicación", "Index", "Home", new { area = "" }, new { #class = "navbar-brand" })
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>#Html.ActionLink("Inicio", "Index", "Home")</li>
<li>#Html.ActionLink("Registrar Turno", "AltaTurno", "Turno")</li>
<li>#Html.ActionLink("Buscar Libros", "Books", "Libro")</li>
<li>
#using (Html.BeginForm(FormMethod.Get))
{
<div>
#Html.TextBox("parametro")
<input type="submit" id="btnSearch" value="Some text"/>
</div>
}
</li>
</ul>
</div>
</div>
</div>
<div id="Books">
</div>
<div class="container body-content">
#RenderBody()
<hr />
<footer></footer>
</div>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
</body>
</html>
This is the Books view
#model IEnumerable<GoodReads.Models.Libro>
#{
/**/
ViewBag.Title = "Books";
}
<head>
<link href="#Url.Content("~/Content/Style.css")" rel="stylesheet" type="text/css" />
</head>
<body>
#foreach (var item in Model)
{
<div style="margin-left: 350px; margin-top: 50px;">
<h1 class="title-font">
#item.Title
<small class="year-font">(#item.Year)</small>
</h1>
</div>
<div style="margin-left: 350px; margin-top: 10px;">
<p style="font-size: 22px;">by #item.Author</p>
</div>
<div style="margin-left: 350px; margin-top: 10px;">
<p style="font-size: 22px;">#item.ISBN</p>
</div>
}
</body>
The Controller for Books (The conection to the database is made through instead of doing it directly in the controller)
// GET: Libro
public ActionResult Index()
{
return View();
}
public ActionResult Books(string parametro)
{
List<Libro> listalibros = ADLibros.BuscarLibro(parametro);
return View(listalibros);
}
The problem is your form. You don't set its action. If you don't tell it it will use the default which is the controller that renders the page. So when your Books controller renders the page this works because the default controller will be the books controller. You need to specify the action of your get form explicitly. To see the problem use your browser developer tools to inspect the form for the books page and the other pages.
To fix (assuming your controller for books is called BooksController) change the form code in your _Layout page to this
#using (Html.BeginForm("books", "books", FormMethod.Get))
{
<div>
#Html.TextBox("parametro")
<input type="submit" id="btnSearch" value="Some text" />
</div>
}
We are using an overload of Html.BeginForm with 3 arguments. The first is the actionName, the second is the controllerName and the 3rd is the FormMethod.
I wanted to add paging to my website so I installed the "PagedList.Mvc"
then I made some changes to model like for example changing the type from IEnumerable to IPagedList :
public IPagedList <Product> Products.
but I don't think changing model property has anything to do with the problem of layout disappearance.
And in controller part, I just added some properties to send through ViewModel to "Index" page, which I don't think has anything to do with the main problem.
i also added some <p> and <div> elements to the "Index" page which i don't think it has anything to do with layout problem since its universal to all pages.
I didn't touch the _layout.cshtml page :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title - My ASP.NET Application</title>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
</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>
#Html.ActionLink("Application name", "Index", "Home", new { area
= "" }, new { #class = "navbar-brand" })
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>#Html.ActionLink("Home", "Index", "Home")</li>
<li>#Html.ActionLink("Shop by Category", "Index",
"Categories")</li>
<li>#Html.ActionLink("View All Our Products", "Index",
"Products")</li>
</ul>
#using (Html.BeginForm("Index", "Products", FormMethod.Get, new
#class = "navbar-form navbar-left"}))
{
<div class="form-group">
#Html.TextBox("Search",null,new {#class="form-
control",#placeholder="Search Products"})
</div>
<button type="submit" class="btn btn-default">Submit</button>
}
#Html.Partial("_LoginPartial")
</div>
</div>
</div>
<div class="container body-content">
#RenderBody()
<hr />
<footer>
<p>© #DateTime.Now.Year - My ASP.NET Application</p>
</footer>
</div>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
the layout also is mentioned in _ViewStart.cshtml
#{
Layout = "~/Views/Shared/_Layout.cshtml";
}
but at the end what could be the reason that index page is looking like this, stripped away from menu, links, search box ...
i'm sure the link between "_layout page" and "views" is broken , but which factors beside #RenderBody( which already is there) are involved, I don't know.
btw. in the controller, I removed all viewbag and I'm using ViewModel , could it be a reason?
I have updated from Bootstrap 3 to Bootstrap 4 now the Razor View will not render properly as seen here in this image:
As you can see all Bootstrap styling is gone and the navbar has disappeared. This was fine with Bootstrap 3.
This is just the standard login page that comes with an MVC project, so I have not added anything fancy to it.
My bundle is as follows:
using System.Web;
using System.Web.Optimization;
namespace FoodSnap
{
public class BundleConfig
{
// For more information on bundling, visit https://go.microsoft.com/fwlink/?LinkId=301862
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js",
"~/Scripts/jquery-ui-{version}.js"));
bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
"~/Scripts/modernizr-*"));
bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
"~/Scripts/bootstrap.js",
"~/Scripts/respond.js"));
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/bootstrap.css",
"~/Content/site.css",
"~/Content/themes/base/jquery-ui.css"));
}
}
}
In my view I have rendered as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title - My ASP.NET Application</title>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
</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>
#*#Html.ActionLink("FoodSnap_TEST", "LogIn", "Account", new { area = "" }, new { #class = "navbar-brand" })*#
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
#*<li>#Html.ActionLink("Home", "Index", "Home")</li>*#
#*<li>#Html.ActionLink("About", "About", "Home")</li>
<li>#Html.ActionLink("Contact", "Contact", "Home")</li>*#
<li>#Html.ActionLink("Pre-Registration", "Index", "PreRegistration")</li>
<li>#Html.ActionLink("Roles", "Index", "Role")</li>
<li>#Html.ActionLink("FoodSnap", "Index", "FoodSnap")</li>
<li>#Html.ActionLink("Review", "Create", "FoodSnap")</li>
</ul>
#Html.Partial("_LoginPartial")
</div>
</div>
</div>
<div class="container body-content">
#RenderBody()
<hr />
<footer>
<p>© #DateTime.Now.Year - FoodSnap_TEST</p>
</footer>
</div>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
I have tried numerous things including CDN's and the result is the same. Has anyone seen this before?
Bootstrap 4 is almost a complete rewrite of Bootstrap 3 which means:
None of the Bootstrap 3 code is compatible with Bootstrap 4.
Read the docs to migrate:
https://getbootstrap.com/docs/4.0/migration/
I use asp.net MVC 5 in my project.
Here the generated code in _Layout.cshtml page:
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container topNavBtn">
<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>
#Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { #class = "navbar-brand" })
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>#Html.ActionLink("Home", "Index", "Home", new { area = "" }, null)</li>
<li>#Html.ActionLink("API", "Index", "Help", new { area = "" }, null)</li>
</ul>
</div>
</div>
</div>
<div class="container body-content">
#RenderBody()
<hr />
<footer>
<p>© #DateTime.Now.Year - My ASP.NET Application</p>
</footer>
</div>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
</body>
</html>
I remove code from this div:
<div class="navbar navbar-inverse navbar-fixed-top">
to create my own header:
<body>
<header style="background-color:green">My Header</header>
<div class="container body-content">
#RenderBody()
<hr />
<footer>
<p>© #DateTime.Now.Year - My ASP.NET Application</p>
</footer>
</div>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
</body>
But in view I get space in top of the page:
Any ide why I get space above?
Using a fixed navbar in Bootstrap requires setting padding-top on the body to provide sufficient space for the navbar. That space at the top is where your navbar is supposed to go, but you haven't included it. If you don't want the navbar, simply remove the padding-top from the body element. Otherwise, add the navbar to fill the space.
I am a newb in using jquery in MVC, please bear with me. I cannot seem to display the jquery-ui slider control in my mvc page. I have tried to implement the following articles which I have found on the web:
How to add jQueryUI library in MVC 5 project?
jQuery UI with MVC 4
JQuery UI datepicker in Asp.Net MVC
http://blog.falafel.com/three-steps-use-jquery-ui-asp-net-mvc-5/
However, when I run the code, nothing shows. I have created a small little test project, and am trying to implement the slider on the about page. Here is my code:
In the About.cshtml:
#{
ViewBag.Title = "About";
}
<h2>#ViewBag.Title.</h2>
<h3>#ViewBag.Message</h3>
<p>Use this area to provide additional information.</p>
<div style="border: none; height: 20px;" id="slider">
</div>
#section Scripts{
<script type="text/javascript">
$(document).ready(function () {
$("#slider").slider();
});
</script>
}
In the BundleConfig.cs file:
using System.Web;
using System.Web.Optimization;
namespace TestApp
{
public class BundleConfig
{
// For more information on bundling, visit http://go.microsoft.com/fwlink/?LinkId=301862
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-1.10.2.js"));
bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
"~/Scripts/jquery-ui-1.11.4.js"));
bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
"~/Scripts/jquery.validate*"));
// Use the development version of Modernizr to develop with and learn from. Then, when you're
// ready for production, use the build tool at http://modernizr.com to pick only the tests you need.
bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
"~/Scripts/modernizr-*"));
bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
"~/Scripts/bootstrap.js",
"~/Scripts/respond.js"));
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/bootstrap.css",
"~/Content/site.css"));
bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
"~/Content/themes/base/jquery-ui.css",
"~/Content/themes/base/jquery-ui.all.css"
//"~/Content/themes/base/jquery.ui.core.css",
//"~/Content/themes/base/jquery.ui.resizable.css",
//"~/Content/themes/base/jquery.ui.selectable.css",
//"~/Content/themes/base/jquery.ui.accordion.css",
//"~/Content/themes/base/jquery.ui.autocomplete.css",
//"~/Content/themes/base/jquery.ui.button.css",
//"~/Content/themes/base/jquery.ui.dialog.css",
//"~/Content/themes/base/jquery.ui.slider.css",
//"~/Content/themes/base/jquery.ui.tabs.css",
//"~/Content/themes/base/jquery.ui.datepicker.css",
//"~/Content/themes/base/jquery.ui.progressbar.css",
//"~/Content/themes/base/jquery.ui.theme.css"
));
}
}
}
In the Global.asax.cs file:
using System.Web.Mvc;
using System.Web.Optimization;
using System.Web.Routing;
namespace TestApp
{
public class MvcApplication : System.Web.HttpApplication
{
protected void Application_Start()
{
AreaRegistration.RegisterAllAreas();
FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);
RouteConfig.RegisterRoutes(RouteTable.Routes);
BundleConfig.RegisterBundles(BundleTable.Bundles);
}
}
}
and in the _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 - My ASP.NET Application</title>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/jqueryui")
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
</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>
#Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { #class = "navbar-brand" })
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>#Html.ActionLink("Home", "Index", "Home")</li>
<li>#Html.ActionLink("About", "About", "Home")</li>
<li>#Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>
</div>
</div>
</div>
<div class="container body-content">
#RenderBody()
<hr />
<footer>
<p>© #DateTime.Now.Year - My ASP.NET Application</p>
</footer>
</div>
#Styles.Render("~/Content/themes/base/css")
#RenderSection("scripts", required: false)
</body>
</html>
I have also created a screenshot of my Solution Explorer in case it may help:
Solution Explorer screenshot
I think it must be something small, but I am struggling to find the problem. I would appreciate it if anyone can point out what I should change in order to see and use the jquery-ui slider, or any other jquery controls in my site.
I found my mistake. I did not add/include the Jquery-ui.css file in the content folder. Once it was included I could see the Jquery control.
The link below explained and helped a lot in finding my mistake:
asp-net-mvc-4-jquery-datepicker
Hopefully this post can help someone else too.