We Keep Coding

Load data initially when Blazor component is initialized; don't fire that query again when page is updated

I have a Blazor component that displays data from SQL in an unordered list.
The LoadData method is called by the OnInitialized() event and populates a List<T> (in this case, a list of ProjectModels). The data volume is large, therefore I only fetch the top 100 rows from SQL (meant as a preview).
I iterate over that list with a foreach and create a <li> for each element.
This works fine.
However, the page also contains a search box. Once the user enters a search string and clicks the search button, a different method is called that gets data from SQL again, this time filtering by the user-provided search term. The filtering is done in the SQL query. The query result is again used to populate the list of ProjectModels (it overwrites the first instance of the list).
I can see the new, filtered list for a millisecond, then the initial data pops back up. I guess this is because OnInitialized is triggered again, which contains the query that populates the list with the initial data.
This is what my component looks like:
#page "/projects"
<form>
<input type="search" placeholder="enter search term..." #bind-value="searchTerm">
<button type="submit" #onclick="GetSearchResults">Search</button>
</form>
<ul>
#foreach (var project in projects)
{
<li>#project.ProjectId</li>
<li>#project.ProjectTitle</li>
}
</ul>
#code {
private string searchTerm;
private List<ProjectModel> projects = new List<ProjectModel>();
protected override void OnInitialized()
{
projects = GetProjects(); //the method that loads the inital data
}
private void GetSearchResults()
{
projects = GetProjectsBySearchTerm(searchTerm);
}
}
How can I do this correctly? i.e.
Get the initial preview data on page load and put it in a <ul>
replace the data in the <ul> with the data that was queried based on the provided search term while avoiding that the initial load is triggered once the data changes.
C# and Blazor noob here, so please go easy and let me know if I need to provide more details.
thanks to all of you.

This is happening because of the form - your button is submitting the form, which causes the browser to reload the page.
Easiest fix - don't use a form on a SPA app, unless you really want to reload the page.

Both and Blazor and normal HTML. A submit button reloads the page. When the page is reloaded it launches the OnInitialize function. In blazor is better to use a normal button for it. In your code simply remove the type="submit" from your button. That will make it work. Additionally, you don't need to put it into a form since you won't be sending the form as a whole to the backend.
Change your code to this:
<div>
<input type="search" placeholder="enter search term..." #bind-value="searchTerm">
<button #onclick="GetSearchResults">Search</button>
</div>

I'm pretty sure you can just #bind instead of #bind-value. However, the problem is having form/submit. There's no reason to submit anything, as you're not sending data out of this page. Also, OnInitialized fires 2x if PreRender is on (which it is by default). If that really bothers you, then load your data in OnAfterRender and check for firstRender.

html: perform other actions after following a href link

Background
Here's what I want to happen:
A user is on one page1.html (jsFiddle).
When they click on one of the <a href...> links, I want to navigate to page2.html (jsFiddle) and simulate the user entering the number into the textbox and clicking on the button.
Example: On page1.html, user clicks on display 2. Then we will navigate to page2.html and get an alert of 2 (as if user had entered 2 and clicked the button).
Question
How do I do this?
Is there a way to make a C# method with a specific URL to navigate to, such as page2.html/searchfor/2?
Or is there some way in JavaScript to manually go about doing other things after navigating to <a href="page2.html">?
Things I've tried
Using a <span> with an onclick function, but then it's not a true link like <a href> where I can middle click to open in new tab and right click to follow link
Wrapping my first attempt in <a href> tags, like <span>Display 2</span>. This still doesn't solve the problem of performing extra actions after navigation.
Note
I am building this webpage using Entity Framework, ASP.NET MVC, and C#.
I have simplified the problem for discussion purposes, but the concept is the same.

Try using the page2.html document's onload() function. You can pass parameters through the URL, then take that data and perform "other actions" as soon as the document is loaded.

Web Crawling a Dynamic Form

I'm currently trying to spider a page that seems to have a dynamic form. First let me explain the form. The form has 3 radio dials above the search bar that has the first dial selected upon loading. I need the second dial selected. After selecting the second dial from the 3 dials I need to fill out the search bar which is actually a drop down,
in the inspector looks like
" id="*****" class="ui-autocomplete-input" type="text" size="60" name="*****" style="font-size:20px;width:90%;;" autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true">>"
Originally the html behind the search/submit button looks like
a id="submit_button" style="display:none;" href="#">
After selecting from the dropdown menu the html behind the search/submit button looks something like
a id="submit_button" style="" href="report.php?**=Mzg4MDU4NQ%3D%3D&**=MjQ1NDM2NQ%3D%3D">
Obviously the stars are there to keep the page anonymous. I'm using a Web client to spider this page.
All I need to grab from this page is the new href link which is dynamically changed after a item is selected from the drop down. I need to simulate this in C# and parse the href link. Frankly, I don't know where to even begin.
I have tried using a nameValueCollection to fill in this form using UploadValuesAsync() but no avail.

Calling Page Click event via User Control

I am working on a project in which I am binding Cart:
As shown in image I am populating my cart. Using User Control. And in User control I have populated that using One simple aspx form that is minicart. So now as you can see there is one button Checkout in That page. Which is populated through User Control but actaully its inside my minicart form. So now if I am trying to redirect using that Checkout link button. But that is not calling my click event rather its just postback the page.
Basically I want to call aspx page's click event through user control in my another aspx page.
I have tried to call that click event through many ways. But still page is only doing postback. I just want respose.redirect to my checkout page.
Even I have tried by using <a> also:
<a id="lnkcheckout" runat="server" href="javascript:return false;"
onclick="checkout_onclick">Checkout</a>
But not succeed..

Don't go for a server side for only redirecting you can take one achor tag also
<div align="right" style="padding-top: 10px;"> <a id="lnkcheckout" href="checkout1">Checkout</a> </div>
And it will work :) I hope this will help you

Try to use event.preventDefault() or use return false like ,
jQuery(function(){
jQuery(document).on('click','.morebutton', function(e){
e.preventDefault();
alert('ok');// you code in place of alert;
});
});

How do I send data to another screen after selection

I have a page where If you click a link, e.g. 'search' it will open a search page and you can then select an item from the gridview to use in the previous (parent) page.
I was wondering how I would go about sending back the information to the parent page and then refresh the parent page to fill in the other data?
I am guessing it will be some kind of javascript dynamically created in the code behind?

window.opener is the window that opened the current window.
So, if you popup a temporary window from some page, you can use window.opener from the popup window to reference the previous page objects or global variables in that page to put data back into the parent window.
Most web apps these days avoid popups because of the various popup restrictions in browsers. Instead, folks tend to use overlays in the same window which don't run afoul of popup blockers.
For example, from the popup window, you could do something like this:
window.opener.document.getElementById("result") = myHTML;
or:
window.opener.searchData.choice = "foo";
or:
window.opener.myFunc(data);

Use popup div showed when u change the value of the input , the necessary 2 steps : sending ajax data and receiving the data in the same page

The best way that I see is calling parent function from opener
I don't know which html has your popup page but maybe something like this:
//child
...
<table>
<tr>
<td>item 100</td> <td><input type="button" id="searchResult100" onclick="updateParent(100)"></td>
</tr>
</table>
...
function updateParent(id){
if(window.opener){
window.opener.updateData(id);
window.close();
}
}
I don't know how you want to use ID that is selected on the popup, you can hide all results that have different ID or put id inside some hiddenfield and do a postback to use the ID on the code behind. Need more information about the purpose.
//parent
...
function updateData(searchId){
// use searchId to update
}