i have created a web application in asp.net with C# and MySql Database at the backend called simple online shopping,
I have created a cascading dropdown horizontal navigation menu (navmenu) with unordered lists and html hyperlinks. i have 2 pages Homepage.aspx and ShowProducts.aspx.
Navmenu contains the categories in an hierarchy and the products and category data is stored in databases.
when a hyperlink is clicked on the navmenu i wanted the to show the products contained in the category in the ShowProducts.aspx
i have list item in unordered lists in navmenu in hierarchy of
1.Clothing
1.1:Mens
1.1.1:Shirts
1.1.2:Trousers
1.1.3:WinterWear
1.2:Womens
1.2.1:Casual Wear
1.2.2:Jeans
1.2.3 Bags
I have wrote the hyperlinks as:
<ul id="navmenu">
<li>Clothing
<ul class="sub1">
<li>Mens
<ul class="sub2">
<li>Shirts</li>
<li>Mens Trousers</li>
<li>Jeans</li>
<li>Winter wear</li>
<li>Watches & Bags</li>
<li>Footwear for men</li>
</ul>
</li>
<li>Womens
<ul class="sub2">
<li>Sarees & Dresses</li>
<li>Jewellery</li>
<li>Womens Jeans</li>
<li>Womens Bags</li>
<li>Footwear for Women</li>
</ul>
</li>
</ul>
</li>
I am using Devart linqconnect(Linq To MySql). some one told me to use querystrings to pass data between pages but it contains images and data so i wanted to use repeaters to show them in hiererchy. Could add an onlick handler to<a> tag so and write a javascript function
such as
<script type="text/javascript">
Function showproducts() {
-- Linq code to retrieve products based on id --
}
could anybody suggest a good method or tell how can i achieve this.
thanks.. please help me on this..
Use Repeater to render list of links on your page. Add query string value like ShowProduct.aspx?id=1 to every link.
On ShowProduct Page, use linq to retrieve data from DB:
using(DataContext db = new DataContext())
{
int id = Convert.ToInt32(Request.QueryString["id"]);
var product = db.products.Where(p => p.id = id).FirstOrDefault();
if(product != null)
{
//do your job here with product data
}
}
Related
I have a web application using jquery 3.2.1
On page load a PHP script is rendering the markup for the UI. This contains a list of categories and then tables of associated data.
As an example:
<!-- Category list -->
<ol>
<li>Foo (3)</li>
<li>Bar (19)</li>
<li>Baz (2)</li>
</ol>
And then various tables that are associated with these categories:
<p>Foo: 3 records</p>
<table id="fooTable">...</table>
<p>Bar: 19 records</p>
<table id="barTable">...</table>
<p>Baz: 2 records</p>
<table id="bazTable">...</table>
The markup above is generated on page load, via PHP. No JavaScript has been used at this point.
The tables are then updated via ajax calls - using jquery. I can obtain the total number of records that are returned in my ajax response.
But this got me thinking about how best to update parts of the UI where those numbers are referenced via jquery.
My "solution" to this was to wrap the appropriate numbers in a known class. Then in the ajax response, target this class and update the appropriate data. For example if we consider the "Foo" category, a known class (.foo-count) has been wrapped around the figures I want to update:
<!-- Category list -->
<ol>
<li>Foo (<span class="foo-count">3</span>)
<!-- ... -->
</ol>
<p>Foo: <span class="foo-count">3</span> records
<table id="fooTable">...</table>
So in my ajax .done() callback I can do things like this:
$('.foo-count').empty(); // Clear out the existing number (3 in this case)
var foo_count = ... // Variable to hold response data giving updated count.
$('.foo-count').html(foo_count);
This seems quite convoluted especially with multiple categories.
Is there a better solution for this type of issue?
My issue is probably very simple, but I am a complete beginner studying Javascript and I have a project where I am supposed to create an anime info web application by fetching data from an API.
I have an issue with a "genres" category. It is listed as an array with various items and item names which I need to have displayed in a 'Genres' column on my page.
Here is an example of some of the data I need to retrieve.
genres array data: https://imgur.com/a/pApGU59
And here is an example of what my current output looks like:
e.g. column output: https://imgur.com/a/1rRwG5L
If I am supposed to accomplish this by means of a forEach loop, what would be the proper syntax? And if there is another or a simpler way, an example of that would also be appreciated.
Here is an example of how I was printing data into their respectful columns through JavaScript.
<div className="col-md-8">
<h2>${movie.title}</h2>
<ul className="list-group">
<li class="list-group-item">
<strong>Japanese Title:</strong> ${movie.title_japanese}
</li>
<li class="list-group-item">
<strong>Genres:</strong> ${movie.genres}
</li>
<li class="list-group-item">
<strong>Type:</strong> ${movie.type}
</li>
<li class="list-group-item">
<strong>Premiered:</strong> ${movie.premiered}
</li>
<li class="list-group-item">
<strong>Episodes:</strong> ${movie.episodes}
</li>
</ul>
</div>;
Of course, using "movie.genres.name" returns 'undefined' and just using "movies.genres" would print many [object Object] results into said column.
I would just need the "name" item of the genres array to be automatically filled into my Genres column upon loading up a page.
movie.genres is an array and you will have to loop it to get each property
let output = "";
for(let i=0;i< movie.genres.length; i++){
output+= movie.genres[i].name;
}
I am struggling with passing all the data I need to a controller in MVC. The code is as follows:
<td><a href=#Url.Action("AddCourseToStudentPlan", "Users", new {
courseID = c.CourseId, userID = user.UserId, semNum = num}) title="Add Course
to Semester" >"Here"</a></td>
(currently num is defined as var num = 1;, which of course won't work.)
The course ID's and userID's are passing fine. these values are coming from a ViewBag essentially.
However, semNum is dependent on something entirely different:
<ul class="nav nav-tabs" id="Semtabs">
#{ var year = plan.CatalogYear; }
<li class="active">Fall #year</li>
#{ year += 1; }
<li class="">Spring #year</li>
<li class="">Fall 2014</li>
<li class="">Spring 2015</li>
<li class="">Fall 2015</li>
<li class="">Spring 2016</li>
<li class="">Fall 2016</li>
...
The intended output is that when the user clicks on one of the tabs, they see a list of courses that they have added, and are able to add courses to this tab by clicking on the link in the code previous code block. Therefore, clicking on a tab should change the value of num in the #Url.Action() method. But of course I can't do this because C# is server side.
So the problem is, how am I able to pass some variable semNum (which is determined client-side) to the #Url.Action() method after the page loads?
There are multiple ways to do it. This one is fairly intuitive and will not cause syntax errors in Visual Studio.
Create a URL template with the info you know.
When the link is clicked, look at the current state of the tabs.
Use that information to complete the URL.
Navigate as desired.
<!-- define a link/button, but don't set the URL -->
<a id="add-url-button">Add Course to Semester</a>
<!-- your existing tabs -->
<ul class="nav nav-tabs" id="Semtabs">
<li>Tab 1</li>
<li class="active">Tab 2</li>
<!-- etc. -->
</ul>
<script>
// Create a URL template
// It sounds like semNum is the only value that needs to vary,
// but you can create a template with multiple placeholders.
// We pass zero for semNum so that routes will still match without
// conflicting with a real semester number.
var addUrlTemplate = '#Url.Action("AddCourseToStudentPlan", "Users", new { courseID = c.CourseId, userID = user.UserId, semNum = 0 }';
// jQuery here for brevity (will work fine with vanilla JS)
var addButton = $("#add-url-button"),
tabs = $("#Semtabs");
addButton.click(function(){
// determine the selected tab by interrogating the list of tabs
var activeTab = tabs.find("li.active"),
semesterNumber = activeTab.attr("semester-numer");
// Construct the complete URL. Depending on the URL, you may need
// a smarter regex. Be sure that there is no chance of accidentally
// replacing the wrong value.
var addUrl = addUrlTemplate.replace(/0$/, semesterNumber);
// navigate as desired
window.location.href = addUrl;
));
</script>
Okay this seems fairly odd but i am allowing my users to create any number of category / subcategories they want
When i pull the category data out it might look something like this:
as you can see from the above example the sub categories can have subcategories this list tree could go on forever.
Now trying to make the menu i have a simple list:
<ul class="nav dker">
<li ui-sref-active="active">
<a ui-sref="app.ui.jvectormap" href="#/app/ui/jvectormap">
<span translate="aside.nav.components.ui_kits.VECTOR_MAP" class="ng-scope">Vector Map</span>
</a>
</li>
</ul>
The issue here is that i don't know how many times i have to repeat the subcategories which makes it impossible for me to know when to check for it?
i hope you know where im going with this how can i make a reliable list that follows the array pattern above when i don't know how many levels there are?
You are going to want to create a recursive template which will essentially look something like this:
<div data-ng-include="'displaySubcategory.html'"></div>
where displaySubcategory.html contains the ng-repeat and a recursive call to itself.
<div data-ng-repeat="category in category.subcategories">
<h1>{{category.name}}</h1>
<div data-ng-include="'displaySubcategory.html'"></div>
</div>
The idea is that everytime you call ng-repeat you are creating a scope around the child element, so a call to {{category}} will display the lowest level (current child) of the tree/data structure.
I have a table that is populating with ng-repeat, and I also have navigation button that change table data. Before I had custom filter on the data in html file, like so:
ng-repeat="car in carList | filter:tableFilter"
Even so it worked, it slowed my website, a lot. So now I am updating my table data in my controller. But there is another problem, ng-repeat do not want to update. So no matter how much I will update my data, the table will be still the same.
How can I fix that?
Here is my ng-repeat:
<tbody>
<tr ng-repeat="car in sortedCarList">
....
Here is my nav-bar:
<section class="tab" ng-controller="TablePanelCtrl as panel">
<ul class="nav nav-pills car-navigation">
<li ng-class="{ active: panel.isSelected(1)}">
<a href ng-click="panel.selectTab(1); initCarList(1); resetActiveRow(); formattedTable(2); hideTypeBox()">Sort by Reviews</a>
</li>
<li ng-class="{ active: panel.isSelected(2)}">
<a href ng-click="panel.selectTab(2); initCarList(2); resetActiveRow() formattedTable(2); hideTypeBox()">Sort by Rating</a>
</li>
</ul>
initCarList() changes the data according to tab number.
formattedTable() filters table data according to filter values that can be changes by user.
UPDATE:
my formatting function:
$scope.formattedTable = function(index){
$scope.initCarList(index);
$scope.sortedCarList = [];
var carlistLength = $scope.carList.length;
for (var i=0;i<carlistLength;i++){ // just check every row if values passes user requirements
var rowBool = $scope.tableFilter($scope.carList[i]);
if (rowBool){
$scope.sortedCarList.push($scope.carList[i]);
}
}
}
While I agree with cerbrus that we need to see a bit more of your code, I'll take a stab in the dark : you call formattedTable(2) in both tabs, which means that your filtering never changes.