MVC3 - getting red x instead of picture from db - c#

I am getting red x mark instead of the picture when storing in database. I believe I am having problems in the Views files. Please could someone have a look at this and tell me how to correct it. If I have wrong URL Actions please tell me which ones I should be using. Thanks in advance.
SubCategory2 Table has the following columns...
Column field > Picture1 : Data Type > varbinary(MAX)
Column field > ImageMimeType : Data Type > varchar(50)
Index.cshtml file
#foreach (var item in Model) {
<td>
<img src="#Url.Action("GetImage", "SubProductCategory2",
new { id = item.SubProductCategoryID})" alt="" height="100" width="100" />
</td>
Edit.cshtml file
"Edit" is the method in the contoller. "ProductCategoryL2" is the method in the controller. "GetImage" is the method in controller. All these methods are in the same controller file called ProductCategoryControllerL2
#using (Html.BeginForm("Edit", "ProductCategoryL2", "GetImage",
FormMethod.Post, new { #encType = "multipart/form-data" }))
{
<div class="editor-field">
<img src="#Url.Action("GetImage", "SubProductCategory2", new {
Model.SubProductCategoryID })" alt="" />
#Html.ValidationMessage("Picture1", "*")
<input type="file" id="fileUpload" name="Create" size="23"/>
</div>
}
ProductCategoryL2Controller.cs file
[HttpPost]
public ActionResult Edit(int id, FormCollection collection,
SubProductCategory2 editSubProdCat, HttpPostedFileBase image)
{
var r = db.SubProductCategory2.First(x => x.SubProductCategoryID
== id);
if (TryUpdateModel(r))
{
if (image != null)
{
editSubProdCat.ImageMimeType = image.ContentType;
editSubProdCat.Picture1 = new byte[image.ContentLength];
image.InputStream.Read(editSubProdCat.Picture1, 0,
image.ContentLength);
}
db.SaveChanges();
return RedirectToAction("/");
}
return View(r);
}
public FileContentResult GetImage(int productId)
{
var product = db.SubProductCategory2.First(x =>
x.SubProductCategoryID == productId);
return File(product.Picture1, product.ImageMimeType);
}
Addition Note
I am using MVC 3 framework. The GetImage method has been extacted from Steven Sanderson book Pro ASP.NET MVC 2 Framework. So I am not sure if that will be a problem?

The first step I would take to debug would be to try the URL for the image in your browser directly. Right-click on the red X, copy the url and paste it in your address bar. If the url looks right you should be a better error telling you what the problem is. If that fails, put a breakpoint in your GetImage routine to make sure the routes are correct and your method is getting called. Try Fiddler to see the request being made and what your web server is saying.
My guess is that you have the action wrong. It looks like you are linking to the GetImage action on the SubProductCategory2 controller when the method is on your ProductCategoryL2 controller.
Also I don't understand how your Model.SubProductCategoryID value is supposed to be mapped to your productId parameter. Try changing these calls:
Url.Action("GetImage", "SubProductCategory2",
new { id = item.ProductCategoryID})
Url.Action("GetImage", "SubProductCategory2", new {
Model.SubProductCategoryID })
to these:
Url.Action("GetImage", "ProductCategoryL2",
new { productId = item.ProductCategoryID})
Url.Action("GetImage", "ProductCategoryL2", new {
productId = Model.SubProductCategoryID })

