My issue is very similar to my previous post:
How to bind a property to a dynamic list of objects
However I am trying to do the same thing that solved this problem in my previous post with a more complex control, an input file selector. Due to this, my question is very similar, however in this case I am guessing the fix is slightly different since the previous solution did not work. Anyhow here goes:
I am using the .net core 2.2 framework and am having trouble finding out how I can bind a list of IFormFile to a razor page. On the razor page I have a button to add a new file input to the screen. This button executes a jquery click event that alters the html to add a new input button of type file without refreshing the page. What I am looking to do with this, is that when I add a new button it binds the selected file to the List object. I can then process this list of items when I post the form.
My Razor Page cs looks something like this:
public class CreateModel : PageModel
{
#region Variables
private readonly MyContext _myContext;
#endregion
#region Properties
[BindProperty]
public List<IFormFile> Files { get; set; }
#endregion
public CreateModel(MyContext myContext)
{
_myContext = myContext;
}
public async Task<IActionResult> OnGetAsync()
{
#region Create instance of a FormFile for testing purposes
FormFile file;
using (var stream = System.IO.File.OpenRead("/test.txt"))
{
file = new FormFile(stream, 0, stream.Length, stream.Name, Path.GetFileName(stream.Name))
{
Headers = new HeaderDictionary(),
ContentType = "text/css",
};
}
Files.Add(file);
#endregion
return Page();
}
public async Task<IActionResult> OnPostAsync()
{
return Page();
}
}
The Razor Page cshtml looks something like this:
...
<div id="file-container">
#for (var i = 0; i < Model.Files.Count(); i++)
{
<div class="myfile">
<label class="control-label">Upload file</label>
<input asp-for="Files[i]" type="file" />
</div>
}
</div>
<div class="item-add">
<a id="add-file" class="link-button"><img class="add-file" src="#Url.Content("~/images/ic_add.png")" />Add File</a>
</div>
and finally here is my jquery code:
$("#add-file").click(function () {
var nextId = $(".file").length;
var rowHtml = '<div class="file">' +
'<label class="control-label">Upload file</label>' +
'<input id="Files_' + nextId + '_" name="Files[' + nextId + ']" type="file" />' +
'</div>';
$("#file-container").append(rowHtml);
});
Finally, when I post the form that contains this code, I want to be able to access the values input into the dynamically created html from my binded property.
If there is anything that is not understood please let me know and I will try clarifying.
So Apparently when you work with input files it appears that you don't use the [i] part as in normal cases. Below is the code that changed:
<div id="file-container">
#for (var i = 0; i < Model.Files.Count(); i++)
{
<div class="myfile">
<label class="control-label">Upload file</label>
<input asp-for="Files" type="file" />
</div>
}
</div>
and in jquery:
$("#add-file").click(function () {
var nextId = $(".file").length;
var rowHtml = '<div class="file">' +
'<label class="control-label">Upload file</label>' +
'<input id="Files" name="Files" type="file" />' +
'</div>';
$("#file-container").append(rowHtml);
});
Related
I have a grid which includes below hyperlink row,currently for all rows we have same hyperlink and only ID is changing and it is working fine.
<a href=" + #ViewBag.Url+ ID + " target='_blank'>Test</a>
Now for every row, we have different link url which i would get from action method when I pass ID.
I want to call MVC Action Method to get hyperlink url and then open it in another tab.How can I accomplish this?
I tried this one but it is not opening hyperlink?
<div class="row">
<div class="col-md-4">
Click Here;
</div>
</div>
public string GetPDFUrl(string id)
{
return "test.com" + id;
}
There are several ways to solve your problem. one of them is using child actions.
Put your generating URL part into a partial view to put your logic in your action method. So, create a child action method that can only be called in your views.
[ChildActionOnly]
public ActionResult GenerateUrlPartial(int id)
{
var generatedUrl = "";//your url business is here
var model = new UrlInfo { Url = generatedUrl };
return PartialView(model);
}
Then, create GenerateUrlPartial.cshtml partial view :
#model UrlInfo
#{
Layout = null;
ViewBag.Title = "GenerateUrlPartial";
}
<div class="row">
<div class="col-md-4">
Click Here;
</div>
</div>
And in your loop, call the action method like this :
#for (int i = 0; i < 10; i++)
{
Html.RenderAction("GenerateUrlPartial", new { id = i });
}
Hope this helps.
I have Get and Post partial Action. Get take me a list of image which I have in ma app.
[HttpGet]
public PartialViewResult ViewImageFileList()
{
IEnumerable<string> allImages = Directory.EnumerateFiles(Server.MapPath("~/Images/NBAlogoImg/"));
return PartialView(allImages);
}
Post delete image which I extra.
[HttpPost]
public PartialViewResult ViewImageFileList(string imageNameType)
{
var fileToDeletePath = Path.Combine(Server.MapPath("~/Images/NBAlogoImg/"), imageNameType);
if (System.IO.File.Exists(fileToDeletePath))
{
fileOperations.Delete(fileToDeletePath);
}
return PartialView();
}
My .chhtml of my partial view
#model IEnumerable<string>
<div class="name-block-style">
Логотипы которые имеются
</div>
<div id=team-logo-wrapper-images>
<ul>
#foreach (var fullPath in Model)
{
var fileName = Path.GetFileName(fullPath);
<li>
<div class="box-name-image">
<p class="image-name-type">#fileName</p>
<img src="#Url.Content(string.Format("~/Images/NBAlogoImg/{0}", fileName))"
class="logo-images" alt="Логотип команды"
title="Логотип команды" />
</div>
</li>
}
</ul>
<div id="delete-image-form" class="form-group">
#using (Ajax.BeginForm(
"ViewImageFileList",
"Team",
new AjaxOptions() { HttpMethod = "POST", OnComplete = "reloadPage()" }))
{
<label>Введите имя с указание типа изображения</label>
<input type="text" class="form-group" name="imageNameType" id="imageNameType" />
<input type="submit" value="Удалить" class="btn btn-primary" />
}
</div>
<script>
function reloadPage() {
location.reload();
}
</script>
My problem is Null references when I write the deleting image and submit it(i do it by ajax). I have this error Null reference but when I click to continue, the image deleted and my script to reload page work.
I want to understand why I take the null and how I can fix it, because it stops my app always when I delete an image.
The problem is that when you POST after you delete the image you don't populate the model of the partial view, as you do correctly in ViewImageFileList. This has a result when the View Engine try to build the view that you would send after the POST to the client, to get a null reference exception when try to perform the foreach on a null reference.
That being said, the thing you need is to pass to the PartialView all the images. So just add before the return statement in the action method you POST this:
var allImages = Directory.EnumerateFiles(Server.MapPath("~/Images/NBAlogoImg/"));
return PatialView(allImages);
When you browsing images you return view with model passed
return PartialView(allImages); //allImages is a model
But when you deleting images you return view without any model
return PartialView(); //need to pass a model
So after deleting you would like to redirect to ViewImageFileList to browse
all images
[HttpPost]
public RedirectToRouteResult ViewImageFileList(string imageNameType)
{
var fileToDeletePath = Path.Combine(Server.MapPath("~/Images/NBAlogoImg/"), imageNameType);
if (System.IO.File.Exists(fileToDeletePath))
{
fileOperations.Delete(fileToDeletePath);
}
return RedirectToAction("ViewImageFileList");
}
or retrieve images in delete action once again and pass the list to view
[HttpPost]
public PartialViewResult ViewImageFileList(string imageNameType)
{
var fileToDeletePath = Path.Combine(Server.MapPath("~/Images/NBAlogoImg/"), imageNameType);
if (System.IO.File.Exists(fileToDeletePath))
{
fileOperations.Delete(fileToDeletePath);
}
IEnumerable<string> allImages = Directory.EnumerateFiles(Server.MapPath("~/Images/NBAlogoImg/"));
return PartialView(allImages);
}
I'm trying to simplify creation of long forms with the following custom tag helper in .net Core 2.0:
#model ObApp.Web.Models.ViewComponents.FormFieldViewModel
<span>Debug - Paramater value: #Model.FieldFor</span>
<div class="form-group">
<label asp-for="#Model.FieldFor"></label>
<input asp-for="#Model.FieldFor" class="form-control" />
</div>
It seems simple, but I'm getting an unexpected (to me) result when I use:
<vc:form-field field-for="PersonEmail"></vc:form-field>
Expected Result
<span>Debug - Paramater value: PersonEmail</span>
<div class="form-group">
<label for="PersonEmail">Email</label>
<input name="PersonEmail" class="form-control" id="PersonEmail"
type="text" value="PersonEmail">
</div>
Actual Result
<span>Debug - Paramater value: PersonEmail</span>
<div class="form-group">
<label for="FieldFor">FieldFor</label>
<input name="FieldFor" class="form-control" id="FieldFor"
type="text" value="PersonEmail">
</div>
I've tried removing the quotes from around #Model.FieldFor, as well as a few other syntactic changes.
Any suggestions?
Thank you!
As was pointed out to me by others, it may not be possible to directly embed tag helpers the way I first desired when I posted this question. As a result I refactored the code to programmatically "new up" the desired tag helpers instead.
My final solution was significantly more work than I had expected but in the long run it will save lots of time developing the form-intensive applications I have planned.
The Objective
My goal is to speed-up creation of forms by using this custom tag helper, for example:
<formfield asp-for="OrganizationName"></formfield>
To generate these built-in Razor tag helpers:
<div class="form-group">
<div class="row">
<label class="col-md-3 col-form-label" for="OrganizationName">Company Name</label>
<div class="col-md-9">
<input name="OrganizationName" class="form-control" id="OrganizationName" type="text" value="" data-val-required="The Company Name field is required." data-val="true" data-val-maxlength-max="50" data-val-maxlength="Maximum company name length is 50 characters.">
<span class="field-validation-valid" data-valmsg-replace="true" data-valmsg-for="OrganizationName"></span>
</div>
</div>
</div>
My Initial Working Solution
This is the first-pass test solution for simple cases. I.e. for default hard coded classes and text-box input types.
using Microsoft.AspNetCore.Html;
using Microsoft.AspNetCore.Mvc.Rendering;
using Microsoft.AspNetCore.Mvc.TagHelpers;
using Microsoft.AspNetCore.Mvc.ViewFeatures;
using Microsoft.AspNetCore.Razor.TagHelpers;
using System.Collections.Generic;
using System.Threading.Tasks;
namespace ObApp.Web.TagHelpers
{
// Builds form elements to generate the following (for example):
// <div class="form-group">
// <div class="row">
// <input ... >Email</input>
// <div>
// <input type="text" ... />
// <span class="field-validation-valid ... ></span>
// </div>
// </div>
// </div>
public class FormfieldTagHelper : TagHelper
{
private const string _forAttributeName = "asp-for";
private const string _defaultWraperDivClass = "form-group";
private const string _defaultRowDivClass = "row";
private const string _defaultLabelClass = "col-md-3 col-form-label";
private const string _defaultInputClass = "form-control";
private const string _defaultInnerDivClass = "col-md-9";
private const string _defaultValidationMessageClass = "";
public FormfieldTagHelper(IHtmlGenerator generator)
{
Generator = generator;
}
[HtmlAttributeName(_forAttributeName)]
public ModelExpression For { get; set; }
public IHtmlGenerator Generator { get; }
[ViewContext]
[HtmlAttributeNotBound]
public ViewContext ViewContext { get; set; }
public override async Task ProcessAsync(TagHelperContext context, TagHelperOutput output)
{
// Replace this parent tag helper with div tags wrapping the entire form block
output.TagName = "div";
output.Attributes.SetAttribute("class", _defaultWraperDivClass);
// Manually new-up each child asp form tag helper element
TagHelperOutput labelElement = await CreateLabelElement(context);
TagHelperOutput inputElement = await CreateInputElement(context);
TagHelperOutput validationMessageElement = await CreateValidationMessageElement(context);
// Wrap input and validation with column div
IHtmlContent innerDiv = WrapElementsWithDiv(
new List<IHtmlContent>()
{
inputElement,
validationMessageElement
},
_defaultInnerDivClass
);
// Wrap all elements with a row div
IHtmlContent rowDiv = WrapElementsWithDiv(
new List<IHtmlContent>()
{
labelElement,
innerDiv
},
_defaultRowDivClass
);
// Put everything into the innerHtml of this tag helper
output.Content.SetHtmlContent(rowDiv);
}
private async Task<TagHelperOutput> CreateLabelElement(TagHelperContext context)
{
LabelTagHelper labelTagHelper =
new LabelTagHelper(Generator)
{
For = this.For,
ViewContext = this.ViewContext
};
TagHelperOutput labelOutput = CreateTagHelperOutput("label");
await labelTagHelper.ProcessAsync(context, labelOutput);
labelOutput.Attributes.Add(
new TagHelperAttribute("class", _defaultLabelClass));
return labelOutput;
}
private async Task<TagHelperOutput> CreateInputElement(TagHelperContext context)
{
InputTagHelper inputTagHelper =
new InputTagHelper(Generator)
{
For = this.For,
ViewContext = this.ViewContext
};
TagHelperOutput inputOutput = CreateTagHelperOutput("input");
await inputTagHelper.ProcessAsync(context, inputOutput);
inputOutput.Attributes.Add(
new TagHelperAttribute("class", _defaultInputClass));
return inputOutput;
}
private async Task<TagHelperOutput> CreateValidationMessageElement(TagHelperContext context)
{
ValidationMessageTagHelper validationMessageTagHelper =
new ValidationMessageTagHelper(Generator)
{
For = this.For,
ViewContext = this.ViewContext
};
TagHelperOutput validationMessageOutput = CreateTagHelperOutput("span");
await validationMessageTagHelper.ProcessAsync(context, validationMessageOutput);
return validationMessageOutput;
}
private IHtmlContent WrapElementsWithDiv(List<IHtmlContent> elements, string classValue)
{
TagBuilder div = new TagBuilder("div");
div.AddCssClass(classValue);
foreach(IHtmlContent element in elements)
{
div.InnerHtml.AppendHtml(element);
}
return div;
}
private TagHelperOutput CreateTagHelperOutput(string tagName)
{
return new TagHelperOutput(
tagName: tagName,
attributes: new TagHelperAttributeList(),
getChildContentAsync: (s, t) =>
{
return Task.Factory.StartNew<TagHelperContent>(
() => new DefaultTagHelperContent());
}
);
}
}
}
Next Steps/Suggested Improvements
This is working well for text boxes without validation errors. After tweaking the default CSS the next steps I plan to take are:
Display the correct CSS class attributes for formatting when there are validation errors. At this point the tag helper will be "working" for me.
Move the hard coded CSS classes out to a site configuration file.
Bind to HTML attributes in the view to allow non-default classes to be passed in. Another way to do this would be to pass in non-default form classes through the ViewModel.
Detect non-textbox input types and format accordingly.
Thank you to #Chris Pratt for getting me started in the right direction on this.
In .net core, you dont required # in asp-for="#Model.FieldFor" as below example
#model ObApp.Web.Models.ViewComponents.FormFieldViewModel
<span>Debug - Paramater value: #Model.FieldFor</span>
<div class="form-group">
<label asp-for="model.FieldFor"></label>
<input asp-for="model.FieldFor" class="form-control" />
</div>
I want to upload Pdf file into my application
So I have ViewModel (I post only relevant code)
public class SubcategoryViewModel
{
public HttpPostedFileBase PdfFile { get; set; }
[DisplayName("PDF")]
public string Pdf { get; set; }
}
Controller:
public async Task<string> CreateSubcategory(SubcategoryViewModel model)
{
string pdf = null;
if (model.Pdf != null)
{
pdf = Guid.NewGuid().ToString().Substring(0, 13) + "_" + model.File.FileName;
model.Pdf = pdf;
var path = Path.Combine(HttpContext.Current.Server.MapPath("~/Content/pdf"), pdf);
model.File.SaveAs(path);
}
var subcategory = new Subcategory
{
Pdf = pdf,
};
db.SubcategoriesList.Add(subcategory);
await db.SaveChangesAsync();
View:
#model Models.ViewModels.SubcategoryViewModel
#using (Html.BeginForm("Create", "Subcategory", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
<div class="form-group">
#Html.LabelFor(model => model.Pdf, new { #class = "control-label col-md-2" })
<div class="col-md-10 legend-size">
<input type="file" id="file" name="file" />
</div>
</div>
When I action post I don´t received nothing into model.Pdf, so into if (model.Pdf != null) validation it comes null, and I don´t know why
Anyone have idea why it occurs? Thankyou in advance!
You have 2 main issues. First the name of your file input is name="file", but that does not match the property in your model. It needs to be
<input type="file" name="PdfFile" />
Second, you never generate an input for property string Pdf so in the POST method, it will always be null and therefore the code inside your if (model.Pdf != null) will never be executed. However, what you really want is to save the file if its not null, so the code needs to be
public async Task<string> CreateSubcategory(SubcategoryViewModel model)
{
string fileName = null;
if (model.PdfFile != null && model.PdfFile .ContentLength > 0)
{
fileName = Guid.NewGuid().ToString().Substring(0, 13) + "_" + model.PdfFile.FileName;
string path = Path.Combine(HttpContext.Current.Server.MapPath("~/Content/pdf"), fileName);
model.PdfFile.SaveAs(path);
}
var subcategory = new Subcategory
{
Pdf = fileName ,
};
db.SubcategoriesList.Add(subcategory);
await db.SaveChangesAsync();
Side note: I would also recommend an additional property in your model for the files display name (i.e. the value of model.PdfFile.FileName) so that you can use that in your view rather than displaying the name prefixed with a Guid which would have little meaning to the user. Refer this answer for an example.
I think your problem is you are getting null value in PdfFile property of your model. This is because you have not given name attribute of file upload control same as you property. change name attribute of your file upload control to PdfFile.
<input type="file" id="file" name="PdfFile" />
How can I avoid a View being loaded using the cache ?
I tried putting the [OutputCache(Duration = 1)] before my method that returns the View through a ActionResult but without success.
[OutputCache(Duration = 1)]
public ActionResult Receita(string id, string periodo)
{
// Do my stuff
var receita = new ReceitaAssunto()
{
// More stuff
};
return View(receita);
}
When I pass a new value through the method's parameter, should exhibit this values in my View, but it haven't had refresh, always exhibit the old ones.
View
#model Dashboard.Domain.ClasseTipada.ReceitaAssunto
<ul class="list-group clear-list m-t">
#{
var i = 1;
foreach(var elemento in Model.ReceitaPorTipoReceita)
{
<li class="list-group-item fist-item">
<span class="pull-right">
<span id="txtTextoValorLocacao">#elemento.Valor.ToString("C", new System.Globalization.CultureInfo("pt-BR"))</span>
</span>
<span class="label label-success">#i</span>#elemento.DescricaoOrigem
</li>
i++;
}
i = 0;
}
</ul>
UPDATE
I saw the request using Firebug and the result it's exactly what I want, but it doesn't render in my View.
How I saw (take a look at the values), these values it's true only in the first page load
JS
$("#btnTrimestral").on("click", function () {
GeradorGrafico.URLJson = "#Url.Action("Receita", new { periodo = "trimestral" })";
GeradorGrafico.init();
});
put it into Global.asax.cs in Application_BeginRequest().
HttpContext.Current.Response.Cache.SetExpires(DateTime.UtcNow.AddDays(-1));
HttpContext.Current.Response.Cache.SetValidUntilExpires(false);
HttpContext.Current.Response.Cache.SetRevalidation(HttpCacheRevalidation.AllCaches);
HttpContext.Current.Response.Cache.SetCacheability(HttpCacheability.NoCache);
HttpContext.Current.Response.Cache.SetNoStore();