I am experiencing a very strange issue with Razor2 views. The code below is the actual code on which intellisense is throwing down the red squiggly, just names have been changed.
#model Space.ViewModels.PropertyAdminViewModel
#{
ViewBag.Title = "Create";
ViewBag.UmbracoTitle = "Create Property";
Layout = "../Shared/_Layout.cshtml";
InitView();
AnalysePreviousState();
SortErrorsPerStep();
GetStepToDisplay();
}
<script src="../../Scripts/jquery-1.8.2.min.js"></script>
<script src="../../Scripts/jquery.validate.min.js"></script>
<script src="../../Scripts/jquery.validate.unobtrusive.min.js"></script>
<script src="../../Scripts/AdminScripts.js"></script>
#Html.ValidationSummary(ErrorMessage)
#using (Html.BeginForm())
{
#Html.Hidden("CurrentStep", StepToDisplay.ToString(), new { id="CurrentStep"})
<input id="AddressButton" type="submit" name="#Button.AddressButton.ToString()" value="Address Details" />
<input id="DetailsButton" type="submit" name="#Button.DetailsButton.ToString()" value="Details & Description" />
<input id="MediaButton" type="submit" name="#Button.MediaButton.ToString()" value="Images & Documents" />
switch (StepToDisplay)
{
case Step.Address:
Html.RenderPartial("_AddressDetailsForm", ViewData.Model.Address);
break;
case Step.Details:
Html.RenderPartial("_PropertyDetailsForm", ViewData.Model);
break;
case Step.Media:
Html.RenderPartial("_MediaUploadEditForm", ViewData.Model.MediaItems);
break;
}
<input id="BackButton" type="submit" name="#Button.BackButton.ToString()" value="Back" />
<input id="NextButton" type="submit" name="#Button.NextButton.ToString()" value="Next" />
<input id="FinishButton" type="submit" name="#Button.FinishButton.ToString()" value="Finish" />
} <-- `SQUIGGLY`
#{
private enum Button
{
None,
AddressButton,
DetailsButton,
MediaButton,
NextButton,
BackButton,
FinishButton,
CancelButton
}
public enum Step
{
Address,
Details,
Media,
UpperBound
}
private const Step AddressStep = Step.Address;
private const Step DetailsStep = Step.Details;
private const Step MediaStep = Step.Media;
private const Step First_Step = AddressStep;
private const Step Last_Step = MediaStep;
private const string CurrentStep = "CurrentStep";
private const string DisabledAttribute = "disabled='disabled'";
private string BackButtonState = string.Empty;
private string NextButtonState = string.Empty;
private string ErrorMessage = "Please correct the errors and try again.";
private Button ButtonPressed = Button.None;
private Step PreviousStepDisplayed = AddressStep;
private Step StepToDisplay = AddressStep;
private ModelStateDictionary[] StepModelState = new ModelStateDictionary[(int)Step.UpperBound];
private void InitView()
{
// Create a ModelState for each individual step
for (int key = (int)First_Step; key <= (int)Last_Step; key++)
{
StepModelState[key] = new ModelStateDictionary();
}
}
/// <summary>
/// Check form variables from the last HTTP_POST to figure where the wizard needs to be
/// Grab the current step string along with which button was pressed
/// </summary>
private void AnalysePreviousState()
{
if (!string.IsNullOrEmpty(Request[CurrentStep]))
{
PreviousStepDisplayed = (Step)Enum.Parse(typeof(Step), Request[CurrentStep], true);
}
if (!string.IsNullOrEmpty(Request[Button.FinishButton.ToString()]))
{
ButtonPressed = Button.FinishButton;
}
if (!string.IsNullOrEmpty(Request[Button.CancelButton.ToString()]))
{
ButtonPressed = Button.CancelButton;
}
if (!string.IsNullOrEmpty(Request[Button.NextButton.ToString()]))
{
ButtonPressed = Button.NextButton;
}
if (!string.IsNullOrEmpty(Request[Button.BackButton.ToString()]))
{
ButtonPressed = Button.BackButton;
}
if (!string.IsNullOrEmpty(Request[Button.AddressButton.ToString()]))
{
ButtonPressed = Button.AddressButton;
}
if (!string.IsNullOrEmpty(Request[Button.DetailsButton.ToString()]))
{
ButtonPressed = Button.DetailsButton;
}
if (!string.IsNullOrEmpty(Request[Button.MediaButton.ToString()]))
{
ButtonPressed = Button.MediaButton;
}
}
/// <summary>
/// Sort all modelstate errors into the right step
/// </summary>
private void SortErrorsPerStep()
{
foreach (KeyValuePair<string, ModelState> entry in ViewData.ModelState)
{
foreach (int key in Enum.GetValues(typeof(Step)))
{
//Compare the start of each error's key with the name of a step
//if they match then that error belongs to that step
if (entry.Key.StartsWith(((Step)key).ToString()))
{
StepModelState[key].Add(entry);
break;
}
}
}
ViewData.ModelState.Clear();
}
/// <summary>
/// Look at the previous step to get any errors and which button was clicked
/// and decide which step needs to be displayed now
/// </summary>
private void GetStepToDisplay()
{
//if the user tried to jump steps or finish, display the first step that has errors
//this ensures that the wizard is completed in the intended sequence
if (ButtonPressed != Button.NextButton && ButtonPressed != Button.BackButton)
{
ErrorMessage = "There are errors in the data provided. Please correct the errors and try again.";
for (Step key = First_Step; key <= Last_Step; key++)
{
if (!StepModelState[(int)key].IsValid)
{
DisplayStep(key, true);
return;
}
}
}
//if the last step has errors and the user has not hit the back button then stay on page and show the errors
//user can go back through steps but not forward until errors are resolved
if (!StepModelState[(int)PreviousStepDisplayed].IsValid && ButtonPressed != Button.BackButton)
{
DisplayStep(PreviousStepDisplayed, true);
return;
}
//Otherwise move as per user request
Step stepToDisplay = PreviousStepDisplayed;
switch (ButtonPressed)
{
case Button.BackButton:
stepToDisplay--;
break;
case Button.NextButton:
stepToDisplay++;
break;
case Button.AddressButton:
stepToDisplay = AddressStep;
break;
case Button.DetailsButton:
stepToDisplay = DetailsStep;
break;
case Button.MediaButton:
stepToDisplay = MediaStep;
break;
}
stepToDisplay = (Step)Math.Max((int)stepToDisplay, (int)First_Step);
stepToDisplay = (Step)Math.Min((int)stepToDisplay, (int)Last_Step);
DisplayStep(stepToDisplay, false);
}
private void DisplayStep(Step stepToDisplay, bool displayErrors)
{
StepToDisplay = stepToDisplay;
BackButtonState = stepToDisplay == First_Step ? DisabledAttribute : string.Empty;
NextButtonState = stepToDisplay >= Last_Step ? DisabledAttribute : string.Empty;
//page number
if (displayErrors)
{
foreach (KeyValuePair<string, ModelState> entry in StepModelState[(int)stepToDisplay])
{
ViewData.ModelState.Add(entry.Key, entry.Value);
}
}
}
}
When I hover over Viewbag I get the usual intellisense popup, and hovering on Title explains the normal 'evaluated at runtime'.
Has anyone run into this issue? I have looked over other questions but they all had code typos or genuine mistakes. I know it's not an assembly reference issue otherwise Intellisense wouldn't know what the Viewbag is.
UPDATE
It looks like Intellisense is having a problem specifically dynamic assignments. Normal server code does not experience the above issue, whereas anything like Viewbag assignments or specifying the layout within #{//code here} seems broken. Also note that this only occurs on one of my .cshtml files and the others are unaffected.
UPDATE 2
This is the result of testing the view. Source file is the generated code file in ASP.NET temp files.
Compiler Error Message: CS1513: } expected
Source Error:
Line 259: #line default
Line 260: #line hidden
Line 261:WriteLiteral("\r\n");
Line 262:
And this is the code relating to the above error in the compiled temp file:
WriteLiteral(" value=\"Finish\"");
WriteLiteral(" /> \r\n");
#line 46 "F:....Create.cshtml"
} <-- see the brace!? It's right there so why does the compiler freak out?
#line default
#line hidden
WriteLiteral("\r\n");
You need this:
#switch (StepToDisplay)
It's seeing the closing switch brace as the close to your earlier one. You may even need to enclose the switch in a razor code block #{ switch(){} }
As an aside, if you were using ReSharper, it would highlight the actual block of code it things it is, and you would see where Razor is thinking the end of the block would be.
EDIT:
It should look like this:
#using (Html.BeginForm())
{
// remove the # from before the Html on this line
Html.Hidden("CurrentStep", StepToDisplay.ToString(), new { id="CurrentStep"})
// This html causes razor to switch back to "html mode"
<input id="AddressButton" type="submit" name="#Button.Step1Button.ToString()"...
...
// Add an # here, because razor is now in Html mode
#switch (StepToDisplay)
{
...
}
// Back in html mode again, so we need #'s
<input id="BackButton" type="submit" name="#Button.BackButton.ToString()"...
...
}
I had no idea that you can't write normal c# code into Razor views.
Related
I am building the number input component in blazor an i just can't figure it out how to prevent the input to change on mousewheeel up/down. I have parameter 'DisableMouseWheel' in if true i want to prevent the number input for going up or down if mouse wheel is turned. If 'DisableMouseWheel' is true and the mouse wheel is turned it does skip the StepUp/StepDown methods but still change the value. Is there any options to solve this without javascript
I use also the 'Disabled' and 'Readonly' parameters for the input
My code
<input type="number"
step="1"
disabled="#Disabled"
readonly="#Readonly"
#onmousewheel="#OnMouseWheel"
#onwheel="#OnMouseWheel"
#bind-value="#_value" />
protected async Task OnMouseWheel(WheelEventArgs args)
{
if (DisableMouseWheel == false)
{
if (args.ShiftKey || Disabled || Readonly)
return;
if (args.DeltaY > 0)
{
await StepUp();
}
else
{
await StepDown();
}
} else
{
args.DeltaY = 0;
}
}
EDIT --> SOLUTION:
In this case i need to disable the #onkeydown:preventDefault and then handle everything in onkeydown event
You can use #oninput event of the checkbox. I implemented your code with that, and it works correctly.
<input type="checkbox" #oninput="ChangeMouseWheel"/>prevent the input to change on mouse wheel
<br/>
<input type="number"
step="1"
disabled="#Disabled"
readonly="#Readonly"
#onmousewheel="#OnMouseWheel"
#onwheel="#OnMouseWheel"
#bind-value="#_value"/>
#code section:
#code
{
bool DisableMouseWheel,Disabled,Readonly;
int _value=0;
protected async Task ChangeMouseWheel(ChangeEventArgs e)
{
DisableMouseWheel = (bool)e.Value;
//StateHasChanged();
}
protected async Task OnMouseWheel(WheelEventArgs args)
{
if (DisableMouseWheel == false)
{
if (args.ShiftKey || Disabled || Readonly)
return;
if (args.DeltaY > 0)
{
await StepDown();
}
else
{
await StepUp();
}
} else
{
args.DeltaY = 0;
}
}
protected async Task StepUp()
{
_value++;
}
protected async Task StepDown()
{
_value--;
}
}
Here's what I imagine I need:
<input type="text" #bind="this.ConceptSearch" #bind:event="oninput" />
#code {
private string _ConceptSearch = "";
private string ConceptSearch {
get {
return this._ConceptSearch;
}
set {
this._ConceptSearch = value;
this.PopulateSuggestions();
}
}
}
Is there a way to cut out the middle man (the property) and just directly call some code?
Using #onchange instead of #bind to solve it
In my .razor page I have an InputText, what I want is to update that number as soon as it is being typed, specifically is to put a space every 4 characters, how am I trying to do it?
<InputText #bind-Value="oPagos.NumeroEnTarjeta" #onkeydown="#Tecleando" type="number"
onchange="()=>NumberChanged()" id="card-number" placeholder="1111 2222 3333 4444" class="input" maxlength="16" />
Then,
public void Tecleando(KeyboardEventArgs e)
{
//Console.WriteLine(e.Key);
oPagos.NumeroEnTarjeta = generateSpaces(oPagos.NumeroEnTarjeta);
Console.WriteLine(oPagos.NumeroEnTarjeta);
}
I have a function where I plan to take all the value from the bind, ie: oPayments.NumberOnCard, and every 4 spaces generate a space.
This does not work for me for two reasons.
the first number that I type is taken from the #Onkeydown event but the variable oPagos.NumeroEnTarjeta is empty.
I don't know how to update the value of the InputText, as I show in the following image I effectively modify the variable oPagos.NumeroEnTarjeta, but I can't get the user to see it rendered in the text box.
Should I take another way or how do I fix what I have? Thank you.
Update
I succeeded in doing something similar, but with two different events, onblur and onfocus.
I use onfocus to remove the spaces and I use onblur to add my spaces, however, what I would like to do is while I'm writing
I got some Problems with Dynamic Data using Bind-Value / Bind so i started using Blazorise and solve my problems, a possible solution is this one:
<Field>
<TextEdit Text="#opagos.NumeroEnTarjeta" TextChanged="#MethodThatBringSpaces"></TextEdit>
<Field>
Then in #code
Task MethodThatBringSpaces(string value){
opagos.NumeroEnTarjeta = generateSpaces(value);
}
Also you can use the data that you want (i use string in this case) and you can add the same things than blazor (id,placeholder,etc.)
Here's a set of code which I think does basically what you want. It was written to answer a similar question on here a few months ago! I've used dashes instead of spaces to show the space being filled. It's was coded in Net6.0 but should be Ok in Net5.0.
You will probably need to tweak it a little to fit your exact needs:
CreditCardCode.razor
#namespace StackOverflowAnswers.Components
#inherits InputBase<string>
<input #attributes="AdditionalAttributes"
class="#CssClass"
value="#stringValue"
#oninput="OnInput"
#onchange="this.OnValueChanged"
#onfocus="OnFocus"
#onblur="OnBlur"
/>
CreditCardCode.razor.cs
using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Forms;
using Microsoft.AspNetCore.Components.Web;
using System.Text.RegularExpressions;
namespace StackOverflowAnswers.Components;
public partial class CreditCardCode : InputBase<string>
{
private string stringValue = String.Empty;
private string _currentValue = String.Empty;
// Sets up the initial value of the input
protected override void OnInitialized()
{
_currentValue = this.Value ?? string.Empty;
this.stringValue = this.GetCodeValue(_currentValue);
base.OnInitialized();
}
private async Task OnInput(ChangeEventArgs e)
{
var rawValue = e.Value?.ToString();
stringValue = "";
await Task.Yield();
_currentValue = this.GetCodeValue(rawValue ?? string.Empty);
this.stringValue = this.FormatValueAsString(_currentValue);
}
private async Task OnFocus(FocusEventArgs e)
{
stringValue = "";
await Task.Yield();
this.stringValue = this.FormatValueAsString(_currentValue);
}
private async Task OnBlur(FocusEventArgs e)
{
stringValue = "";
await Task.Yield();
this.stringValue = this.GetCodeValue(_currentValue);
}
// We set the base CurrentValueAsString to let it handle all the EditContext changes and validation process
private void OnValueChanged(ChangeEventArgs e)
=> this.CurrentValueAsString = e.Value?.ToString() ?? string.Empty;
// Necessary override for InputBase
protected override bool TryParseValueFromString(string? value, out string result, out string validationErrorMessage)
{
result = value ?? string.Empty;
if (!string.IsNullOrEmpty(value) && value.Length == 19)
{
validationErrorMessage = string.Empty;
return true;
}
else
{
validationErrorMessage = "Value must be nnnn-nnnn-nnnn-nnnn";
return false;
}
}
protected override string FormatValueAsString(string? value)
=> value ?? string.Empty;
private string GetCodeValue(string value)
{
value = new string(value.Where(c => char.IsDigit(c)).ToArray());
value = value.Length > 16
? value.Substring(0, 16)
: value;
var reg = new Regex(#"([0-9]{1,4})");
var matches = reg.Matches(value);
var outvalue = string.Empty;
if (matches.Count > 0)
{
foreach (Match match in matches)
{
outvalue = $"{outvalue}-{match.Value}";
}
outvalue = outvalue.Trim('-');
return outvalue;
}
return string.Empty;
}
}
Test Page
#page "/"
#using StackOverflowAnswers.Components
<h3>EditForm</h3>
<div class="container-fluid">
<EditForm EditContext=editContext>
<div class="row">
<div class="col-2">
Credit Card No:
</div>
<div class="col-4">
<CreditCardCode class="form-control" #bind-Value="this.model.CreditCardNo"/>
</div>
<div class="col-4">
<ValidationMessage For="() => this.model.CreditCardNo" />
</div>
</div>
</EditForm>
<div class="row">
<div class="col-2">
Credit Card No:
</div>
<div class="col-4">
#model.CreditCardNo
</div>
</div>
</div>
#code {
private EditContext? editContext;
private ModelData model = new ModelData();
protected override Task OnInitializedAsync()
{
this.editContext = new EditContext(model);
return Task.CompletedTask;
}
class ModelData
{
public string CreditCardNo { get; set; } = string.Empty;
}
}
I have the following method in a cshtml file. It simply expands into two label elements. The first is a plain label element. The second however, uses a tag helper:
async Task field(string str)
{
<label for="#str">#str</label>
<label asp-for="#str">#str</label>
}
Here's how I have it defined in the cshtml file along with calling it once:
#{
{
async Task field(string str)
{
<label for="#str">#str</label>
<label asp-for="#str">#str</label>
}
await field("abc");
}
}
If I 'view source' on the result, I see the following:
<label for="abc">abc</label>
<label for="str">abc</label>
Note that the #str argument was properly passed and used in the first case but was not in the second case. So it seems that there's an issue in passing the argument to the tag-helper variant here.
Any suggestions on how to resolve this?
In my opinion, the argument has been passed the tag-helper variant successfully. But the the label asp-for attribute will be rendered as the for attribute with asp-for ModelExpression's name value(str) not the value ModelExpression's model(abc).
According to the label taghelper source codes, you could find the tag helper will call the Generator.GenerateLabel method to generate the label tag html content.
The Generator.GenerateLabel has five parameters, the third parameter expression is used to generate the label's for attribute.
var tagBuilder = Generator.GenerateLabel(
ViewContext,
For.ModelExplorer,
For.Name,
labelText: null,
htmlAttributes: null);
If you want to show the str value for the for attribute, you should create a custom lable labeltaghelper.
More details, you could refer to below codes:
[HtmlTargetElement("label", Attributes = "asp-for")]
public class ExtendedAspForTagHelper:LabelTagHelper
{
public ExtendedAspForTagHelper(IHtmlGenerator generator)
: base(generator)
{
}
public override int Order => -10000;
//public override void Process(TagHelperContext context, TagHelperOutput output)
//{
// base.Process(context, output);
// if (!output.Attributes.TryGetAttribute("maxlength", out TagHelperAttribute maxLengthAttribute))
// {
// return;
// }
// var description = $"Only <b>{maxLengthAttribute.Value}</b> characters allowed!";
// output.PostElement.AppendHtml(description);
//}
public override async Task ProcessAsync(TagHelperContext context, TagHelperOutput output)
{
if (context == null)
{
throw new ArgumentNullException(nameof(context));
}
if (output == null)
{
throw new ArgumentNullException(nameof(output));
}
var tagBuilder = Generator.GenerateLabel(
ViewContext,
For.ModelExplorer,
For.Model.ToString(),
labelText: null,
htmlAttributes: null);
if (tagBuilder != null)
{
output.MergeAttributes(tagBuilder);
// Do not update the content if another tag helper targeting this element has already done so.
if (!output.IsContentModified)
{
// We check for whitespace to detect scenarios such as:
// <label for="Name">
// </label>
var childContent = await output.GetChildContentAsync();
if (childContent.IsEmptyOrWhiteSpace)
{
// Provide default label text (if any) since there was nothing useful in the Razor source.
if (tagBuilder.HasInnerHtml)
{
output.Content.SetHtmlContent(tagBuilder.InnerHtml);
}
}
else
{
output.Content.SetHtmlContent(childContent);
}
}
}
}
}
Improt this taghelper in _ViewImports.cshtml
#addTagHelper *,[yournamespace]
Result:
I am very new to MVC
I need some help to over come the issue of passing parameter to a controller on form submit
what i have got is the following controller and the view
public ActionResult Index(string method ="None")
{
if (Request.HttpMethod == "POST")
{
switch (method)
{
case "Add10":
_bag.GetBag = Get100Products().Take(10).ToList<Product>();
break;
case "Clear":
_bag = null;
_bag.GetBag = null;
_bag = new Models.Bag();
break;
case "Add":
if ((Request.Form["Id"] != null) && (Request.Form["Id"] != ""))
{
if (_bag.GetBag.Count < 100)
{
var p = GetProduct(Request.Form["Id"]);
int qnt = Convert.ToInt16(Request.Form["qnt"]);
if (p.ItemNumber != null)
{
p.Quantity = qnt;
p.Index++;
_bag.Item = p;
}
}
}
break;
}
}
return View(_bag.GetBag);
}
and the view part of the view
<div style="vertical-align:middle">
#using (Html.BeginForm("", "Home", new { method = "Add10" }, FormMethod.Post))
{
<!-- form goes here -->
<input type="submit" value="Add 10 Items to bag" />
}
#using (Html.BeginForm("GetDiscount", "Home", FormMethod.Post))
{
<div>
<!-- form goes here -->
<input type="submit" value="Get Discount" />
With MAX time in seconds <input type="text" name="time" maxlength="2" value="2" />
</div>
}
#using (Html.BeginForm("", "Home", new { method = "Clear" }, FormMethod.Post))
{
<input type="submit" value="Empty the bag" />
}
</div>
so i am expecting when the use clicked button Add 10 Items to bag to pass the method value "Add10" to the index controller and when clicked Empty the bag to pass "Clear" the method value in index controller
but it always shows as "None"
what have I done wrong?
</form>
First of all, you have to add [HttpPost] to your controller in order to accept POST requests:
[HttpPost]
public ActionResult Index(string method ="None")
{
You should differentiate GET and POST actions.
You can do like this:
// [HttpGet] by default
public ActionResult Index(Bag bag = null)
{
// "bag" is by default null, it only has a value when called from IndexPOST action.
return View(bag);
}
[HttpPost]
public ActionResult Index(string method)
{
// Your logic as specified in your question
return Index(_bag.GetBag);
}
EDIT:
Your code is wrong, for example you will get a NullReferenceException because your try to call a property on a null object (_bag):
_bag = null;
_bag.GetBag = null; // NullReferenceException: _bag is null!
Also your code would be cleaner and more easier to maintain if we split this Action into several actions and follow the technology philosophy.
Do you consider refactoring this piece of code into smaller and more understandable chunks?