Can not click on controls MVC - asp.net-mvc

I manually placed the following code in the _Layout.cshtml
#model AssignmentTrialMVC.Models.Search
<div id="loginStrip">
#if (Request.IsAuthenticated)
{
<span style="border-right: 1px solid white; padding-right: 5px;">
<strong>#Html.Encode(User.Identity.Name)</strong>
#Html.ActionLink("Sign Out", "Logout", "User")
</span>
}
else
{
<span style="border-right: 1px solid white; padding-right: 5px;">
#Html.ActionLink("Register", "Register", "User")
</span>
<span style="padding-left: 5px;">
#Html.ActionLink("Sign In", "Login", "User")
</span>
}
</div>
<div id="searchCell">
#using (Html.BeginForm())
{
#Html.TextBoxFor(u => u.brand)
<input id="searchSubmitButton" type="submit" value="SEARCH" />
}
</div>
I can view the controls in the screen but I can not click on the controls, but using tab I can focus the controls.
Please help me with this.

Related

My Kendo Datepicker is not visible when close to the bottom of the page

When using the Kendo date picker under ASP Razor, the control opens outside the visible area if the picker is close to the bottom of the page. It also opens at quite a distance from the control.
#model [Company].DebugViewModel
<h2>Development Debug Page</h2>
#using (Html.BeginForm("Index", "Debug", FormMethod.Post))
{
<div class="form-group">
<label for="DebugDate">Blank Space:</label>
<div style="height:2000px; background-color:lightgray;"> </div>
</div>
<div class="form-group">
<label for="DebugDate">Debug Date:</label>
#Html.Kendo().DatePickerFor(a => a.DebugDate)
</div>
<div class="form-group">
<input type="submit" class="btn btn-primary" style="width:120px;" value="Save" />
</div>
}
Here is an image:
In the end, thanks to the feedback I got, I decided to drop bootstrap from the project. Lucky for me this is a desktop only application.
Here is what I ended up using:
<style>
body {
padding: 0 0 20px 0;
margin: 0;
position:relative; /* Fixed Kendo widget box problem */
}
.form-container {
width: 100%;
max-width:800px;
margin: 16px auto;
}
</style>
<div class="k-content form-container">
<ul>
<li>
<label for="ID">ID:</label>
#Html.Kendo().TextBoxFor(a => a.ID)
</li>
<li>
<label for="Date">Date:</label>
#Html.Kendo().DatePickerFor(a => a.Date)
</li>
</ul>
</div>

System.NullReferenceException on direct navigation to page

Hi I have a problem when I try to access a page in my application directly. When I navigate within the application to the page, does everything work.
<input type="button"
class="btn btn-primary"
id="calulate"
value="Finanzierungsrate berechnen"
onclick="location.href ='#Url.Action("calculate", "RatesKit", new { id = "bc338d8d-58b9-4867-9730-6b92a516a496"}) '" />
Here the controller method:
[HttpGet]
public ActionResult calculate(string id, string objectDescription, string objectPrice)
{
if (string.IsNullOrEmpty(id))
{
return RedirectToAction("NotValid");
}
else
{
if (Validator.ValidateToken(id, out bob))
{
OfferRequest request = Session["RequestOffer"] as OfferRequest;
if (request != null)
{
ViewData["Dealer"] = bob;
//..
}
}
else
{
return RedirectToAction("NotValid");
}
return View();
}
}
when I reload the page with F5, the page loaded without Problems. But if I try to access the site directly (Just hit enter in the address bar of Browser), I get the following error message:
Definitely, theres is no mistake at this point! If I remove the Razor Syntax #DateTime.Now.Year the fault is located at a different point with Razor syntax.
I do not know, why there is an error only with direct access.
Similar problems I've already looked at, unfortunately without solution to my problem.
System.NullReference Exception occurred in App_Web_XXX.dll - Error in Partial View
System.NullReferenceException in App_Web_*.dll
Thanks for any advice
Her the full page:
#{
ViewBag.Title = "Finanzierungsrate berechnen";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<meta charset="utf-8" />
<div align="center">
<h2>Finanzierungsrate berechnen</h2>
<div style="max-width:700px;">
<div id="ratesView">
#{Html.RenderPartial("ViewCalculateRate", ViewData);}
</div>
</div>
</div>
<table>
<tr>
<td valign="top" class="footerContent" style="padding-top: 20px;color: #878780; font-size: 11px; text-align: left;">
© #DateTime.Now.Year XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX Alle Rechte vorbehalten. Impressum
</td>
</tr>
<tr valign="top" class="footerContent" style="padding-top: 20px; color: #878780; font-size: 11px; text-align: left;">
<td>Wir übernehmen keine Gewähr für die Richtigkeit dieser Berechnung.</td>
</tr>
</table>
<div id="backbutton" style="padding:20px 0; display:inline-block;">
<input type="button"
class="btn btn-primary btn-xs"
id="backButton"
value="Zurück"
onclick="location.href ='#Request.UrlReferrer.AbsoluteUri'" />
</div>
I got it....
<div id="backbutton" style="padding:20px 0; display:inline-block;">
<input type="button"
class="btn btn-primary btn-xs"
id="backButton"
value="Zurück"
onclick="location.href ='#Request.UrlReferrer.AbsoluteUri'" />
</div>
Request does not exist when I go directly to the page. So I was unable to create the button ...
THX Sometimes you have to look at the code times from the outside.

