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.
I want to click a website submit button using my c# window application
<p><input type="submit" value="Send" class="wpcf7-form-control wpcf7-submit"/></p></div>
https://www.devpundit.com/contact/ - check this page to see the submit button
It seems like it is calling ajax or javascript call to submit the button.
now how to do this.
I have tried the below 2 option but not working
webBrowser2.Document.GetElementById("wpcf7-submit").InvokeMember("click");
HTMLInputElement submit = (HTMLInputElement)pass.all.item("wpcf7-form-control wpcf7-submit", 0);
First - you are telling the computer to grab the button by its ID, but instead of using the ID, you are putting the class-name where the ID goes. I inspected the element on that page and did not see an "ID" for that element. So let's use what the website gave us.
https://www.w3schools.com/jsref/met_document_getelementsbyclassname.asp
This will give you a list of all the elements that share that class. So instead of
webBrowser2.Document.GetElementById("wpcf7-submit").InvokeMember("click");
please try
Edit: So it turns out there is no GetElementsByClassName in the C# WebBrowser. Another approach instead would be recognizing that the button has a value of "send". The "value" is an attribute, and can be accessed in C#.
You can run a for-loop through the elements in the page and check which input elements have the value "send". It's a bit crude, but it should work.
//Create list of HtmlElement objects
//Populate list with all elements with tag name 'input'
HtmlElementCollection elementList = webBrowser2.Document.GetElementsByTagName("input");
//loop through the items in elementList, match the one with value set to 'send'
foreach (HtmlElement currentElement in elementList)
{
if (currentElement.GetAttribute("value") == "Send")
{
currentElement.InvokeMember("click");
}
}
I am working on Mobile Store Management System's Order page. I want to allow users to select a company through a select list, and then select multiple models of that company from another select list which is loaded dynamically through AJAX.
The code for the cascading models is working, but I am unable to send the selected models to the server because it is adding them in the DOM through JavaScript.
The following is the code for the cascading selection:
<div class="form-group row">
<label class="control-label col-6">Company Name</label>
<div class="col-12">
<select id="CompanyId" class="custom-select mr-sm-2"
asp-items="#(new SelectList(
#ViewBag.Companies,"Phoneid","Com_name"))">
<option value="">Please Select</option>
</select>
</div>
<span class="text-danger"></span>
</div>
<div class="form-group row">
<label class="control-label col-6"></label>
<div class="col-12">
<select id="modelId" multiple class="custom-select mr-sm-2"
asp-items="#(new SelectList(string.Empty,"modelId","model_name","--Select--"))">
<option value="">Please Select</option>
</select>
</div>
<span class="text-danger"></span>
</div>
<div>
<input type="button" id="saveBtn" value="Save" />
</div>
Cascading Code:
$("#CompanyId").change(async function()
{
await $.getJSON("/Order/GetAllModels",{ PhoneId: $("#CompanyId").val()},
function(data)
{
$("#modelId").empty();
$.each(data, function (index, row) {
$("#modelId").append("<option value='" + row.modelId + "'>" +
row.model_name + '</option>')
});
});
}
Once the Save button is clicked, I am displaying the product for the currently selected models using a partial view:
$('#saveBtn').click(function () {
$.ajax({
url: '/Order/GetProduct?Phoneid=' + $("#CompanyId").val() + "&modelId=" + $('#modelId').val(),
type: 'Post',
success: function (data) {
$('#products').append(data);
},
})
})
Problem 1
When the user selects the first company and their two models, and then clicks the Save button, the partial view loads with indexes i=0,i=1. Then, the user selects another company and selects their models. Again, the partial view renders with same indexes. How can I make the indexes unique? This partial view is rendered when the user clicks the Save button, which renders only the current company's selected models.
#model List<Mobile_Store_MS.ViewModel.Orders.Products>
<table class="table">
<tbody>
#for (int i = 0; i < Model.Count; i++)
{
<tr class="card d-flex">
<td>
<input asp-for="#Model[i].isSelected" />
</td>
<td>
<input hidden asp-for="#Model[i].Phoneid" /> <input hidden asp-for="#Model[i].modelId" />
#Html.DisplayFor(modelItem => Model[i].com_Name) #Html.DisplayFor(modelItem => Model[i].model_name)
</td>
<td>
<input asp-for="#Model[i].Quantity" />
</td>
<td>
<input class="disabled" readonly asp-for="#Model[i].price" />
</td>
</tr>
}
</tbody>
</table>
Problem 2
How can I send all of the items rendered through the partial view to the server? I just want to send these selected products along with the quantity and price for each model to the server. This means binding these items in the product list of the OrderViewModel.
You can find my OrderViewModel and Products model in the following diagram:
Can you tell me how to bind Razor items into a list to post to the controller? I would be very grateful if you give me some suggestions.
Related
Link of my Previous Question
Sample of my order page
TL;DR: Instead of relying on the asp-for tag helper, you can set your own name attribute. This gives you the flexibility to start the index at whatever number you want. Ideally, you will pass the number of existing products to GetProduct() and start indexing off of that. In addition, you also need to prefix your name attribute with Products, thus ensuring those form elements are properly bound to your OrderViewModel.Products collection on post back.
<input name="Products[#(startIndex+i)].Quantity" value="#Model[i].Quantity" />
You can then filter the OrderViewModel.Products collection on the server-side using LINQ to limit the results to selected products:
var selectedProducts = c.Products.Where(p => p.IsSelected);
For a more in-depth explanation of how this approach works, as well as some of the variations in the implementation, read my full answer below.
Detailed Answer
There's a lot going on here, so this is going to be a lengthy answer. I'm going to start by providing some critical background on how ASP.NET Core MVC connects the dots between your view model, your view, and your binding model, as that will better understand how to adapt this behavior to your needs. Then I'm going to provide a strategy for solving each of your problems.
Note: I'm not going to write all of the code, as that would result in me reinventing a lot of code you've already written—and would make for an even longer answer. Instead, I'm going to provide a checklist of steps needed to apply the solution to your existing code.
Background
It's important to note that while ASP.NET Core MVC attempts to standardize and simplify the workflow from view model to view to binding model through conventions (such as the asp-for tag helper) these are each independent of one another.
So when you call asp-for on a collection using e.g.,
<input asp-for="#Model[i].Quantity" />
It then outputs the something like the following HTML:
<input id="0__Quantity" name="[0].Quantity" value="1" />
And then, when you submit that, the server looks at your form data, and uses a set of conventions to map that data back to your binding model. So this might map to:
public async Task<IActionResult> ProductsAsync(List<Product> products) { … }
When you call asp-for on a collection, it will always start the index at 0. And when it bind the form data to a binding model, it will always start at [0] and count up.
But there's no reason you need to use asp-for if you need to change this behavior. You can instead set the id and/or name attributes yourself if you need flexibility over how they are generated.
Note: When you do this, you'll want to make sure you're still sticking to one of the conventions that ASP.NET Core MVC is already familiar with to ensure data binding occurs. Though, if you really want to, you can instead create your own binding conventions.
Problem 1: Setting the index
Given the above background, if you want to customize the starting index returned from your call to GetProducts() for your second model, you‘ll want to do something like the following:
Before calling GetProduct(), determine how many products you already have by e.g. counting the number of elements with the card class assigned (i.e., $(".card").length).
Note: If the card class is not exclusively used for products, you can instead assign a unique class like product to each tr element in your _DisplayOrder view and count that.
Include this count in your call to GetProduct() as e.g., a &startingIndex= parameter:
$('#saveBtn').click(function () {
$.ajax({
url: '/Order/GetProduct?Phoneid=' + $("#CompanyId").val() + "&modelId=" + $('#modelId').val() + "&startingIndex=" + $("#card").length,
type: 'Post',
success: function (data) {
$('#products').append(data);
},
})
})
[HttpPost]
public IActionResult GetProduct(int Phoneid, string[] modelId, int startingIndex = 0) { … }
Relay this startingIndex to your "partial" view via a view model; e.g.,
public class ProductListViewModel {
public int StartingIndex { get; set; }
public List<Product> Products { get; set; }
}
Use that value to offset the index written to the output:
<input id="#(Model.StartingIndex+i)__Quantity" name="[#(Model.StartingIndex+i)].Quantity" value="#Model.Products[i].Quantity" />
That's not as tidy as asp-for since you're needing to wire up a lot of similar information, but it offers you the flexibility to ensure that your name values are unique on the page, no matter how many times you call GetProduct().
Notes
If you don't want to create a new view model, you could relay the startingIndex via your ViewData dictionary instead. I prefer having a view model that includes all of the data I need, though.
When using the asp-for tag helper, it automatically generates the id attribute, but if you're not ever referencing it via e.g. JavaScript you can omit it.
Browsers will only submit values to the server for form elements that have a name attribute. So if you have input elements that are needed on the client-side but aren't needed in the binding model, for some reason, you can omit the name attribute.
There are other conventions besides {Index}__{Property} that you can follow. But unless you really want to get into the weeds of model binding, you're best off sticking to one of the existing collection conventions.
Be careful of your indexing!
In the Model Binding conventions for collections, you'll notice a warning:
Data formats that use subscript numbers (... [0] ... [1] ...) must ensure that they are numbered sequentially starting at zero. If there are any gaps in subscript numbering, all items after the gap are ignored. For example, if the subscripts are 0 and 2 instead of 0 and 1, the second item is ignored.
As such, when assigning these, you need to make sure that they're sequential without any gaps. If you're using the count (.length) of existing e.g. $(".card") or $(".product") elements on your page to seed the startingIndex value, however, then that shouldn't be a problem.
Problem 2: Sending these values to the server
As mentioned above, any form element with a name attribute will have its data submitted to the server. So it doesn't really matter if you're using asp-for, writing out your form manually using HTML, or constructing it dynamically using JavaScript. If there's a form element with a name attribute, and it's within the form being submitted, it will get included in the payload.
Debugging your form data
You're likely already familiar with this, but if not: If you use your browser's developer console, you'll be able to see this information as part of the page metadata when you submit your form. For instance, in Google Chrome:
Go to Developer Tools (Ctrl+Shift+I)
Go to the Network tab
Submit your form
Click on the name of your page (normally the first entry)
Go to the Headers tab
Scroll down to the Form Data section (or Query String Parameters for a GET request)
You should see something like:
[0].isSelected true
[0].Phoneid 4
[0].modelId 10
[0].Quantity 5
[0].price 10.50
[1].isSelected true
[…]…
If you're seeing these in Chrome, but not seeing these data reflected in your ASP.NET Core MVC controller action, then there's a disconnect between the naming conventions of these fields and your binding model—and, thus, ASP.NET Core MVC doesn't know how to map the two.
Binding Problems
There are two likely issues here, both of which might be interfering with your data binding.
Duplicate Indexes
Since you are currently submitting duplicate indexes, that could be causing collisions with the data. E.g., if there are two values for [0].Quantity, then it will retrieve those as an array—and may fail to bind either value to e.g. the int Quantity property on your Products binding model. I haven't tested this, though, so I'm not entirely sure how ASP.NET Core MVC deals with this situation.
Collection Name
When you bind to a List<Products> with the asp-for tag helper, I believe it will use the [i].Property naming convention. That's a problem because your OrderViewModel is not a collection. Instead, these needs to be associated with the Products property on your binding model. That can be done by prefixing the name with Products. This will be done automatically if you use asp-for to bind to a Products property on your view model—as proposed on the ProductListViewModel above. But since you need to dynamically generate the name's based on the IndexOffset anyway, you can just hard-code these as part of your template:
<input id="Products_#(Model.StartingIndex+i)__Quantity" name="Products[#(Model.StartingIndex+i)].Quantity" value="#Model.Products[i].Quantity" />
Selected Products
There's still a problem, though! This is going to include all of your products—even if they weren't otherwise selected by the user. There are a number of strategies for dealing with this, from dynamically filtering them on the client, to creating a custom model binder that first validates the Products_[i]__isSelected attribute. The easiest, though, is to simply allow all of them to be bound to your binding model, and then filter them prior to any processing using e.g. LINQ:
var selectedProducts = c.Products.Where(p => p.IsSelected).ToList();
…
repo.SetProducts(selectedProducts);
For the 1st question, you can try different things. When you do the ajax call, you get a list of models. For each of these models, add the selected company ID as a property. So you don't have to worry about the index being something unique.
As for the 2nd question, should be a relatively easy thing to do. However, more information is needed.
1. When the save button is hit, are you doing a full postback? or it is also an AJAX call?
2. Why do you not want to opt for a AJAX call to do the update as well? So you can based upon the response, redirect the user to a results page, etc.
If you can create a small sample in a new project, and upload to github, and post the information here. I should be able to take a look and understand better. I will definitely be able to help.
Also try reading this thread, it might help
how to persist partial view model data during postback in asp.net mvc
For an existing site, I have to pass values in hidden fields from a form that's loaded by different pages (eg. City1.aspx, City2.aspx, City3.aspx, etc.), but they are loaded inside an iframe. I also have to dynamically change the value of at least one of those hidden field (let's call it "source") based on the city page loading it. I am familiar with PHP and JavaScript/JQuery, but I have no idea how to do this in C#.
I've found tutorials on retrieving the file name (sans extension) via JavaScript. I think I can still get the city even if the form is in an iframe, but I'd like to keep to the site's conventions and use C# if possible.
Code snippets or links to possible solutions would be much appreciated.
if you want modify the value of your input in c# associated to your aspx (Code behind), you must to add attributes runat=server to your input.
use this code in your aspx
<input id="test" type="hidden" runat="server"/>
and in your c#
test.Value = 123; //your value is 123 for example
Disclaimer, I don't know JQuery, so there could be easier ways to do this. I also haven't tested any code...
If you know the exact ID then you can do something like this from the parent page (in a javascript block):
var frame = document.getElementById('myIFrame');
var ctrl = frame.document.getElementById('myControl');
ctrl.value = "New Value";
If you don't know the exact ID's of the controls in the CityX.aspx pages, then you will either need a way for those ID's to be discovered, or you will need to go through all controls within the iframe looking for the correct one. (I say this because if the controls in the iframe pages are held in any sort of ASP.NET structure they will not be called txtMyCtrl (for instance) but possibly something like ct00_txtMyCtrl.)
If you don't know the EXACT control name (because of the ASP.NET structure I mentioned before), you could do something like:
var frame = document.getElementById('myIFrame');
var ctrls = frame.document.getElementByTagName("INPUT");
for(var i=0;i<ctrls.length;i++){
if(ctrls[i].getAttribute("type")=="hidden" && ctrls[i].id.indexOf("_myControl") != -1){
ctrls[i].value = "New Value";
break;
}
}
Or if you have the ability to update the CityX.aspx pages, then you could have the following in the CityX.aspx page:
function getCtrls(){
return [document.getElementById("<%=hiddenCtrl.ClientID%>"),
document.getElementById("<%=anotherHiddenCtrl.ClientID%>")];
}
... and then in your parent page, something like:
var frame = document.getElementById('myIFrame');
var ctrls = frame.document.getCtrls();
for(var i=0;i<ctrls.length;i++){
ctrls[i].value = "New Value";
}
They're just ideas on a general theme
What's the best way to approach the following situation in asp.net mvc2 (c#):
I have a form where a user can add more fields ... for example I ask user the details of personal computing devices that they have. For simplicity sake let's say I ask for the brand and type (dropdown list of Desktop/Laptop/Tablet/Other) and they can provide unlimited devices. I will start with a pair of text boxes:
<label>Type</label>
<select><option>Desktop</option><option>Laptop</option><option>Tablet</option><option>Other</option></select>
<label>Brand</label>
<input type="text" />
<input type="button" value="Add more device" />
And then as user click the "Add more device" button I will display another pair of Brand and Type text boxes ... and so on.
My question is how should I use HTML helper for this, how I construct the viewModel, etc.
I am from PHP background and I used to use the following in PHP:
<input type="text" name="brand[]" />
which on the back end will give me an array of brands ... not sure if that's doable in asp.net environment. I would appreciate any input. Thank you.
[I added the following lines to make my question clearer]
I think I have not been very clear with my question.
Suppose I have the following viewmodel:
public class UserRegisterViewModel
{
public string DeviceBrand { get; set; }
public string DeviceType { get; set; }
}
That works well when I have two text boxes:
<%: Html.TextBoxFor(m => m.DeviceBrand) %>
<%: Html.TextBoxFor(m => m.DeviceType) %>
but the situation that I am facing is I need to allow user to add more pair of device brand and type text boxes ... user should be able to add as many as he needs to.
How should I write my viewmodel and view?
I hope this makes my question a bit clearer. I don't have problem in hiding and showing the text boxes (and yes I use JQuery for that).
Thank you.
In C#, like C++ arrays are fixed sizes. You can however use a List<> to do something similar. It allows you to dynamically add data with an add function. Like so:
List<object> name = new List<object>();
name.Add(an_object);
So say a list of strings:
List<string> myStrings == new List<string>();
myStrings.Add("Blah");
They're accessed just like arrays - Console.WriteLine(myStrings[0]) outputs Blah
Depending on scenarion there are following solutions:
If you already know which Textboxes will be shown add them in your page and set their visiblity to false (like in CSS "display:none") And show them later.
If you dont know in advance which textboxes will be shown you can still append them in HTML DOm (Add it to your page's controls collection)
To show them there are two apporaches:
In first case Either use jQuery or Javascript to show them back.
In first case Use can also do it from server side that will result in whole page post back.
In second Apporach Also you can use jQuery or Javascript to add new textboxes in the form
In second case you can add new boxes from your C# code on server but again it will result in whole page post back.
Use any approach that best suits you
What you can do is having UserRegister as Model and have UserRegisterViewModel
whith List property
Then in your view you can have loop to render your viewmodel list property
in a foreach for example in C#
Lets say you have your ViewModel defined as:
public class BrandListViewModel
{
public List<UserRegisterViewModel> Brands {get;set;}
}
Your View would need to output HTML as:
<select name="Brands[0].DeviceType">...</select>
<input type="text" name="Brands[0].DeviceBrand"/>
and
<select name="Brands[1].DeviceType">...</select>
<input type="text" name="Brands[1].DeviceBrand"/>
You need to keep the index going so that the model binder can construct your list in the correct order. Now, you could use jQuery to do this and as you append items to the page just get a count and increment by one. If you want to remove a single one, you need to rename all of the fields.
You could also use a pure jQuery method, parse the elements, push items to an array and send the array to the server.