I have two .cshmtl pages used for registration. When user completes first registration page I want the controller to jump to another cshtml page without going to controller. How can I complete this task?
<div class="control-group form-actions pull-right">
<a href="~/Views/Registration/RegStep2" class="btn btn-primary">
Continue
<i class="fa fa-arrow-circle-right"></i>
</a>
</div>
When user click above continue button he will jump on another controller without controller...
Please see the below method using Partial views.
<div class="control-group form-actions pull-right">
<div id="first-div">
#Html.Partial("PartialView1")
</div>
<div id="second-div" style="display:none;">
#Html.Partial("PartialView2")
</div>
<a href="#" class="btn btn-primary" onclick="onclickContinue">
Continue
<i class="fa fa-arrow-circle-right"></i>
</a>
</div>
<script type="text/javascript">
function onclickContinue(e) {
$("#first-div").hide();
$("#second-div").show();
}
</script>
Related
I am doing a small project with vue.js and laravel. I have a list of products, when I click on a specific product on "Quick view" button I want to show all data about that product in a modal but the data is not showing in the modal.
Can you help me please. Here is my code:
#extends('app')
#section('content')
<div id ="crud" class="row">
<div class="col-xs-12">
<h1 class="page-header">Lista de Articulo</h1>
</div>
<div class="wrap-icon right-section col-md-12" data-toggle="modal" data-target="#list" >
<div class="wrap-icon-section wishlist">
<a href="#" class="link-direction">
<i class="fa fa-heart" aria-hidden="true"></i>
<div class="left-info">
<span class="index">0 item</span>
<br>
<span class="title">Wishlist</span>
</div>
</a>
</div>
</div>
<div class="row">
<div v-for="keep in keeps" class="col-md-4" style="width:25%;" #mouseover="showByIndex = keep" #mouseout="showByIndex = null">
<div class="container">
<img :src="keep.foto" style="width:100%; max-width:150px;">
<button class="btn" v-show="showByIndex === keep" v-on:click.prevent="showKeep(keep)">Quick view</button>
</div>
<h3>
<b> #{{keep.nombre}}</b>
</h3>
<p> #{{keep.descripcion}}</p>
I fixed it. The error was because I called the modal file outside the div. Thanks to everybody.
you can't send data directly from vue in blade structure, you need to write a component for that.
https://v3.vuejs.org/examples/modal.html#modal-component
I have a html view and this view displays list of elements. All elements have two buttons (edit and delete). When I click on delete all is working correctly but when I click on edit new view is not displayed. When I want to enter my direct url to edit it, all is working...
This is fragment of my code:
<div class="container">
<!-- topics -->
<div class="row topic" th:each="user : ${users}">
<div class="col-4">
<p>
<div class="input-group-addon" style="width: 2.6rem"><i class="fa fa-at"></i></div>
<a class="title " th:href="#{'/user/' + ${user.id}}" th:text="${user.email}"></a>
</p>
</div>
<div class="col-4">
<p>
<div class="input-group-addon" style="width: 2.6rem"><i class="fa fa-user"></i></div>
<a class="title " th:href="#{'/user/' + ${user.id}}" th:text="${user.fullName}"></a>
</p>
</div>
<div class="col-2">
<form action="#" th:action="#{'/user/drop/{id}'(id=${user.getId()})}" th:method="delete" >
<input type="hidden" name="_method" value="delete" />
<button type="submit" class="btn btn-danger">Usuń użytkownika</button>
</form>
</div>
<div class="col-2"></div>
<!--My failed button-->
<button type="submit" class="btn btn-warning" th:href="#{'/user/edit/' + ${user.id}}">Edycja</button>
</div>
</div>
</div>
A <button> has no href attribute. What you're looking for is a "link" (an <a> "anchor" tag to be specific):
<a class="btn btn-warning" th:href="#{'/user/edit/' + ${user.id}}">Edycja</a>
The reason your other button "works" is because it's part of a <form> and it submits that form. It doesn't follow any kind of href attribute. You could also make this button part of a form, but that doesn't appear to be the intended functionality. The intended functionality here is to direct the user to a new page, so a link is appropriate.
After clicking on DELETE, there is no reaction, absolutely nothing happens. I am using HTML Forms, that's why I used, #method('DELETE'). I had similar problem with edit, after using #method(PUT), edit is working properly.
<div class="row">
<div class="col-6 align-self-start">
<a class="btn btn-light" href="/listings/{{$listing->id}}/edit">Edit</a>
</div>
<div class="col-6 align-self-end">
<form action="{{action('ListingsController#destroy', [$listing->id])}}" method="POST">
<?= csrf_field()?>
#method('DELETE')
<a class="btn btn-danger" href="/dashboard">Delete</a>
</form>
</div>
</div>
Destroy Function:
public function destroy($id)
{
$listing = Listing::find($id);
$listing->delete();
return redirect('/dashboard')->with('success', 'Contact Deleted');
}
Change
<a class="btn btn-danger" href="/dashboard">Delete</a>
to
<a type="submit" class="btn btn-danger" href="/dashboard">Delete</a>
You should add submit otherwise it will not submit the form.
Its recommended to use a instead of :
<button type="submit" class="btn btn-danger">Delete</button>
I have a web app using modal forms to confirm some of the actions my users (or admin) might be allowed to do. The modal form setup is taken from Microsoft's IdentitySampleApplication project and been incorporated for my project in mostly the same way with this one difference. I am using the generic modal forms. I am trying to allow a user to have multiple user roles on an application (while their sample presumes the user will only have one role.)
I am now working out the deletion of roles for this type multi-role scenario for maintenance. I should point out that all instances of code involving only one id work fine, it is this one instance with 2 ids that fails to pass through either of the ids I need at the controller.
The deletion of a user role requires the key of the user and the role.
My controller has a bit of code like the following to accept the ids and present a modal form, which works quite nicely.
[HttpGet]
public IActionResult DeleteUserRole( string userid, string roleid ){...}
The HttpPost portion looks something like this
[HttpPost]
public IActionResult DeleteUserRole( string userid, string roleid, IFormCollection form ){...}
however, this second action never gets the ids that were passed to the modal forms get method.
In all methods that only have a single routing id, I have no issues. It is only this one method that vexes me. I call it from this link. Note the two asp-route variables and I suspect this is at the heart of my issue, but the get call is fine with this, it is the post that has no values:
<a id="deleteRoleModal" asp-action="DeleteUserRole"
asp-route-userid="#item.userId" asp-route-roleid="#item.roleId"
data-toggle="modal" data-target="#modal-action-role"
class="btn btn-sm btn-danger">
where at the base of the form I have a modal form implementation it uses looking like this:
#await Html.Partial( "_Modal", new BootstrapModel { ID = "modal-action-role", AreaLabeledId = "modal-action-role-label", Size = ModalSize.Medium } )
My modal form looks much like the samples used in the IdentitySampleProject and is shown here, it was not altered in any meaningful way yet works fine with single parameter call backs:
#model string
#using MyModels
<form asp-action="DeleteUserRole" role="form">
#Html.AntiForgeryToken()
#await Html.Partial( "_ModalHeader", new ModalHeader { Heading = "Delete User Role" } )
<div class="modal-body form-horizontal">
Are you sure you want to delete user role #Model?
</div>
#await Html.Partial( "_ModalFooter", new ModalFooter { SubmitButtonText = "Delete" } )
</form>
I am looking for a direction to go to solve the issue. I am hoping that indeed the double route ids are my issue, but I can not seem to find anyone else doing something like this in samples.
The generated management page looks mostly like this:
<!DOCTYPE html>
<html>
<head>
<title>my company</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="/lib/bootswatch/spacelab/bootstrap.min.css" />
<link rel="stylesheet" href="/lib/font-awesome/css/font-awesome.min.css" />
<link rel="stylesheet" href="/css/site.css" />
<link rel="stylesheet" href="/css/navTabs.css" />
<link rel="stylesheet" href="/css/partner.css" />
</head>
<body>
<div id="header">
<div class="slideContainer">
<div class="slide"><img src="/image/Firm-small2.jpg" alt="Offices" class="headerImage" /></div>
<div class="slide"><img src="/image/InLibrary225.jpg" alt="Library" class="headerImage"></div>
<div class="slide"><img src="/image/DSC_9999editSM.JPG" alt="Offices" class="headerImage" /></div>
<div class="slide"><img src="/image/DSC_9925edit2SM.JPG" alt="Computer Room" class="headerImage" /></div>
</div>
<nav class="navbar navbar-inverse">
<ul class="nav navbar-nav navbar-right ">
<li class="navtext">
<label>-- Welcome: Webmaster </label>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="navtext">
<label>Your Proven Partner in Cartoon Drawing</label>
</li>
</ul>
</nav>
</div>
<div id="sidebar">
<div><img src="/image/headerLogo.gif" alt="my company Logo" class="logoImage" /></div>
<nav id="menu">
<ul class="nav navbar-inverse">
<li>Home</li>
<li>
<div id="menuGroupItem">
Partners
<a data-toggle="collapse" data-target="#partnerMenu"><i class="fa fa-chevron-down"></i></a>
</div>
<ul id="partnerMenu" class="nav collapse" role="menu" aria-labelledby="partnerMenu">
<li><i class="fa fa-caret-right"></i> Eddy A Fish</li>
<li><i class="fa fa-caret-right"></i> Tom A Hawk</li>
</ul>
</li>
<li>Services</li>
<li>News</li>
<li>Events</li>
<li>Publications</li>
<li>Firm History</li>
<li>Contact</li>
<li class="divider"></li>
<li>Manage Website</li>
<li>Logout</li>
</ul>
</nav>
<div class="affiliation">
<table>
<tr>
<td>
<img src="/image/WBE_color_rgb_UP25.jpg" alt="" class="affiliationImage" />
</td>
</tr>
</table>
</div>
<div>
<ul class="rightAlign">
<li> </li>
<li>my company</li>
<li>16 main street</li>
<li>anytown, pa 00000</li>
<li> </li>
<li>610.111.1111</li>
</ul>
</div>
</div>
<div id="wrapper">
<div id="main" class="container-fluid">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<form action="/Users/UserRole/a2c77901-4a74-49aa-9354-1fadc943c8c4" method="post"><input id="UserId" name="UserId" type="hidden" value="a2c77901-4a74-49aa-9354-1fadc943c8c4" /><input id="UserName" name="UserName" type="hidden" value="BioEditor" /> <h3>Add roles for user: <span class="text-success">BioEditor</span></h3>
<div>
<div class="form-group">
<table class="table table-responsive">
<thead>
<th>Role</th>
<th>Action</th>
</thead>
<tbody>
<tr>
<td><i class="fa fa-check text-success"> </i>BioEditor</td>
<td>
<a id="deleteRoleModal" data-toggle="modal" data-target="#modal-action-role" class="btn btn-sm btn-danger" href="/Users/DeleteUserRole?userid=a2c77901-4a74-49aa-9354-1fadc943c8c4&roleid=8b12b24d-5836-46eb-a7aa-0be1818a67f5">
<i class="fa fa-trash"></i> Delete
</a>
</td>
</tr>
<tr>
<td><i class="fa fa-check text-success"> </i>PowerEditor</td>
<td>
<a id="deleteRoleModal" data-toggle="modal" data-target="#modal-action-role" class="btn btn-sm btn-danger" href="/Users/DeleteUserRole?userid=a2c77901-4a74-49aa-9354-1fadc943c8c4&roleid=c4f3bdf8-b880-423c-8de3-1e51329da104">
<i class="fa fa-trash"></i> Delete
</a>
</td>
</tr>
<tr>
<td><i class="fa fa-check text-success"> </i>Administrator</td>
<td>
<a id="deleteRoleModal" data-toggle="modal" data-target="#modal-action-role" class="btn btn-sm btn-danger" href="/Users/DeleteUserRole?userid=a2c77901-4a74-49aa-9354-1fadc943c8c4&roleid=f1aafc1e-0527-4542-8f0e-fb1afeccac46">
<i class="fa fa-trash"></i> Delete
</a>
</td>
</tr>
</tbody>
</table>
</div>
<div class="form-group">
<div class="input-group">
<select class="input-group form-control" data-val="true" data-val-required="The ApplicationRoleId field is required." id="ApplicationRoleId" name="ApplicationRoleId">
<option>Please select</option>
<option value="8b12b24d-5836-46eb-a7aa-0be1818a67f5">BioEditor</option>
<option value="c4f3bdf8-b880-423c-8de3-1e51329da104">PowerEditor</option>
<option value="f1aafc1e-0527-4542-8f0e-fb1afeccac46">Administrator</option>
<option value="fe77274d-4b16-46a6-8177-a84faf198c9b">EventEditor</option>
</select>
<span class="input-group-btn">
<button type="submit" class="btn btn-sm btn-success"><i class="fa fa-user"> </i> Add Selected Role </button>
</span>
<span class="field-validation-valid" data-valmsg-for="ApplicationRoleId" data-valmsg-replace="true"></span>
</div>
</div>
</div>
<input name="__RequestVerificationToken" type="hidden" value="CfDJ8KeASaIZMdBDjnZy_1CdaouczJ-zwxPaQp-N5OQ5bGWfYzVfpDz7_iC0VlJb_cRDkqucT-8ENFhsNPe9Rng1Mqrm9VQbYQoSQwerxj953ql4v7dABrW6pioEySOJN7qFXaalGYePyjHoB0QiKxfuvkvh938tJG4gVnh5D1JvLyNBBKlR4d25PcoJOJZTdN_Bxg" /></form> </div>
</div>
<div aria-hidden="true" aria-labelledby="modal-action-role-label" role="dialog" tabindex="-1" id="modal-action-role" class="modal fade">
<div class="modal-dialog ">
<div class="modal-content">
</div>
</div>
</div>
</div>
</div>
<div id="footer" class="container-fluid">
<div class="navbar navbar-fixed-bottom navbar-inverse ">
<ul>
<li class="navbar-link">© my company</li>
<li class="navbar-link text-muted"><a id="disclaimerLink" href="#">Disclaimer</a></li>
</ul>
</div>
</div>
<script type="text/javascript" src="/lib/jquery/dist/jquery.js"></script>
<script type="text/javascript" src="/lib/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="/lib/jquery-validation/dist/jquery.validate.min.js"></script>
<script src="/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js"></script>
<script type="text/javascript" src="/js/site.js"></script>
</body>
</html>
Thanks for any direction you might be able to provide, Kent
That was exactly a nudge in the right direction to finding the issue, thanks Ahmar. What is going on, due to the 2 ids being passed back to the controller is that the data is wrapped up in a query string rather than as a real route {controller}{action}{id}.
The modal won't pass along the query string to the final so I changed the model and wrapped up the values in the modal form for the final deletion and it all worked. Thanks for asking the right the question to get this answered.
I want to click publish report button so I use this xpath->//button[#class='btn btn-success btn-block'].
I want to click that button who has href='http://www.jbalbertos.com', means that xpath should be like this //div/a[#href='http://www.jbalbertos.com/'] and //button[#class='btn btn-success btn-block']
if any one knows kindly give me right xpath statement.
<div class="search-business-description">
<div class="business-name ng-binding">J.B. Alberto's Pizza</div>
<div class="business-address ng-binding">
<div class="business-website">
<span class="ng-binding" ng-bind-html="getWebsite()"><a target="_blank" href="http://www.brchichago.com/">http://www.brchichago.com/</a>
</span>
</div>
</div>
<div class="business-website">
<span class="ng-binding" ng-bind-html="getWebsite()"><a target="_blank" href="http://www.jbalbertos.com/">http://www.jbalbertos.com/</a></span>
</div>
<div class="business-actions">
<button class="btn btn-success btn-block" ng-click="onPublish(result)">
</div>
</div>
if i understood correctly
//div[//a[#href='http://www.jbalbertos.com/']]/following-sibling::div[#class="business-actions"]/button[#class='btn btn-success btn-block']