querystring parameters are not working in API

osyris zosar

5y738Learn iOS Programming

I am trying to connect the Front-end(reactjs) with the asp net core API

Front-end

async getFilterData() {
this.setState({ tableLoading: true });
const TitleFIlter = document.getElementById("TitleFIlter").value
const descriptionFilter = document.getElementById("DescriptionFilter").value
const priceminFIlter = document.getElementById("PriceMin").value
const pricemaxFIlter = document.getElementById("PriceMax").value
console.log(" title =" + TitleFIlter);
console.log("description = " + descriptionFilter);
console.log(" PriceMin =" + priceminFIlter);
console.log("PriceMax = " + pricemaxFIlter);
const url = `api/upload/${TitleFIlter}/${descriptionFilter}/${priceminFIlter}/${pricemaxFIlter}`
const response = await axios.get(url)
const data = await response.data;
this.setState({
allproducts: data,
tableLoading: false
});
console.log(data);
}

this is my backend(asp net core API):

HttpGet]
[Route("{Title?}/{Description?}/{Pricemin?}/{Pricemax?}")]
public async Task> GetFilter([FromQuery]
string Title,
string Description,
int PriceMin,
int PriceMax
)
{
IQueryable products = _context.products;
if (!string.IsNullOrEmpty(Title))
products = products.Where(x => x.Title.ToLower().Contains(Title.ToLower()));
if (!string.IsNullOrEmpty(Description))
products = products.Where(x => x.Description.ToLower().Contains(Description.ToLower()));
if (PriceMin > 0)
products = products.Where(x => x.Price >= PriceMin);
if (PriceMax > 0)
products = products.Where(x => x.Price <= PriceMax);
return await products.ToListAsync();
}

Anytime I dont fill in all the filter inputs I get a 404 error

How do i solve this

4 Replies

Know the answer? Post it — somebody with the same question will find it here.

osyris zosar5y ago
It seems as if my Getfilter action is not responding whatsoever
I have chance the url in the front-end to:
const url = `api/Upload/?Title=${TitleFIlter}&Description=${descriptionFilter}&Pricemin=${priceminFIlter}&Pricemax=${pricemaxFIlter}`;
I also chanced the Getmethod in reactjs to a Fetch instead of axios
entire reactjs (frontend- code):
async Getfilter1() {

    const TitleFIlter = document.getElementById("TitleFIlter").value;
    const descriptionFilter = document.getElementById("DescriptionFilter").value;
    const priceminFIlter = document.getElementById("PriceMin").value;
    const pricemaxFIlter = document.getElementById("PriceMax").value;

    const url = `api/Upload/?Title=${TitleFIlter}&Description=${descriptionFilter}&Pricemin=${priceminFIlter}&Pricemax=${pricemaxFIlter}`;

    const response = await fetch(url);
    const data = await response.json();
    this.setState({
        allproducts: data,
        tableLoading: false
    });

}
the inputs:
<div id="filtersection" style={this.state.filters ? FilterTrue : Filterfalse}>
                   <div className="FilterBloks" style={{width: "20%"}} >
                       <label>Title:label>
                       <input type="text" id="TitleFIlter"  />
                   div>

                   <div className="FilterBloks" style={{ width: "15%" }}>
                       <label>Description:label>
                       <input type="text" id="DescriptionFilter" />
                   div>

                   <div className="FilterBloks" style={{ width: "10%" }}>
                       <label>Price min:label>
                       <input type="text" id="PriceMin" />
                   div>

                   <div className="FilterBloks" style={{ width: "10%" }}>
                       <label>Price max:label>
                       <input type="text" id="PriceMax" />
                   div>

                   <div className="FilterBloks" style={{ width: "10%" }}>
                       <label>Quantity:label>
                       <input type="text" id="QuantityFilter" />
                   div>

                   <div className="FilterBloks" style={{ width: "20%" }}>
                       <button className="searchButton" onClick={() => this.Getfilter1() }>Searchbutton>
                   div>
I think im doing something wrong in the frond-end but im not sure what.
please help me out.
Sachin Singh5y ago
test this
[Route("{Title?}/{Description?}/{Pricemin?}/{Pricemax?}")]
        public async Task> GetFilter([FromQuery]
         string Title,
         string  Description,
            int PriceMin,
            int PriceMax
            )
        {
            IQueryable products = _context.products.where(x=>x.Title.ToLower().Contains(Title.ToLower())||x.Description.ToLower().Contains(Description.ToLower())||x.Price >= PriceMin||x.Price <= PriceMax);



            return await products.ToListAsync();
        }
osyris zosar5y ago
Both doesnt work,
still get error 404
Jishan Siddique5y ago
Can you please check this one I believe it's worked for you just change the Route to HttpGet?

[HttpGet("{Title?}/{Description?}/{Pricemin?}/{Pricemax?}")]

else if you are plan to go with Route then check with this

[Route("upload/{Title?}/{Description?}/{Pricemin?}/{Pricemax?}")]