Angular Bootstrap : how to layout two widgets side-by-side in a modal window

I'm trying to place two Kendo UI widgets side-by-side within an Angular-UI modal window.
My problem is that they are getting place one below the other as in the embedded screen shot.
Note the Dimensions List on top (<li ng-repeat), and the Dimension Grid on the bottom. I'd like these to be side-by-side :
Here's the HTML template, which is part of the Angular Bootstrap modal :
<form class="form-horizontal">
<fieldset>
<!-- Form Name -->
<legend>User Dimensions</legend>
<div class="form-group">
<label class="col-md-4 control-label" for="radios-0">Choose One</label>
<div class="col-md-4">
<div class="radio">
<label for="radios-0">
<input name="radios" id="radio1" value="1" type="radio">
Defined Portfolios
</label>
</div>
<div class="radio">
<label for="radios-1">
<input name="radios" id="radio2" value="2" checked="checked" type="radio">
Specify Dimensions
</label>
</div>
</div>
<label class="col-md-4 control-label" for="radios-0">Dimensions</label>
<!-- *** KENDO SORTABLE *** -->
<div class="col-md-4">
<ul class="dim-list" kendo-sortable k-placeholder="settings.placeholder" k-hint="settings.hint">
<li ng-repeat="dim in settings.dimenDS">{{dim.name}}</li>
</ul>
</div>
<!-- *** KENDO GRID *** -->
<div class="col-md-8">
<span id="userDimenGrid" kendo-grid="settings.userDimenGrid"
k-data-source="settings.userDimenGridDS"
k-options="settings.userDimenGridOptions"
k-rebind="settings.userDimenGridOptions" />
</div>
</div>
</fieldset>
</form>
<style scoped>
.dim-list li{
list-style-type:none;
background-color:silver;
font-size:12px;
font-weight:bold;
width: 180px;
margin: 5px;
line-height: 30px;
text-align: center;
border-radius: 3px;
cursor:move;
}
li.hint {
display: block;
padding: 10px;
width: 200px;
background-color: #52aef7;
color: #fff;
}
li.hint:last-child {
border-radius: 4px;
}
li.hint span {
color: #fff;
}
li.placeholder {
background-color: #dceffd;
color: #52aef7;
text-align: right;
}
</style>
I would like this to be side by side, but having much trouble formatting it as such within this <form> .
final solution :
I ended up spending more time working with bootstrap classes row and/or row-fluid, as well as col-lg-4.
It turns out the standard "form-group" class won't exactly work with what I want to do. Of course, since it's not exactly a form. Rather I'm placing Kendo UI widgets side by side.
<form class="form-horizontal">
<fieldset>
<!-- Form Name -->
<legend>User Dimensions</legend>
<div class="form-group">
<label class="col-md-4 control-label" for="radios-0">Choose One</label>
<div class="row">
<div class="col-lg-4">
<div class="radio">
<label for="radios-0">
<input name="radios" id="radio1" value="1" type="radio">
Defined Portfolios
</label>
</div>
<div class="radio">
<label for="radios-1">
<input name="radios" id="radio2" value="2" checked="checked" type="radio">
Specify Dimensions
</label>
</div>
</div>
<div class="col-lg-8"></div>
</div>
<div class="row-fluid">
<div class="col-lg-3">
<ul class="dim-list" kendo-sortable k-hint="settings.hint" k-move="settings.move" k-end="settings.end" k-placeholder="settings.placeholder">
<li ng-repeat="dim in settings.dimenDS">{{dim.name}}</li>
</ul>
</div>
<div class="col-lg-8">
<span id="userDimenGrid" kendo-grid="settings.userDimenGrid"
k-data-source="settings.userDimenGridDS"
k-options="settings.userDimenGridOptions"
k-rebind="settings.userDimenGridOptions" />
</div>
</div>
</div>
</fieldset>
</form>
<style scoped>
.dim-list li{
list-style-type:none;
display: inline-block;
background-color:silver;
font-size:12px;
font-weight:bold;
width: 180px;
margin: 5px;
line-height: 30px;
text-align: center;
border-radius: 3px;
cursor:move;
}
li.hint {
display: block;
padding: 10px;
width: 200px;
background-color: #52aef7;
color: #fff;
}
li.hint:last-child {
border-radius: 4px;
}
li.hint span {
color: #fff;
}
li.placeholder {
background-color: #dceffd;
color: #52aef7;
text-align: right;
}

