ASP .Net Core 6.0 Razor page contains a select component that I want to use for filtering the data presented on the page. The code behind processes for both get and post. Most of the get operation provides the list for for the Razor page filter selection. Two pieces of information need to be routed back to the getter. Everything tried so far will only send back one value or the other, not both. The button only sends the currentFilter. The onchange doesn't fire so the link never gets a valid #selectedFilter.
Section that provides the drop-down list:
<form method="get">
<div class="form-actions no-color">
<p>
Find by Department:
<select name="currentFilter" asp-for="#Model.DepartmentFilter" asp-items="#Model.DepartmentNameSL"
onchange="OnChangeMethod()">
<option value="">-- Department Filter --</option>
</select>
<input type="submit" value="Search" class="btn btn-primary" asp-route-id="#Model.Student.ID" />
<a asp-page="./Enroller" asp-route-id="#Model.Student.ID" asp-route-currentFilter="#selectedFilter" >Try Update List</a>
</p>
</div>
</form>
It is the code section on the page that brings me here. Documentation for Razor pages does not seem to support what my IDE will use. #{ ... } will allow code development. All example code uses #code { ... }, but the keyword 'code' is not recognized. In fact many keywords are not recognized; i.e. 'private', 'public', 'override' for example. Plus the code section has to come before the HTML or 'selectedFilter' is not recognized.
#{
string selectedFilter = string.Empty
//void OnChangeMethod(EventArgs e) => selectedFilter = e.ToString();
void OnchangeMethod()
{
selectedFilter = "selection made";
}
}
It is like I'm missing a package or documentation has not kept up with .Net 6, or .Net 6 dropped much of what used to be in prior versions or I am in some episode of the Twilight Zone and don't know it.
The HTML will get the value set in the code but it will not change it nor call the OnChangeMethod. It seems to me that the lines between Razor and Blazor are blurred and perhaps my difficulty lies there. So finding documentation that puts information in the right order would be helpful.
As it turns out the solution was very simple. What needed to take place was to include the target identifier "id" with the selected filter. The standard button for submit would then include both.
"{id:int?}"
route template was added after the #Page directive. Can't believe I missed it. But it would be helpful to know how to make the event calls work.
Related
Could sound simple to anyone who have used angular js 1.6. I am a beginner who needs to use ng-if tag on my view.html page to show hide a div based on a flag I receive from web api end in angular js 1.6.
The web api is developed using dot net framework and the frontend is using angular 1.6.
My tags are like:
<div class="form-group" ng-if="IsMyFlag == true">
<div class="col-sm-6">
<select class="form-control" ng-model="abcid" ng-options="xyz.SessionTypeId as xyz.SessionTypeName for xyz in xyzList" ng-disabled="IsFlgDisabled"></select>
</div>
</div>
Now here IsMyFlag is declared in the js file for the same view and it is also declared in the model at C# end.
Can someone help me out by telling how to read this IsMyFlag value in the if condition? Please?
I found the answer to this question, basically we need to set the property in the .js page if we want to use any property in the .view page in angularjs 1.6.
For setting the value, you need to assign it in .js file as
$scope.IsMyFlag = data.IsMyFlag;
where the data object contains the model value from the backend code/api code.
Thanks for your responses.
First please know that I have googled and tried everything that I have found. I have been through solution after solution and read dozens of Stack Overflow questions before posting this. I have no idea why this is not working. That being said I am not super familiar with the Method Handler stuff so I might be making a stupid mistake.
Implementation Details
- .NET Core 2.2
- Microsoft.AspNetCore.Razor.Design 2.2.0
- AngularJS.Core 1.7.8
I am creating an internal portal to aggregate Jenkins build and test data. I want to allow a build of the job that runs Jenkins tests to be kicked off via a button on the page. When I click the button I don't get any errors. I get nothing in the console and don't hit any breakpoints that would be hit if it actually fired the OnPost method.
I have tried using the OnPost and OnPostAsync methods. I have tried using the custom name via the asp-page-handler as well as the default names. I have tried putting the asp-page-handler tag on the form and the button. I have tried using a button and an input. Nothing seems to change the behavior.
The Header of my Razor Page
#page "{handler?}"
#using JenkinsRazorApi.Pages
#using System.Linq;
#using System.Data;
#using System.Web;
#model FslModel
#{
ViewData["Title"] = "fsl";
}
My cshtml markup
<div>
<form method="POST">
<input type="submit" class="btnKickOffBuild" name="kickOffBuild" id="btnKickOffBuild" asp-page-handler="BuildClick" value="Build"/>
</form>
</div>
My method in my model (The PostToApi method is Async which is why I am using the Async version of OnPost)
public void OnPostBuildClickAsync()
{
apiClientCalls.PostToApi("FslSmokeTest", "BuildKickOff");
}
My OnGetAsync method fires when the page loads without issue. Everything that happens in that method works. I am able to reference the Model in the normal Razor fashion so the model is accessible and tied to the page. I just can't get the OnPost method in my Model to fire when I click the btnKickOffBuild button.
If someone could please point me in the right direction I would really appreciate it.
*************EDIT**********************
I tried making the OnPostBuildClickAsync method actually Async and I tried it how I have it above and took the Async off the method name to no avail.
I also tried, as a test, turning all of the Anti-Forgery stuff that is tied to the Razor framework off globally just to rule that out. That didn't work either.
I tried doing this a completely different way by adding the method to my Angular scope wrapped in a javascript function that should only fire if the button is clicked but since it is a server side # tag it runs on page load regardless of the condition in the function.
*************EDIT**********************
This boils down to an Angular thing.
As per the "Submitting a form and preventing the default action" section in the following Link:
https://docs.angularjs.org/api/ng/directive/form
Angular requires an action tag to submit the form to the server. Without it the form is prevented from submitting. I altered my cshtml to:
<div>
<h5 style="margin-left: 50px; float:left;">Test Pass/Fail</h5>
<form method="post" action="">
<button type="submit" class="btnKickOffBuild" asp-page-handler="BuildClick">Build</button>
</form>
</div>
Of particular note is the action="". This forces Angular not to block the submission of the form to the server.
The following question has some detail around Angular Actions also:
ng-action does not add action attribute in the form
Edited:
I have found the root cause of it. You need to create a Razor ViewImport file and import all the razor dependencies in that file. That ways you can use the taghelpers in the application
I'm running into trouble with Selenium when it comes to XING's groups. The solution I was using for more than two years to this very date does not work anymore; they must have changed something about their HTML.
The main problem is that a certain select element doesn't open (when trying to open it by clicking it) and I hence cannot access the options to "click" or to select. I see a small border embracing the drop down, as if it was clicked but didn't function in second place.
Now that I've spent quite some time on elaborating on the error, I'm quite sure this is because the same (meaning the same attributes, ...) drop down exists on the same page at another point (to sort/filter posts shown by groups). However, I want to select the (sub) forum that a new post is submitted to, and this does not work.
I tried many, many, many different things of which none worked, obviously. I'm unable to list all of my attempts here since it's simply too much and partly too long ago. Some of what I tried:
select the drop down by various methods (CSS Selector, class name, XPath, ...)
access the desired option of the drop down directly (by CSS Selector, class name, XPath; even tried to collect arrays of all elements and select the right one by index, didn't work either)
access the desired option of the drop down directly by JavaScript and 'click' it by JS
And now SO is my hope. I thought of a way to select -exactly- this drop down (rather than the other one described) by child elements and so on (this is the reason for the title of this question).
This is the HTML:
<div class="comm-navigation forum-select is-open" id="new-post-forum-select" data-is-open="true">
<a href="#" class="comm-navigation-trigger">
<span class="comm-navigation-name" title="Select forum">Select forum</span>
<i class="comm-navigation-icn-closed foundation-icon-shape-arrow-down"></i>
<i class="comm-navigation-icn-open foundation-icon-shape-arrow-up"></i>
</a>
<ul class="comm-navigation-dropdown hidden" style="width: 519px; display: block;">
<li class="comm-navigation-group forum-list">
<ul>
<li class="comm-navigation-item">
<a href="/communities/forums/100941274" class="comm-navigation-forum" data-forum-id="100941274" data-forum-name="Members" title="Members">
Members
</a>
</li>
<li class="comm-navigation-item">
<a href="/communities/forums/100941276" class="comm-navigation-forum" data-forum-id="100941276" data-forum-name="Q & A" title="Q & A">
Q & A
</a>
</li>
<li class="comm-navigation-item">
<a href="/communities/forums/100941275" class="comm-navigation-forum" data-forum-id="100941275" data-forum-name="Feedback" title="Feedback">
Feedback
</a>
</li>
</ul>
</li>
</ul>
<input type="hidden" name="post[forum_id]" id="post_forum_id" value="">
</div>
I thought of perhaps going from comm-navigation forum-select is-open (which is the same when it's still closed without is-open) to the inner elements to get the right Chrome element and then click the option.
Also, I found that there's a hidden field:
<input type="hidden" name="post[forum_id]" id="post_forum_id" value="">
Which is exactly related to my problem; value is empty as long as nothing's selected, as soon as selected, the forum's id is inserted into the value. This I could imagine if there wasn't any JS that prevents you from submitting the form without having actually selected the sub forums by drop down.
Looking forward to great solutions.
If I understood the question, then first you need to click on the span inside the first link (class=comm-navigation-trigger) with the text "Select Forum". This makes the "ul" below to be visible. Now you need to click the desired "li" inside this list. If so then read on.
Find the span with the css selector - "div[id='new-post-forum-select'] > a[class='comm-navigation-trigger'] > span". Click on this element.
Wait for the list to become visible. Use the css selector - "div[id='new-post-forum-select'] > ul[class*='comm-navigation-dropdown']". Use the ElementIsVisible ExpectedCondition. Though you may or not require this step, added this as a check.
Find the link with the required value - "div[id='new-post-forum-select'] > ul[class*='comm-navigation-dropdown'] a[class='comm-navigation-forum'][data-forum-name='Q & A']". Click on this.
I am currently working on a form. In the form, if there is not an item needed you can click the add button and it takes you to a new form where you can add the item. Instead of my view going to another page, I want it to pop up above the form so that the user can just quickly add the item and not have to travel pages.
Here is a snipit from my Create.cshtml
<div class="form-group">
<label asp-for="INT_CertificationsID" class="col-md-2 control-label"></label>
<div class="col-md-3">
<select asp-for="INT_CertificationsID" class ="form-control" asp-items="ViewBag.INT_CertificationsID"></select>
</div>
<a class="btn btn-default" asp-area="" asp-controller="INT_Certifications" asp-action="Create">Add Certification</></a>
</div>
When the add certification attribute is clicked I would like a box to pop up to the Create.cshtml for the certification. So that they may quickly add it to the list and continue to fill out the form.
I have looked up several examples to do this but most of them are either too old, too long, or don't work in .netcore due to nuget package errors with JqueryUI.
You need to make a controller method that returns the page you want in the popup as a PartialView.
I think you mean modal and not "popup"... you need to use a modal mechanism to create a modal window and get (or post) your partial via AJAX and use the result to display in the modal window.
I like bootbox which is a wrapper for bootstraps modal functionality.
I would load partial view in a hidden div together with the pages that needs them and dynamically display them with JavaScript when needed. Don't use forms to send http request, instead use AJAX.
Using pop-ups can work against you because browsers comes by default with pop-up blockers. Might work on your devbox but it could have a completely different behaviour somewhere else.
Using forms to send request requires the page to be reloaded which does not provide a good user experience.
Fix your solution, don't use nugget for client side script. Use bower instead. Here's a link https://learn.microsoft.com/en-us/aspnet/core/client-side/
So I'm trying to write a bit of code that takes in a video from YouTube and adds it to a list. I'm doing this by passing in a url to a form and passing it to the controller. However, nothing happens.
View:
<form asp-action="addVideo" asp-controller="Video" validate="validate">
<input name="vidUrl" type="url" placeholder="Search for a video" required="required"/>
<input type="submit" value="Search"/>
</form>
Controller:
public ActionResult addVideo(string vidUrl)
{
//Do stuff...
return RedirectToAction("Index");
}
I have tried debugging addVideo, but submitting the form never triggered the breakpoint. The resulting url looks like http://(domain)/Video?vidUrl=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DdTDy8XVdRSk
Is there a reason that the view isn't calling the controller?
Update:
I know what's causing the issue. It's definitely the asp-action and asp-controller tags. I have a navbar up on top of my web page that previously was controlled by razor statements like #Html.ActionLink("Home","Index","Home"). I tried switching this link to a set of anchor tags with the same controller and action values, but it has no effect on the website. Is this an issue with packages?
Found it, html tag helpers are a core feature, which my ide Xamarin does not support nor does it multitarget. I guess switching back to Visual Studio will suffice.