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.
Related
I'm trying to get to grips with ViewComponents but having trouble trying to get the ViewComponent to reload on a button click. Whats the correct way to handle this?
Initially on the page loading it looks OK like this
In my controller I have
public IActionResult ReloadViewComponent(int characterRegionId, int materialTypeId)
{
return ViewComponent("MarketOrderComponent", new { characterRegionId, materialTypeId});
}
and in my razor view I'm passing parameters to the ReloadViewComponent method
<td><button class="btn btn-sm btn-outline-primary" value="#material.MaterialTypeID" onclick="location.href='#Url.Action("ReloadViewComponent", "BlueprintBreakdown", new { Model.CharacterRegionId, material.MaterialTypeID })'">View</button></td>
full razor view
<body>
<div class="row" style="margin-top:5px;">
<div class="col-lg-4 col-md-12">
<div class="card" style="margin-bottom:0; ">
<div class="header" style="margin-bottom:55px;">
<h2 class="text-primary">Blueprint Breakdown</h2>
</div>
<div class="body">
<div>
<h5 class="text-center">#Model.BlueprintName</h5>
</div>
<div class="row text-center">
<div class="col-6 border-right pb-4 pt-4" style="padding-top:0px !important; padding-bottom:0px !important;">
<img src="#Model.ImageUrl" alt="#Model.BlueprintName">
</div>
<div class="col-6 pb-4 pt-4" style="padding-top:0px !important; padding-bottom:0px !important;">
<img src="#Model.ProductImageUrl" alt="#Model.BlueprintName">
</div>
</div>
<div class="text-center" style="margin-top:5px;">
<text style="font-size:small;">Material Quantity Based on Manufacturing Efficiency</text>
<br />
<text style="font-size:small;">Price Based on Lowest Region Market Sell Orders</text>
<br />
<text style="font-size:small;">Current Region is <span class="text-green">#Model.CharacterRegionName</span></text>
</div>
</div>
</div>
<div class="table-responsive">
<table class="table table-hover table-custom spacing5">
<thead>
<tr>
<th></th>
<th>Material</th>
<th>Quantity</th>
<th>Price</th>
<th>Market</th>
</tr>
</thead>
<tbody>
#foreach (var material in Model.RequiredMaterials)
{
<tr class="text-cente" style="font-size:small;">
<td><img src="#(String.Format("{0}{1}{2}", "https://imageserver.eveonline.com/Type/", material.MaterialTypeID, "_32.png"))" /></td>
<td>#material.TypeName</td>
<td>#material.Quantity</td>
<td>#material.MaterialCost</td>
<td><button class="btn btn-sm btn-outline-primary" value="#material.MaterialTypeID" onclick="location.href='#Url.Action("ReloadViewComponent", "BlueprintBreakdown", new { Model.CharacterRegionId, material.MaterialTypeID })'">View</button></td>
</tr>
}
</tbody>
</table>
</div>
</div>
<div class="col-lg-8 col-md-12">
#await Component.InvokeAsync("MarketOrderComponent", new { Model.CharacterRegionId, Model.RequiredMaterials.First().MaterialTypeID })
</div>
</div>
but when clicking the view button to reload the ViewComponent it is rendered like this.
Note by using the ViewComponent() controller method, your client only gets the component part of the view. So instead of changing the browser's current location, you should send an ajax request and dynamically replace the right side content.
Add an id='MarketOrderComponent'attribute so that we can reference this element later:
<div id='MarketOrderComponent' class="col-lg-8 col-md-12">
#await Component.InvokeAsync("MarketOrderComponent", new { Model.CharacterRegionId, Model.RequiredMaterials.First().MaterialTypeID })
</div>
And change the button click event handler to send an ajax request. For example, in order to reload the market order component, you can change your code as below:
<script>
function reload(url){
return $.ajax({
method:"get",
url:url,
success:function(resp){ $('#MarketOrderComponent').html(resp);},
});
}
</script>
<div class="card" style="margin-bottom:0; ">
...
</div>
<div class="table-responsive">
...
<tbody>
#foreach (var material in Model.RequiredMaterials)
{
<tr class="text-cente" style="font-size:small;">
<td><img src="#(String.Format("{0}{1}{2}", "https://imageserver.eveonline.com/Type/", material.MaterialTypeID, "_32.png"))" /></td>
<td>#material.TypeName</td>
<td>#material.Quantity</td>
<td>#material.MaterialCost</td>
<td>
<button class="btn btn-sm btn-outline-primary"
value="#material.MaterialTypeID"
onclick="var link='#Url.Action("ReloadViewComponent", "BlueprintBreakdown", new { Model.CharacterRegionId, material.MaterialTypeID })'; event.preventDefault(); reload(link)"
>
View
</button>
</td>
</tr>
}
</tbody>
...
</div>
<div id='MarketOrderComponent' class="col-lg-8 col-md-12">
#await Component.InvokeAsync("MarketOrderComponent", new { Model.CharacterRegionId, Model.RequiredMaterials.First().MaterialTypeID })
</div>
i am trying to get an image uploader working inside my MVC project, but everytime i click the upload file button, i get "Error undefined", i am not sure where i am going wrong.
The page is a partial view, loaded inside a #Html.BeginForm . below is the code i am using.
Index.cshtml
#using (Html.BeginForm("Register", "Account", FormMethod.Post))
{
#Html.AntiForgeryToken()
<div class="container">
<div class="row">
<article class="col-sm-12 col-md-12 col-lg-12 sortable-grid ui-sortable">
<div id="wid-id-0">
<!-- widget div-->
<div role="content">
<!-- widget content -->
<div class="widget-body">
<div class="row" style="background: white">
<form id="wizard-1" novalidate="novalidate">
<div id="bootstrap-wizard-1" class="col-sm-12">
<div class="tab-content">
#*Tab 1 (Step 1)*#
<div class="tab-pane active" id="tab1">
<br>
#Html.Partial("Registration/_Step1")
<div class="form-actions">
<div class="row">
<div class="col-sm-12">
<ul class="pager wizard no-margin">
<li class="previous disabled">
Previous
</li>
<li data-target="#step2" class="next">
Next
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="form-bootstrapWizard">
<ul class="bootstrapWizard form-wizard" style="background: coral">
<li class="active" data-target="#step1">
<span class="step">1</span> <span class="title">Step 1: Profile Information</span>
</li>
<li data-target="#step2" class="">
<span class="step">2</span> <span class="title">Step 2: Profile Picture</span>
</li>
<li data-target="#step3" class="">
<span class="step">3</span> <span class="title">Step 3: Identification</span>
</li>
<li data-target="#step4">
<span class="step">4</span> <span class="title">Step 4: Submit Profile</span>
</li>
</ul>
<div class="clearfix"></div>
</div>
</div>
</form>
</div>
</div>
<!-- end widget content -->
</div>
<!-- end widget div -->
</div>
<!-- end widget -->
</article>
</div>
</div>
}
_Step1.cshtml
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(document).ready(function () {
$("#Upload").click(function (e) {
e.preventDefault();
var formData = new FormData();
var totalFiles = document.getElementById("FileUpload").files.length;
for (var i = 0; i < totalFiles; i++)
{
var file = document.getElementById("FileUpload").files[i];
formData.append("FileUpload", file);
}
$.ajax({
type: "POST",
url: '#Url.Action("UploadFiles", "Account")',
data: formData,
dataType: 'json',
contentType: false,
processData: false,
success: function (response) {
alert('succes!!');
},
error: function (error) {
alert("error: " + error.statusMessage);
}
});
});
});
</script>
<table align="center">
<tr>
<td style="text-align: center;"><label>Upload Profile Picture</label></td>
<td></td>
</tr>
<tr>
<td valign="top"><img id="imgPreview" src="~/Content/Images/upload_holder.PNG" class="img-holder" style="width: 180px; height: 180px;" /></td>
<td>
#*<input type="submit" class="btn btn-lg" style="width: 200px; background: #0091d9; color: white;" value="Upload Photo" />*#
#*<input id="input-4" name="input4[]" type="file" multiple class="file-loading" style="width: 200px; background: #0091d9; color: white;" value="Upload Photo">*#
<input type="file" id="FileUpload" multiple />
<input type="submit" id="Upload" value="Upload"/>
<br />
<br />
<label>Acceptable file formats: jpg, gif or png file</label>
<br />
<label>Under 1 MB</label>
</td>
</tr>
</table>
any help is greatly appreciated!
EdIT: Below is the controller function, but its never hit.
[HttpPost]
public ActionResult UploadFiles()
{
// Checking no of files injected in Request object
if (Request.Files.Count > 0)
{
try
{
// Get all files from Request object
HttpFileCollectionBase files = Request.Files;
for (int i = 0; i < files.Count; i++)
{
//string path = AppDomain.CurrentDomain.BaseDirectory + "Uploads/";
//string filename = Path.GetFileName(Request.Files[i].FileName);
HttpPostedFileBase file = files[i];
string fname;
// Checking for Internet Explorer
if (Request.Browser.Browser.ToUpper() == "IE" || Request.Browser.Browser.ToUpper() == "INTERNETEXPLORER")
{
string[] testfiles = file.FileName.Split(new char[] { '\\' });
fname = testfiles[testfiles.Length - 1];
}
else
{
fname = file.FileName;
}
// Get the complete folder path and store the file inside it.
fname = Path.Combine(Server.MapPath("~/Uploads/"), fname);
file.SaveAs(fname);
}
// Returns message that successfully uploaded
return Json("File Uploaded Successfully!");
}
catch (Exception ex)
{
return Json("Error occurred. Error details: " + ex.Message);
}
}
else
{
return Json("No files selected.");
}
}
I have made grid with html table tag .in one of TD tag I have this code
<td>
<a onclick="$('#lightBox').css('display','inline')"></a>
<div style="display: none" id="lightbox">
<%--<%Html.RenderAction("LightBox","PremiumSharingAdmin",new {historyId = premium.SharingPremiumHistoryID}); %>--%>
<img src="Storage/Images/<%=premium.SharingPremiumHistoryID %>.jpg" title="image" width="100" height="100"/>
<div>
<textarea readonly="readonly">
<%= premium.Content %>
</textarea>
</div>
<div>
<input type="text" readonly="readonly" value="<%= premium.SharingTitle %>"/>
</div>
</div>
</td>
These tag provide me some extra info from grid row that By default is hidden.
In other side I have Link tag that if user pressed that display that row.
but problem is that when I pressed it, it just show me the first record detail and when I press the others it show me the first row detail.
where is the problem guys ?
This is my whole ASPX view
<% foreach (var premium in Model)
{%>
<tr>
<td style=" font-weight: bold;width: 130px;">
<span ><%= premium.SharingTitle %></span>
</td>
<td style=" font-weight: bold;width: 130px;">
<span ><%= premium.AddedDate.ConvertToPersianDate(true) %></span>
</td>
<td style="width: 130px;">
<span> <%= premium.IsSubmit %></span>
</td>
<td style="width: 130px;">
<span> <%= premium.ResturantName %></span>
</td>
<td style="width: 130px;">
<span> <%= premium.Content %></span>
</td>
<td style="width: 130px;">
<div class="group">
<a class="delete" href="<%= Url.Action("submit", "PremiumSharingAdmin", new {historyId = premium.SharingPremiumHistoryID}) %>" onclick="return confirm('آیا میخواهید این خبر را تایید کنید؟');">تایید</a>
</div>
</td>
<td>
<a onclick="$('#lightBox').css('display','inline')"></a>
<div style="display: none" id="lightBox">
<%--<%Html.RenderAction("LightBox","PremiumSharingAdmin",new {historyId = premium.SharingPremiumHistoryID}); %>--%>
<img src="Storage/Images/<%=premium.SharingPremiumHistoryID %>.jpg" title="image" width="100" height="100"/>
<div>
<textarea readonly="readonly">
<%= premium.Content %>
</textarea>
</div>
<div>
<input type="text" readonly="readonly" value="<%= premium.SharingTitle %>"/>
</div>
</div>
</td>
</tr>
<%} %>
You are generating invalid html by giving multiple <div> elements the same id attribute. $('#lightBox').css('display','inline') will return all elements with id="lightbox" but set the style of only the first.
Instead, use class names and use relative selectors. I also recommend you use Unobtrusive Javascript and css, rather tan polluting your mark up with behavior.
Html
<td>
Show
<div class="lightbox">Some content to display</div>
</td>
CSS
.lightbox {
display: none;
}
Script (at bottom of page)
<script>
$('.toggle').click(function () {
if ($(this).hasClass('hidden')) {
$(this).next('div').show();
$(this).text('Hide');
} else {
$(this).text('Show');
$(this).next('div').hide();
}
$(this).toggleClass('hidden');
});
</script>
</body>
Side note: Using RenderAction to render the contents of the hidden div suggest the contents are large and/or you calling a service/database to get the contents. If that's the case you should be loading the contents on demand using ajax (unless your expecting the users to view the details of all rows)
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.
I looked over some other answers and the solutions there were not working. And I couldn't seem to figure out why. This is using Bootstrap 3.0. All I am trying to do is use that to upload a new avatar image. The problem is it always comes up null and I cannot seem to figure out why.
Here is my HTML:
#using (Html.BeginForm("EditAvatar", "Profile", new { userID = #Model.ProPit_User.userID }, FormMethod.Post, new { }))
{
<div class="form-group">
<div class="fileinput fileinput-new" data-provides="fileinput">
<div class="fileinput-new thumbnail" style="width: 200px; height: 150px;">
<img src="http://www.placehold.it/200x150/EFEFEF/AAAAAA&text=no+image" alt="" />
</div>
<div class="fileinput-preview fileinput-exists thumbnail" style="max-width: 200px; max-height: 150px;">
</div>
<div>
<span class="btn default btn-file">
<span class="fileinput-new">Select image
</span>
<span class="fileinput-exists">Change
</span>
<input id="avatar_image" type="file" name="..." runat="server">
</span>
<a href="#" class="btn default fileinput-exists" data-dismiss="fileinput">Remove
</a>
</div>
</div>
<div class="clearfix margin-top-10">
<span class="label label-danger">NOTE!
</span>
<span>Attached image thumbnail is supported in Latest Firefox, Chrome, Opera, Safari and Internet Explorer 10 only
</span>
</div>
</div>
<div class="margin-top-10">
<button type="submit" class="btn green">
Save Changes
</button>
<button type="reset" class="btn default">Cancel</button>
</div>
}
I have given the file input the ID of avatar_image
Here is the controller:
[HttpPost]
public ActionResult EditAvatar(HtmlInputFile avatar_image)
{
if (avatar_image.PostedFile != null)
{
//do whatever you want with the file
}
return View();
}
When looking at the break point the avatar_image.PostedFile is always null. Anyone have any idea what I am missing?
You might check the request in Fiddler. More importantly though, you need to add the enctype="multipart/form-data" attribute to the form.