<ul class="nav pull-right">
<li class="active">HOME</li>
<li>FEATURES</li>
<li>CHECK E-MAIL</li>
<li>TESTIMONIALS</li>
<li>CONTACT</li>
<li>Sign Up</li>
</ul>
<div id="Signup" class="modal hide fade LoginSignup" tabindex="-1" role="dialog" aria-labelledby="myModalLabel2" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel2">Sign Up</h3>
</div>
<div class="modal-body">
<p>#alert</p>
<form method="POST" action="" name="signupform">
<input type="text" placeholder="First Name" name="firstname">
<input type="text" placeholder="Last Name" name="lastname">
<input type="text" placeholder="E-mail" name="email">
<input type="password" placeholder="Password" name="password">
<input type="password" placeholder="Confirm Password" name="password1">
<input type="submit" name="signup" value="Sign Up" />
<label>By registering you are automatically agreeing to our Terms of Service</label>
</form>
</div>
</div>
this is from a html5 template that i downloaded somewhere, when i click sign up in the menu (the first code i posted) it opens some kind of dialog box(?) i fill the textboxes just fine and when i click submit it registers just fine and i wanted to keep that dialog box(?) open so i can show a message through the variable alert that says you registered successfully blabla.
i can get everything working including the alert but i cant keep the signup dialog open after submitting so i have to click signup on the menu again to see the alert message.
That looks like bootstrap to me. First things first, you have to change the submit button in the pop-up to something like:
<span class="btn btn-primary" onclick="submitform()">Submit</span>
Then you have to create the javascript function called "submitform" to submit the signup form data to a webservice or whatever backend you have, read back the response and display the response in the popup itself.
Related
I have a button which toggles a modal window i would like the button to get the current Model.ID of it item that the button is attached to then pass that Model.ID into the window i would like to do this without using JavaScript.
At the moment the first Model.ID out of all of them is passed in but i want the current one
To do this would i need to put the modal toggle in a form with Method GET then post the data back to a partial view inside the modal window.
HTML Code
<button type="button" data-bs-toggle="modal" data-bs-target="#staticBackdrop2" >Modal</button>
<div class="modal fade" id="staticBackdrop2" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="staticBackdropLabel">Delete</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
Are you sure that you want to delete #Model.ID this action cannot be reversed
</div>
<div class="modal-footer">
<div>
<form action="#Url.Action("DeleteLesson","Lesson", new{ID = Model.ID})" method="post">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-danger" value="Delete">Delete</button>
</form>
</div>
</div>
</div>
</div>
</div>
You can specify some custom parameter for your button, like
<button type="button" data-bs-toggle="modal" something="#Model.ID" data-bs-target="#staticBackdrop2" >Modal</button>
<div class="modal fade" id="staticBackdrop2" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="staticBackdropLabel">Delete</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
Are you sure that you want to delete #Model.ID this action cannot be reversed
</div>
<div class="modal-footer">
<div>
<form action="#Url.Action("DeleteLesson","Lesson", new{ID = Model.ID})" method="post">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-danger" value="Delete">Delete</button>
</form>
</div>
</div>
</div>
</div>
</div>
Now, at the event that opens the modal, you will have to find the referrer, which is the button. Its something attribute should hold your model's id.
The data entered the input fields are extracted using the ids of the respective fields using the jQuery val() method.
Next the data obtained from the input fields are concatenated into a string. This string is passed to the modal body using the html() method of jQuery.
I have a page that has the following code:
<div class="form-control">
<input type="submit" value="Save" class="btn btn-primary"/>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
Launch demo modal
</button>
</div>
and below the form:
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" >Save changes</button>
</div>
</div>
</div>
</div>
the input type submit " <input type="submit" value="Save" class="btn btn-primary"/> " works, however when I click on the modal button, and the modal opens, the button inside "Save Changes" does not work.
I have also changed the button inside the modal to the same code as the Save button, but it also doesn't work. it doesn't call the OnPost button.
I have also tried adding a handler " asp-page-handler="Save" " and renaming the OnPostAsync to OnPostSaveAsync but does not work.
The inspect does not execute anything on the browser also.
I'm using razor pages asp net6 and the modal code comes from the bootstrap5 docs.
Your <div class="modal"> is likely located as a direct child of <body> instead of being inside its <form>...
... but <button type="submit"> won't work unless the <button> itself is a descendant of the <form> element that should be submitted.
Fortunately, if the <button> is not a descendant of a <form>, then you can manually bind it using the <button form=""> attribute, which contains the id="" of the <form> you want to submit.
Note that the form="" attribute can also be used with all HTML form controls: on all <input> elements, <textarea>, and <select> - which allows you to work-around the fact we can't nest <form> elements.
I need to call c# controller action from angular component html page in directly without typescript file.
How I write a controller action Home/Subscribe to directly call from
action-xhr="/Home/Subscribe"
<form method="post" class="subscription-form" action-xhr="/Home/Subscribe"
custom-validation-reporting="show-all-on-submit" target="_top" on="submit-error:submit-error.show">
<div class="subscription-form-fieldset">
<div class="subscription-form-div">
<label class="subscription-form-label">
<span class="subscription-form-span"></span>
<input on="tap:submit-error.hide" class="subscription-form-input" type="email" placeholder="Type your email..."
name="email" id="email" required>
<span visible-when-invalid="valueMissing" validation-for="email"></span>
<span visible-when-invalid="typeMismatch" validation-for="email">Please, enter a valid email address.</span>
</label>
</div>
<button class="subscription-form-submit" type="submit">
Subscribe
<div submitting class="subscription-form-submitting">
<i class="fa fa-spinner fa-spin"></i>
</div>
</button>
</div>
<div submit-error id="submit-error" class="subscription-form-submit-error">
<template type="amp-mustache">
{{subscribeSubmitErrorMessage}}
</template>
</div>
</form>
Why do you want to do it from html and not from ts file? This is not recommended. Most of the time you have to map your data, handle the errors, and you can’t do that from your html.
You should reconsider your approach
I'm writing an application in asp.net core 2.0.
I have some data that I send to the controller from the view but I also have data that I want to pass to the same controller but they are not in the form.
It is possible to pass this data to the same controller and I do not have to create new inputs.
How to pass data to the controller from outside the form or in form but without creating new inputs.
I have two variables #Model.MinUppercase ,#Model.MinLowercase but I do not use them in the form, how can I pass them to the controller together with variables from the form?
#model Project2.Models.UserModel
<h1>Step2: Register</h1>
<div>
#if (#ViewData["Message"] != null)
{
<div class="alert alert-danger space text-center">
#ViewData["Message"]
</div>
}
#Model.MinUppercase
#Model.MinLowercase
<center>
<h2>Register form:</h2>
</center>
<div>
<form asp-action="Middle" asp-controller="Home" method="POST" class="form-wrapper">
<div class="input-group">
<label>Login:</label>
<input id="Login" asp-for="Login" type="text" class="input" size="35">
</div>
<div class="input-group">
<label>Password:</label>
<input id="Password" asp-for="Password" type="Password" class="input" size="35">
</div>
<div class="input-group">
<label>Your Regex Description:</label>
<input id="Description" asp-for="Description" type="text" class="input" size="35" value=#Model.Description>
</div>
<div class="input-group">
<label>Your Regex:</label>
<input id="Reg" asp-for="Reg" type="text" class="input" size="35" value=#Model.Reg>
</div>
<div class="input-group">
<a asp-controller="Home" asp-action="CreateRegex">
<button type="button" class="btn btn-danger">Back</button>
</a>
<button class="btn btn-success">Create</button>
</div>
</form>
</div>
Inside your form html content add hidden fields (using razor helper #Html.Hidden/For):
#Html.Hidden("MyName", "Carlos")
or
#Html.HiddenFor(i => i.PropertyOfYourModel) - if is some property of your model.
As carlosfcmendes already answered you can add data with hidden fields.
Or if you want to be more flexible you can intercept the form submit and add data.
There are plenty of answers here on how to do that:
Intercept form, add data, ajax, then submit.
How can I listen to the form submit event in javascript?
I have a form in my nav bar which includes a username and password textbox as well as a sign in button. When the user logs in I am trying to understand how I would hide the login form and show a profile button, I am wondering how may I come across doing it in ASP.NET? I am using Bootstrap, I know how to log the user in but I don't know how I would change it to show a profile button when the user is logged in.
Here is what I have so far in my MasterPage.Master source code:
<body role="document">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div id="navbar" class="navbar-collapse collapse" aria-expanded="false" style="height: 1px;">
<form class="navbar-form navbar-right">
<div class="form-group">
<input type="text" placeholder="Email" class="form-control">
</div>
<div class="form-group">
<input type="password" placeholder="Password" class="form-control">
</div>
<button type="submit" class="btn btn-success">Sign in</button>
</form>
</div><!--/.navbar-collapse -->
</div>
</nav>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
The Web Forms way of doing this is to use a LoginView control.
<asp:LoginView id="LoginView1" runat="server">
<AnonymousTemplate>
<!-- this is displayed if no user is logged in -->
</AnonymousTemplate>
<LoggedInTemplate>
<!-- this is displayed once logged in. may wanna leave it empty -->
</LoggedInTemplate>
</asp:LoginView>