Mvc Identity 2.0 with AngularJs - c#

i have a razor syntax who verify that user is administrator, and inside it i want to add a angular syntax who display all users with roles, but if i do that ,the page doesn't display anything, if I put angular syntax outside of razor, it works but everybody can see the users ...
<div class="container">
#if (User.Identity.IsAuthenticated && User.IsInRole("administrator"))
{
<tbody>
<tr ng-repeat="item in usersAndRolesList | filter : search">
<td style="padding-top:17px;width:50%">{{item.username}}</td>
<td style="padding-top:17px;width:30%">{{item.roles}}</td>
<td><button class="btn btn" style="background-color:transparent"><i class="fa fa-pencil fa-2x" aria-hidden="true"></i></i> </button></td>
<td><button class="btn btn" style="background-color:transparent"><i class="fa fa-trash-o fa-2x" aria-hidden="true"></i> </button></td>
</tr>
</tbody>
}}

Related

Datalist not displaying items ASP.NET

I have a serious problem with data list I HATE IT so much. I have a list of data that displays cart items in a table.. basic right?
Sure, but not for data list! its like data list says I MUST DESTROY YOU. The data list does not show any items that I should display!
Here are some screenshots that will let you understand my issue here.
So basically the items are displayed in VS, but in the web application it doesn't.
PLEASE HELP :(
Here is the code:
<div class="container-sm cart-page">
<table>
<tr>
<th>المنتج</th>
<th>الكمية</th>
<th>السعر الفرعي</th>
</tr>
<asp:DataList ID="DataList1" runat="server" RepeatColumns="1" RepeatLayout="Flow">
<ItemTemplate>
<tr>
<td>
<div class="cart-info">
<img src="http://bestjquery.com/tutorial/product-grid/demo8/images/img-1.jpg" alt="camera">
<div>
<p>Camera 211</p>
<small>السعر: 50 ر.س.</small>
<br>
حذف
</div>
</div>
</td>
<td>
<input type="number" value="1" min="1" max="10"></td>
<td>50 ر.س.</td>
</tr>
</ItemTemplate>
</asp:DataList>
</table>
<div class="total-price">
<table>
<tr>
<td class="titles">السعر الفرعي</td>
<td>150 ر.س.</td>
</tr>
<tr>
<td class="titles">VAT</td>
<td>22.50 ر.س.</td>
</tr>
<tr>
<td class="titles">المجموع</td>
<td>172.50 ر.س.</td>
</tr>
<tr>
<td>
<a href="store.aspx">
<button type="submit" class="btn btn-primary btn-continue-shopping">إكمال التسوق</button>
</a>
</td>
<td>
<a href="checkout.aspx">
<button type="submit" class="btn btn-primary btn-checkout">إكمال الدفع</button>
</a>
</td>
</tr>
</table>
</div>
</div>
You need to set the DataSource property with some list or table of data.
Here is a link to the MSDN article: https://learn.microsoft.com/en-us/dotnet/api/system.web.ui.webcontrols.basedatalist.datasource?view=netframework-4.8#System_Web_UI_WebControls_BaseDataList_DataSource
What is your data source? Are you using a database?
If you do not have a database you can mockup a dataset in XML, JSON, or CSV and then deserialize into your code.
I believe that you can bind anything that implements IList.

Blazor is disconnection when switching to another path

I have a strange issue in my blazor app. I don't know why but when I navigate from a specific path of my app to another path then I get a 400 disconnect message in my browser console.
When I navigate back to the entry point the connection becomes established again.
There are these paths right now
/
/Admin/Users
/Admin/Users/{name}
Admin/Users shows me a list of all employees from my SQL-Database.
<table class="table table-bordered">
<thead>
<tr>
<th>Name</th>
<th>E-Mail</th>
<th>Status</th>
<th>Aktion</th>
</tr>
</thead>
<tbody>
#foreach (var mitarbeiter in UserManager.Users)
{
<tr>
<td>#mitarbeiter.FirstName #mitarbeiter.LastName</td>
<td>#mitarbeiter.Email</td>
<td></td>
<td>
<a href="/Admin/Users/#mitarbeiter.UserName" class="btn btn-primary">
<i class="fa fa-edit"></i>
</a>
</td>
</tr>
}
</tbody>
</table>
As you can see, each employee has a a-Tag to /Admin/Users/{name}. When I click on it, everything works as expected. When I use the navigation now to go back to /Admin/Users then the connection will be terminated. It becomes established again when I go to / or to /Admin/Users manually again.
The navigation is defined as:
<AuthorizeView Roles="Administratoren">
<Authorized>
<div class="sb-sidenav-menu-heading">System</div>
<nav class="sb-sidenav-menu-nested nav">
<NavLink href="/Admin/Users" class="nav-link">Benutzer</NavLink>
</nav>
</Authorized>
</AuthorizeView>
The page /Admin/Users/{name} just displays some razor components to edit the employee. All sites uses the same default layout which contains the blazor.server.js
<script src="/_framework/blazor.server.js"></script>
Does anybody know, how I can fix this issue or what is causing it?
Thanks in advance!
To fix this issue, I added the following code to my _Host.cshtml
<base href="~/" />

ASP.NET C# CSS/Boostrap overlapping

Needed some assistance,
Please look at the picture below, as you can see, When I click the input which has calender, the calender pop up inside the table and it generates a scroll bar which I have to scroll down to see the bottom calender, how do I make sure it is send to front which will show the entire calender outside that table ?
Thanks!
Calender CSS: https://github.com/benitolopez/hotel-datepicker/tree/master/dist
<div class="col-sm-12">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><i class="fa fa-shopping-cart"></i> Shopping cart</h4>
</div>
<div class="panel-body">
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<td class="text-center"></td>
<td class="text-center">Image</td>
<td class="text-left">Product Name</td>
<td class="text-left">Rental Period</td>
<td class="text-left">Rental Rate</td>
<td class="text-left">Deposit Amount</td>
<td class="text-right">Total</td>
</tr>
</thead>
<tbody>
<tr>
<td class="text-center"><p></p><button type="button" data-toggle="tooltip" title="Remove" class="btn btn-danger" onClick=""><i class="fa fa-times-circle"></i></button></td>
<td class="text-center"><img width="60px" src="image/demo/shop/product/E4.jpg" alt="Xitefun Causal Wear Fancy Shoes" title="Xitefun Causal Wear Fancy Shoes" class="img-thumbnail"></td>
<td class="text-left">Emasa rumas gacem</td>
<td class="text-left"><div class="input-group btn-block" style="min-width: 100px;">
<form method="POST" action="checkout.html">
<input type="text" name="input-id" id="input-id" value="" class="form-control">
</form>
<span class="input-group-btn">
<button type="submit" data-toggle="tooltip" title="Update" class="btn btn-primary"><i class="fa fa-refresh"></i></button>
</span></div></td>
<td class="text-right">$114.35</td>
<td class="text-right">$114.35</td>
<td class="text-right">$114.35</td>
</tr>
</tbody>
<tfoot>
<tr>
<td class="text-right" colspan="1"><strong>Meeting Location:</strong></td>
<td class="text-left" colspan="6">$93.73</td>
</tr>
<tr>
<td class="text-right" colspan="6"><strong>Total Amount Payable:</strong></td>
<td class="text-right">$121.85</td>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
</div>
Update:
I removed the "position" in the css of the calender and it now looks like this.
Everytime the calender pop up, the table will adjust/squeeze to fit the calender, how to make sure that calender just shows without changing the size of the table?
Thanks!

C# ASP.NET Need some idea on how to turn this hardcoded HTML Item boxes into Item info that I can took from the DB

I am creating a website that looks like eBay and I got some HTML template which I think I can use to integrate into the ASPX
However, I needed some help with this part,
If you look at the picture, you can see there are four boxes that include item
This is the html code
<div class="ltabs-item product-layout">
<div class="product-item-container">
<div class="left-block">
<div class="product-image-container second_img ">
<img src="image/demo/shop/resize/J5-270x270.jpg" alt="Apple Cinema 30"" class="img-responsive" />
<img src="image/demo/shop/resize/J9-270x270.jpg" alt="Apple Cinema 30"" class="img_0 img-responsive" />
</div>
<!--Sale Label-->
<span class="label label-sale">-15%</span>
<!--full quick view block-->
<a class="quickview iframe-link visible-lg" data-fancybox-type="iframe" href="quickview.html">Quickview</a>
<!--end full quick view block-->
</div>
<div class="right-block">
<div class="caption">
<h4>Cupim Bris</h4>
<div class="ratings">
<div class="rating-box">
<span class="fa fa-stack"><i class="fa fa-star fa-stack-1x"></i><i class="fa fa-star-o fa-stack-1x"></i></span>
<span class="fa fa-stack"><i class="fa fa-star fa-stack-1x"></i><i class="fa fa-star-o fa-stack-1x"></i></span>
<span class="fa fa-stack"><i class="fa fa-star fa-stack-1x"></i><i class="fa fa-star-o fa-stack-1x"></i></span>
<span class="fa fa-stack"><i class="fa fa-star fa-stack-1x"></i><i class="fa fa-star-o fa-stack-1x"></i></span>
<span class="fa fa-stack"><i class="fa fa-star-o fa-stack-1x"></i></span>
</div>
</div>
<div class="price">
<span class="price-new">$50.00</span>
<span class="price-old">$62.00</span>
</div>
</div>
<div class="button-group">
<button class="addToCart" type="button" data-toggle="tooltip" title="Add to Cart" onclick="cart.add('42', '1');"><i class="fa fa-shopping-cart"></i><span class="">Add to Cart</span></button>
<button class="wishlist" type="button" data-toggle="tooltip" title="Add to Wish List" onclick="wishlist.add('42');"><i class="fa fa-heart"></i></button>
<button class="compare" type="button" data-toggle="tooltip" title="Compare this Product" onclick="compare.add('42');"><i class="fa fa-exchange"></i></button>
</div>
</div>
<!-- right block -->
</div>
</div>
Basically when you look at the code, everything is hard coded, what I wanted to do is that every time the page loads, the item info will be taken from the DB and code-behind will supply the information then parse into that field.
How should I do that?
Take a look into this tutorial. https://www.tutorialspoint.com/asp.net/
To show your c# page with dynamic content,you should update your static HTML page with scripting language to get data from database and update UI
AngularJS is one of the Java script framework to create page with dynamic content
I assume you are developing with ASP.NET Web Forms as you mention ASPX files. If that is the case then you can use the runat = "server' attribute for the desired HTML elements. This way you can interact with them from your backend code. More on ASP.NET Web Forms and on HTML Server Controls and runat = "server" attribute

How to send POST request to JSF with help HttpWebRequest

I send post request with body login=login&login:loginName={0}&login:password={1}&login:clientCode=&login:j_idt171=&javax.faces.ViewState=stateless
with help HttpWebRequest. Before that I was doing GET request, for getting JSESSIONID.
Web form looks like that:
<form id="login" name="login" method="post" action="/csologin/login.jsf">
<input type="hidden" name="login" value="login">
<div id="login:j_idt122" class="ui-messages ui-widget" aria-live="polite"></div><table border="0" cellpadding="2" cellspacing="0" width="580px">
<tbody>
<tr>
<td class="ecol1"><label id="login:j_idt125" class="ui-outputlabel ui-widget fbold" for="login:loginName">Username<span class="ui-outputlabel-rfi">*</span></label></td>
<td class="ecol2"><input id="login:loginName" name="login:loginName" type="text" autocomplete="off" size="40" class="ui-inputfield ui-inputtext ui-widget ui-state-default ui-corner-all" role="textbox" aria-disabled="false" aria-readonly="false" aria-multiline="false"></td>
<td class="ecol3"><div id="login:j_idt126" aria-live="polite" class="ui-message"></div></td>
</tr>
</tbody>
</table>
<table border="0" cellpadding="2" cellspacing="0" width="580px">
<tbody>
<tr>
<td class="ecol1"><label id="login:j_idt132" class="ui-outputlabel ui-widget fbold" for="login:password">Password<span class="ui-outputlabel-rfi">*</span></label></td>
<td class="ecol2"><input id="login:password" name="login:password" type="password" class="ui-inputfield ui-password ui-widget ui-state-default ui-corner-all ui-state-hover" autocomplete="off" size="40" role="textbox" aria-disabled="false" aria-readonly="false" aria-multiline="false"></td>
<td class="ecol3"><div id="login:j_idt133" aria-live="polite" class="ui-message"></div></td>
</tr>
</tbody>
</table>
<table border="0" cellpadding="2" cellspacing="0" width="580px">
<tbody>
<tr>
<td class="ecol1"><label id="login:j_idt135" class="ui-outputlabel ui-widget fbold" for="login:clientCode">Client Code</label></td>
<td class="ecol2"><input id="login:clientCode" name="login:clientCode" type="text" maxlength="32" size="40" class="ui-inputfield ui-inputtext ui-widget ui-state-default ui-corner-all" role="textbox" aria-disabled="false" aria-readonly="false" aria-multiline="false"></td>
<td class="ecol3"><div id="login:j_idt136" aria-live="polite" class="ui-message"></div></td>
</tr>
</tbody>
</table>
<br><div class="text-center">
<button id="login:j_idt139" name="login:j_idt139" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" onclick="barWaitDialog.show();" type="submit" role="button" aria-disabled="false"><span class="ui-button-text ui-c">Login</span></button>
<!-- <p:commandButton value="Clear" onclick="clearVisibleTextFields();" /> --><button id="login:j_idt141" name="login:j_idt141" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" onclick="PrimeFaces.ab({source:'login:j_idt141',oncomplete:function(xhr,status,args){clearVisibleTextFields();;}});return false;" type="submit" role="button" aria-disabled="false"><span class="ui-button-text ui-c">Clear</span></button><button id="login:j_idt142" name="login:j_idt142" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" type="submit" role="button" aria-disabled="false"><span class="ui-button-text ui-c">Cancel</span></button>
</div><input type="hidden" name="javax.faces.ViewState" id="javax.faces.ViewState" value="stateless" autocomplete="off">
Not authenticated, it returns a redirect to login page. What am I doing wrong?
Basically, you didn't press the desired button. You need to include the name=value pair of the submit button you'd like to "press" programmatically. That's usually in the server side used to distinguish if a button was pressed and if so, which one.
There appear to be three submit buttons in the HTML form, simplified as below:
<button name="login:j_idt139" type="submit">Login</button>
<button name="login:j_idt141" type="submit">Clear</button>
<button name="login:j_idt142" type="submit">Cancel</button>
It appears that the JSF developer didn't give an explicit ID to those buttons, so an autogenerated ID is being used. This autogenerated ID depends on the position of the button component in the JSF component tree. So, if the JSF developer changes the view composition (adding/moving/removing components), then chances are that the final ID of the button in the HTML markup will also change. You'd need to alter your query string on that. The parameter login:j_idt171= in your query string likely needs to be changed to login:j_idt139=.
To make it more robust, you could try contacting the website admin/developer and ask to give those buttons an explicit ID as in <p:commandButton id="login">, so that you can always use the parameter login:login= without worrying about autogenerated IDs. If that's really not an option, then you'd basically need to use a HTML parser to find out the ID of the login button.

Categories

Resources