Your input file field is called Create:
<input type="file" id="fileUpload" name="Create" size="23"/>
whereas the controller action parameter handling the form submission is called image (the one with HttpPostedFileBase type) => this parameter will always be null in your Edit controller action and nothing will be saved in the database.
Also the attribute is called enctype and not encType in the Html.BeginForm helper. Also inside the GetImage action ensure that product.Picture1 represents a correct image byte array and that it's content type matches with product.ImageMimeType.
So for example to further debug this issue you could try to save it to some temporary file to see if it is a valid image just before returning. Also make sure that the product instance you have fetched from the database is not null:
// if the content type is image/png:
File.WriteAllBytes(#"c:\foo.png", product.Picture1);
Then ensure that foo.png open successfully with an image viewer.

You are trying to return file content as the value to your img's src attribute. Your browser will need to issue a separate request for the image.
change your view to this:
<img src="GetImage/#(Model.SubProductCategoryID)" />

Related

.Net Core MVC Web App - passing value from View to Controller in a Form not working

I've read other posts on here to try and fix my issue but no luck.
I have a form, that is based on a simple model.
public class Image
{
public string FileName { get; set; }
public string ImagePath { get; set; }
}
In my view, I have a form which displays an image:
#model Uploader.Models.Image
<h1>View Image</h1>
<form asp-controller="Images" asp-action="Download" method="post" enctype="multipart/form-data">
<img src="~/Images/#Model.FileName" />
<input type="submit" value="Download Image" class="btn btncolour btn-primary" />
#Model.FileName
</form>
That last Model.Filename, I was just testing to see if the value is present (which it is). From what i can see, everything is fine here, when I submit this form, the values from my model (specifically Image.FileName) should be posted back to the server.
my controller method:
[HttpPost]
public async Task<IActionResult> Download(Image image)
{
if (image.FileName == null)
return Content("filename not present");
var path = Path.Combine(
Directory.GetCurrentDirectory(),
"wwwroot", image.FileName);
var memory = new MemoryStream();
using (var stream = new FileStream(path, FileMode.Open))
{
await stream.CopyToAsync(memory);
}
memory.Position = 0;
return File(memory, GetContentType(path), Path.GetFileName(path));
}
My code hits this method upon postback, but image.FileName is always null, even though on the View itself, I can see that model.FileName does contain a value.
Could anyone explain what I am doing wrong?
many thanks
FileName is used for src of image but not as an input. Only input field values are sent in request when you click submit.
Try adding text input with name="FileName", then enter some value and click submit. Then you should be able to receive this value in controller method.

The parameters dictionary contains a null entry for parameter

I'm attempting to, on the click of a button, complete a to-do item, therefore removing it from the list.
I'm using an ActionLink for the button:
#foreach (var item in Model)
{
<li class="#item.Priority">
#item.Text
<div class="agile-detail">
#Html.ActionLink("Done", "Complete", "Home", new { id = item.ToDoId }, new { #class = "pull-right btn btn-xs btn-primary" })
<i class="fa fa-clock-o"></i> #item.Date
</div>
</li>
}
And a very short action for the processing in the controller:
public ActionResult Complete(int todoId)
{
using (var db = new KnightOwlContext())
{
DashboardHelper dashboardHelper = new DashboardHelper(db);
dashboardHelper.CompleteToDo(todoId);
return RedirectToAction("Index", "Home");
}
}
Clicking the button generated a URL of:
http://site/Home/Complete/1
I've looked up a solution and so far it looks like it could be any number of issues. Also the ActionLink button is inside a partial view so I'm not sure if that changes anything in terms of incorrect routing setup? For routing too I'm just using the default config that comes with an MVC project in Visual Studio.
Just having trouble narrowing down the cause of the issue so where to check first?
The parameter in your method is int todoId but you not passing any value for that - your only passing a value for a parameter named id.
Change the method to
public ActionResult Complete(int id)
or change the link to use new { todoId = item.ToDoId }, but that will add a query string value, not a route value, unless you create a specific route definition with url: "Home/Complete/{todoId}"

MVC: How to get full file path from file input field? [duplicate]

This question already has answers here:
How to get full path of selected file on change of <input type=‘file’> using javascript, jquery-ajax?
(14 answers)
Closed 6 years ago.
I have the following razor code:
<div class="container">
#Html.ValidationSummary(false)
#using (Html.BeginForm("EncryptFile", "Encryption", new { returnUrl = Request.Url.AbsoluteUri }, FormMethod.Post, new { #id = "encryptionform", #class = "form-horizontal" }))
{
<div class="form-group">
#Html.Label("File", new { #class = "control-label col-md-2" })
<div class="col-md-10">
<input type="file" id="encryptfilefield" name="uploadedfile" enctype='multipart/form-data'/>
</div>
</div>
<button type="submit" id="encryptfilebutton">Encrypt</button>
<button id="decryptfilebutton" type="button">Decrypt</button>
<button id="reencryptfilebutton" type="button">Re-Encrypt</button>
}
</div>
and the following controller code gets called when I click the Encrypt button:
[HttpPost]
public ActionResult EncryptFile(string uploadedfile)
{
/*process the file without uploading*/
return Json(new { status = "success", message = "Encrypted!" });
}
I am able to hit this action when I click the encrypt button, but the uploadedfile string always comes in as null. How can I get the fill filepath of the file that was selected? Please note that I am not trying to upload it to the server (despite "uploaded" appearing in the name), I just need the filepath.
EDIT
I saw in IE 11 that the following showed the file path fully (the part inside the alert):
alert($("#encryptfilefield").val());
However this is not a full solution, and it seems there is no solution due to to it being a security issue.
Thank you.
Updated Answer
Unfortunately there's no way to get that info consistently among all browsers., there's multiple posts on here about this topic and the conclusion is browsers don't allow it for security purposes.
I did find that in IE 11 they do include the path within the input dom element .value property, but I don't know if that works in other versions, and it does not work in chrome.
$('input[type=file]').change(function () {
console.dir(this.value);
console.dir(this.files[0])
})
Unfortunately that's about the best you can expect. Here's a post that has a couple things you could do to possibly achieve some very specific scenarios.
How to get full path of selected file on change of <input type=‘file’> using javascript, jquery-ajax?
Original Answer (how to get file path "After" it reaches server)
The null param issue I'm thinking is because MVC binds on element name property.
<input type="file" id="encryptfilefield" name="uploadedfile" enctype='multipart/form-data'/>
and your controller action is marked as type string, which is not what your input type is.
you could either change that to this,
[HttpPost]
public ActionResult EncryptFile(HttpPostedFileBase uploadedfile)
{
or try grabbing the file straight from the Request object like below, you'd have to save it somewhere before you get the full path of it though, i don't believe you'll get the filepath of where it originated from, only after you save it.
[HttpPost]
public ActionResult EncryptFile(string uploadedfile)
{
HttpPostedFileBase myfile = Request.Files[0];
if (file.ContentLength > 0)
{
// extract only the fielname
var fileName = Path.GetFileName(file.FileName);
// store the file inside ~/App_Data/uploads folder
var path = Path.Combine(Server.MapPath("~/App_Data/uploads"),fileName);
file.SaveAs(path);
}
/*process the file without uploading*/
return Json(new { status = "success", message = "Encrypted!" });
}

html form posting to mvc controller

I am trying to set up a simple login html page, whose action is sent to mvc controller on another of my sites. I have no problem setting up the page to do the post, and in the mvc controller I have my method that reads the form post. The problem is that I am not seeing my fields from the html form in the form collection.
Is there something special that I need to do to read a form post within a mvc controller method, if so what is that?
The is the form action markup from my page
<form action="http://reconciliation-local.sidw.com/login/launch" method="post">
User Name <input type="text" id="username"/><br/>
Password <input type="text" id="password"/>
<input type="submit" value="launch"/>
</form>
The controller method
[HttpPost]
public ActionResult launch(FormCollection fc)
{
foreach (string fd in fc)
{
ViewData[fd] = fc[fd];
}
return View();
}
When I step through the controller method code, I am not seeing anything in the formcollection parameter.
Post Html To MVC Controller
Create HTML page with form (don't forget to reference a Jquery.js)
<form id="myform" action="rec/recieveData" method="post">
User Name <input type="text" id="username" name="UserName" /><br />
Password <input type="text" id="password" name="Password"/>
<input type="submit" id="btn1" value="send" />
</form>
<script>
$(document).ready(function () {
//get button by ID
$('#btn1').submit(function () {
//call a function with parameters
$.ajax({
url: 'rec/recieveData', //(rec)= Controller's-name
//(recieveData) = Action's method name
type: 'POST',
timeout: '12000', (optional 12 seconds)
datatype: 'text',
data: {
//Get the input from Document Object Model
//by their ID
username: myform.username.value,
password: myform.password.value,
}
});
});
});
</script>
Then in The MVC Controller
controller/action
| |
1. Create Controller named rec (rec/recieveData)
Create View named rec.cshtml
Here is the controller:
public class recController : Controller
{
// GET: rec
string firstname = "";
string lastname = "";
List<string> myList = new List<string>();
public ActionResult recieveData(FormCollection fc)
{
//Recieve a posted form's values from parameter fc
firstname = fc[0].ToString(); //user
lastname = fc[1].ToString(); //pass
//optional: add these values to List
myList.Add(firstname);
myList.Add(lastname);
//Importan:
//These 2 values will be return with the below view
//using ViewData[""]object...
ViewData["Username"] = myList[0];
ViewData["Password"] = myList[1];
//let's Invoke view named rec.cshtml
// Optionaly we will pass myList to the view
// as object-model parameter, it will still work without it thought
return View("rec",myList);
}
}
Here is the View:
#{
ViewBag.Title = "rec";
}
<h2>Hello from server</h2>
<div>
#ViewData["Username"]<br /> <!--will display a username-->
#ViewData["Password"] <!-- will display a password-->
</div>
If you posted some code it would be much easier to help you, so please edit your question...
Make sure that your form's action has the correct address, that your method is specifying POST (method="POST") and that the input fields under your form have name attributes specified.
On the server side, try making your only parameter a FormCollection and test that the fields in your form posted through the debugger. Perhaps your model binding isn't correct and the FormCollection will at least show you what got posted, if anything.
These are just common issues I've seen. Your problem could be different, but we need to see what you're working with to be able to tell.
Try something like this:
cQuery _aRec = new cQuery();
_aRec.Sqlstring = "SELECT * FROM Admins";
DataSet aDS = _aRec.SelectStatement();
DataTable aDT = aDS.Tables[0];
foreach (DataRow aDR in aDT.Rows){
if (txtAdminUsername.Text == aDR[0].ToString()){
if (txtAdminPassword.Text == aDR[1].ToString()){
Session["adminId"] = aDR[0];
Response.Redirect("Admin.aspx");
return;
}
}
}
Make sure that your FormCollection object properties for username and password are defined properly.
I had to use the name attribute on the text tag, and that solved my problem, is now working like a charm.
You have to use Ajax to do that.. Whenever you want to "submit" from client side, you should use Ajax to update the server
Step 1 - you redirect your Ajax call to your action, but with your list of parameters in the query-string appended
$.ajax(url: url + "?" + your_query_string_parameter_list_you_want_to_pass)
Step 2 - add optional parameters to your Controller-action with the same names and types you expect to get returned by the client
public ActionResult MyControllerAjaxResponseMethod(type1 para1 = null,
type2 para2 = null,
type3 para3 = null, ..)
Know that the optional parameters have to be initialized, otherwise the Action itself will always ask for those
Here's where the "magic" happens though --> MVC will automatically convert the query-string parameters into your optional controller-parameters if they match by name
I was also looking for a good answer for this, --> i.e. - one that doesn't use q-s for that usage, but couldn't find one..
Kinda makes sense you can't do it in any other way except by the url though..

Need uploadcontrol in a ajax.beginform using asp.net mvc3 html5 razor

I've been looking for a long time for this but I'm still stuck, I need to have an upload control where the user can upload a document and give additional information.
I've had to do this before without the upload control so what I do is I get an ajax.beginform that will give all the input from the user to the controller and than close the popup trough a onsucces function, so this looks like this:
view:
#using (Ajax.BeginForm("Save", "Documents", new AjaxOptions { HttpMethod = "Post", OnSuccess = "CloseDialog" }, new { #class = "form-inline", id = "FormId" }))
{
#Html.Label("Description", "Description")
<div class="span3">
#Html.TextBoxFor(m => m.Description)
</div>
}
I tried adding there an Html.BeginForm but then I found out that it is not possible to use nested forms so I deleted this.
In my controller I have:
public PartialViewResult Index(string description)
{
var model = new DocumentsModel{ Description = description};
return PartialView(model);
}
[HttpPost]
public ActionResult UploadFile(HttpPostedFileBase file, string description)
{
if (file != null && file.ContentLength > 0)
{
var fileName = Path.GetFileName(file.FileName);
var path = Path.Combine(Server.MapPath(#"D:\Documentds\"), fileName);
file.SaveAs(path);
}
return RedirectToAction("Index", new { description = description });
}
Ofcourse because the html.beginform won't work this controlleraction won't work either
So my question is how to do this without having to use a html.beginform?
You need to have the file upload inside the form and also the enctype="multipart/form-data" property on the form that calls uploadfile. That could be one problem.
Also, you could use JavaScript to submit the form you want from another part of the page without having them nested and keeping your design.

Categories