Display Image [VARBINARY(MAX)] in MVC

I'm new to MVC. I got pictures stored in my table called "Resim".
I want to see the pictures when I call the associated record from the view.I will use its id to call it. Here is my code of the controller:
public ActionResult Details(int id = 0)
{
SozlukEntities db = new SozlukEntities();
KelimeTuru kelime = db.KelimeTuru.Find(id);
if (kelime == null)
{
return HttpNotFound();
}
return View(kelime);
}
Here is my code of the view:
#model SozlukRG.Models.KelimeTuru
#{
ViewBag.Title = "Details";
}
<h2>Details</h2>
<fieldset>
<p>Move the mouse pointer over this paragraph.</p>
<legend>KelimeTuru</legend>
<div class="div1" style="display: table; background-color: #b0c4de;">
<div class="div1" style="display: table-row;">
<div class="div1" style="display: table-cell; padding: 10px;">
#Html.DisplayNameFor(model => model.KelimeId)
</div>
<div class="div1" style="display: table-cell; padding: 10px;">
#Html.DisplayNameFor(model => model.VideoId)
</div>
<div class="div1" style="display: table-cell; padding: 10px;">
#Html.DisplayNameFor(model => model.ResimId)
</div>
<div class="div1" style="display: table-cell; padding: 10px;">
#Html.DisplayNameFor(model => model.Anlam)
</div>
</div>
<div class="div1" style="display: table-row;">
<div class="div1" style="display: table-cell; padding: 10px;">
#Html.DisplayFor(model => model.KelimeId)
<div class="div1" style="display: table-cell; padding: 10px;">
<video width="320" height="240" controls>
<source src="/Videos/b.mp4" type="video/mp4">
</video>
</div>
<div class="div1" style="display: table-cell; padding: 10px;">
#*The Image will be inserted here, PLEASE HELP ME WITH THIS :) *#
</div>
<div class="div1" style="display: table-cell; padding: 10px;">
#Html.DisplayFor(model => model.Anlam)
</div>
</div>
</div>
</fieldset>
<p>
#Html.ActionLink("Back to List", "Index")
</p>
Resim is the name of the table and Adi is the VARBINARY(MAX) column with the picture. I want to see the picture in the view.
Please Help..Thanks in advance...
You could create a dedicated Image controller which handles displaying images:
public class ImageController : Controller
{
public ActionResult Show(int id)
{
SozlukEntities db = new SozlukEntities();
KelimeTuru kelime = db.KelimeTuru.Find(id);
byte[] data = kelime.Aidi;
return File(data, "image/jpg");
}
}
I skipped error checking for clarity. Also, the return type might be different than "image/jpg".

Not able to fire button's click in MVC 4 razor?

I am new to MVC, i want to create a login control and for i have write the below code in view:
#using (Html.BeginForm("LoginControl", "Login"))
{
<div style="float: left; line-height: 36px;">
#Html.ValidationSummary()
<div style="float: left; margin-right: 20px;">
UserName :
</div>
<div style="float: right;">#Html.TextBoxFor(o => o.login.UserName)
</div>
<br />
<div style="float: left; margin-right: 20px;">
Password :
</div>
<div style="float: right;">#Html.TextBoxFor(o => o.login.UserPassword)</div>
<br />
<div style="float: left; margin-right: 20px;">
</div>
<input type="button" value="Login" id="Login" title="Login" />
</div>
}
in controller my code is:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace MvcApplication2.Controllers
{
public class LoginController : Controller
{
//
// GET: /Default1/
public ActionResult Index()
{
return View();
}
public ActionResult LoginControl(String UserName, String UserPassword)
{
string result = "";
if (UserName == "ram" && UserPassword == "ram123")
{
result = "1";
}
if (result == "1")
{
return View("LoginControl");
}
else
{
ModelState.AddModelError("", "Invalid username or password");
return View("Index");
}
}
}
}
I am not able to get why it is working, please help me.
ok first of all change the input type of button to submit:
<input type="button" value="Login" id="Login" title="Login" />
Now Change the View Code as below:
#using (Html.BeginForm("LoginControl", "Login"))
{
<div style="float: left; line-height: 36px;">
#Html.ValidationSummary()
<div style="float: left; margin-right: 20px;">
UserName :
</div>
<div style="float: right;">#Html.TextBox("UserName")
</div>
<br />
<div style="float: left; margin-right: 20px;">
Password :
</div>
<div style="float: right;">#Html.TextBox("UserPassword")
</div>
<br />
<div style="float: left; margin-right: 20px;">
</div>
<input type="submit" value="Login" id="Login" title="Login" />
</div>
}
Hope this will help you.

Resources