Currently I’m developing MAUI application with blazor template.I use the navigation manager to navigate to another page in order to move to the next page when a user successfully enters their credentials.
Navigation manager moves me to the next page. But in a millisecond, it will be redirected to the index page.
Here is my index code below:
#page "/"
#inject NavigationManager Navigation;
<div class="center_div" >
<form class="center_content">
<center>
<h3 class="login_title">Sign In</h3>
<p class="login_text">Login with your Credentials</p>
<div class="field_cont">
<input type="text" class="field_input" placeholder=" " />
<label class="field_label">Username</label>
</div>
<div class="field_cont">
<input type="password" class="field_input" placeholder=" " />
<label class="field_label">Password</label>
</div>
<button #onclick="()=>NavigateToCompany()" class="form_btn">Sign In</button>
</center>
</form>
</div>
#code{
private string UserName = "";
private string Password = "";
private void NavigateToCompany()
{
Navigation.NavigateTo("/company-select");
}
}
Here is my second page code below:
#page "/company-select"
<h3>CompanySelect</h3>
#code {
}
How can I stay on second page rather than be redirected to the index page?
I use .NET 7 and Visual studio 2022
You need to put the Button element outside the form element like below:
#page "/"
#inject NavigationManager Navigation;
<div class="center_div">
<form class="center_content">
<center>
<h3 class="login_title">Sign In</h3>
<p class="login_text">Login with your Credentials</p>
<div class="field_cont">
<input type="text" class="field_input" placeholder=" " />
<label class="field_label">Username</label>
</div>
<div class="field_cont">
<input type="password" class="field_input" placeholder=" " />
<label class="field_label">Password</label>
</div>
</center>
</form>
<button #onclick="()=>NavigateToCompany()" class="form_btn">Sign In</button>
</div>
#code{
private string UserName = "";
private string Password = "";
private void NavigateToCompany()
{
Navigation.NavigateTo("/company-select");
}
}
The reason why you need place the button outside of the form is that when putting a button element inside a form element, the attribute of the button element defaults to submit leading to that it will be redirected to the index.
Related
I'm using ASP NET CORE MVC 5.
I have a View ("ChooseServices") which, depending on the parameter passed, displays 1 or N PartialViews (Forms):
ChooseServices.cshtml:
<div class="col">
#if (Model.OfferServiceA)
{
<partial name="_FormA" />
}
#if (Model.OfferServiceB)
{
<partial name="_FormB" />
}
#if (Model.OfferServiceC)
{
<partial name="_FormC" />
}
</div>
After answering each Form individually, I want to display a default message which is another PartialView ("_confirmation.cshtml") in place of the Form.
Something like this:
(after submit Form-A)
(and after submit Form-C)
In summary, after submitting a Form (partial view), I want it be replaced by another PartialViews, all inside the View "ChooseServices".
[EDIT - Some code]
CONTROLLER:
public class SomeServiceController : Controller
{
// A survey brings to here.
public IActionResult ChooseServices(SuggestedServicesDTO dto)
{
return View(dto);
}
}
VIEWS (ignoring css)
ChooseServices.cshtml
#model SuggestedServicesDTO
<section >
<div class="container">
<div class="row">
<div class="col">
#if (Model.OfferServiceA)
{
<partial name="_FormA" />
}
#if (Model.OfferServiceB)
{
<partial name="_FormB" />
}
#if (Model.OfferServiceC)
{
<partial name="_FormC" />
}
</div>
</div>
</div>
</section>
_Form{x}.cshtml
{x} is the service name.
<div class="card">
<div class="card-body">
<h3>THIS IS THE FORM-{x}.</h3>
<form asp-action="??IDK what put here">
<div>
<label>Select an option:</label>
<!-- Radio buttons Begin -->
<div>
<label for="service{x}Opt{N}">
<input type="radio" name="optionsService{x}" id="service{x}Opt{N}" value="someValue1">
<span>Option QWERTY</span>
</label>
</div>
<div>
<label for="service{x}Opt{N}">
<input type="radio" name="optionsService{x}" id="service{x}Opt{N}" value="someValue2">
<span>Option ASDFGH</span>
</label>
</div>
<!-- others options here -->
<!-- Radio buttons end-->
</div>
<div>
<input type="submit" value="Submit {x}"/>
</div>
</form>
</div>
</div>
_Confirmation.cshtml
(Just a message, nothing important)
<div class="card">
<div class="card-body">
<div>
<h3>Thanks for answering!</h3>
<p>bla bla bla bla</p>
<button type="button" onclick="window.open('someurl', '_blank').focus();">
Do something...
</button>
</div>
</div>
</div>
I don't know what to do after submit de Forms{x}.
Hi I'm trying to make a Razor page with a simple form that add the new element into a list, but the OnPost() method is never calling. I have a breakpoint on the first line of the method and it never hits, but in the OnGet() it works.
This is my OnPost() method:
public void OnPost()
{
newDocument = Int32.Parse(Request.Form[nameof(newDocument)]);
newAge = Int32.Parse(Request.Form[nameof(newAge)]);
newTriage = (Triage)Int32.Parse(Request.Form[nameof(newTriage)]);
newName = Request.Form[nameof(newName)];
newGender = Request.Form[nameof(newGender)];
newSymptoms = Request.Form[nameof(newSymptoms)];
var newPatient = new Patient
{
Document = newDocument,
Name = newName,
Age = newAge,
Gender = newGender,
Triage = newTriage,
Symptoms = newSymptoms
};
patients.Add(newPatient);
OrderPatients();
}
And the razor page have this form:
<form>
<div class="form-group">
<label for="patientDoc">Documento</label>
<input asp-for="newDocument" type="number" class="form-control" id="patientDoc" placeholder="ingrese documento">
</div>
<div class="form-group">
<label for="patientName">Nombre</label>
<input asp-for="newName" type="text" class="form-control" id="patientName" placeholder="Nombre">
</div>
<div class="form-group">
<label for="patientAge">Edad</label>
<input asp-for="newAge" type="number" class="form-control" id="patientAge" placeholder="Edad">
</div>
<div class="form-group">
<label for="patientGender">Género</label>
<input asp-for="newGender" type="text" class="form-control" id="patientGender" placeholder="Género">
</div>
<div class="form-group">
<label for="patientTri">Prioridad</label>
<select asp-for="newTriage" class="form-control" id="patientTri">
#foreach (Triage tri in Enum.GetValues(typeof(Triage)))
{
<option>#tri</option>
}
</select>
</div>
<div class="form-group">
<label for="patientSymp">Sintomas</label>
<input asp-for="newSymptoms" type="text" class="form-control" id="patientSymp" placeholder="Sintomas">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
I have read that you have to put this line #addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers at the beginning of the page, but I did it and still the OnPost doesn't hit.
Anyone knows what is wrong?
The default method type for form is GET, so it hits your OnGet handler because you didn't specify the method. Change <form> to <form method="post"> and it should work.
Forget it. I just had to add the method="form" at the beginning of the form like this:
<form method="post">
. . .
</form>
Gonna leave this around here for another newbie like me who might need it.
This is a simplified demonstration of the issue. will not display a string separated by white space.
#{
var myString = "worda wordb wordc";
}
<div class="row">
<input value=#myString>
</div>
Using a C# resource file for multi language support, I'm having problems with web page input buttons. They will not display all data apart of resource file values. The same data will display properly using other html tags.
Create default mvc project > Add properties\resource.resx > add one entry to file (make sure value has more than one word) > set file properties Custom Tool= PublicResXFileCodeGenerator > change index.cshtml to this code > set to chrome browser > run project. Notice the input tag will not display all data from resource file properly but other html tags will.
resources.resx
<data name="updated_information_btn" xml:space="preserve">
<value>Word1 Word2 Word3</value>
</data>
index.cshtml
#using TestBnResourceFile.Properties
<div class="jumbotron">
<h2>Testing button value displayed</h2>
<p>
Button has problem displaying all words of resource file key.
</p>
</div>
<div class="row">
<h2>
<span>"Resources.updated_information_btn" value:</span> #Resources.updated_information_btn
</h2>
</div>
<div class="row">
<input type="submit" name="submitbtn1" value=#Resources.updated_information_btn class="submitbtn">
</div>
<div class="row">
<input type="submit" name="submitbtn2" value=#Resources.updated_information_btn>
</div>
<div class="row">
<input name="submitbtn3" value=#Resources.updated_information_btn>
</div>
<div class="row">
<input value=#Resources.updated_information_btn>
</div>
That's because you need to reference the string value in the following way:
<div class="row">
<input type="text" name="date" value="<%= ResourceValue %>" />
</div>
So, if you want to bind the resource value, you can assign it to a string var and then set it:
private string ResourceValue{ get; set; }
protected void Page_Load(object sender, EventArgs e)
{
this.ResourceValue = #Resources.resource_value;
}
Let me know if it helps, cheers.
Using double quotes around the variable resolved this issue.
#{
var myString = "worda wordb wordc";
}
<div class="row">
<input value="#myString">
</div>
I currently have a form that when submit is clicked the selected value should be shown in the textarea/box and initial page should remain open.
But the problem I'm currently having is when I click the submit button, I'm being taken from the initial page and the value is being displayed on a blank page.
So basically I have two issues. How do I prevent being taken to another page once submit is clicked? And how can I get the value to be displayed in the textarea? I'm new to MVC, so any help would be greatly appreciated.
View:
<script language="JavaScript">
function showInput() {
document.getElementById('display').innerHTML =
document.getElementById("Envs").value;
}
</script>
<form asp-controller="CyberArk" asp-action="CyberArk" method="post" role="form" onsubmit="return confirm('Do you really want to carry out this action?');" id="form1" style="display:none;">
<div id="accordion" role="tablist" aria-multiselectable="true">
#* Form 1 *#
<div class="card">
<div class="card-header" role="tab" id="headingTwo">
<h5 class="mb-0">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo" style="font-size:15px;">
Vault Status
</a>
</h5>
</div>
<div id="collapseTwo" class="collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="card-block">
<div class="form-group">
<div class="form-group">
<p> This script returns status of vault servers for the chosen environment. It is used to determine if any servers overlap in order to detect a split brain.</p>
</div>
#model PAM_Dashboard_Project.Models.Vaults
#Html.DropDownList("Envs", new SelectList(Enum.GetValues(typeof(Envs))), "Select Enivronment", new { #class = "form-control" })
<br>
<div>
<button type="submit" onclick="showInput();">Submit</button>
</div>
<br />
<textarea class="form-control" cols="20" id="ouput1" name="output1" rows="2"></textarea>
</div>
</div>
</div>
</div>
</div>
</form>
Model:
public class Vaults
{
public string Envs { get; set; }
}
public enum Envs
{
RTPprod,
OMA,
BG1,
BG2,
Cloud,
Workstation,
QA
}
Controller:
public class CyberArkController : Controller
{
public IActionResult CyberArk()
{
return View();
}
[HttpPost]
public string CyberArk(Vaults newVault)
{
string SelectedValue = newVault.Envs;
return (SelectedValue);
}
}
Update your event attribute to:
onclick="showInput(event);"
Update your showInput method to:
function showInput(e) {
e.preventDefault();
document.getElementById('display').innerHTML = document.getElementById("Envs").value;
}
Note: You don't have an element with the id display, so you need to fix that.
jQuery
<script>
$(document).ready(function () {
$('#nlSubscribeInitial').click(function () {
$('#nlSubscribeEmail').val($('#nlTextboxInitial').val());
$('#nlTextboxInitial').val('');
});
});
</script>
Form Currently in the Layout View
<div class="input-group">
<input class="form-control" type="text" id="nlTextboxInitial">
** Some other input / info here
<button id="nlSubscribeInitial" type="button" data-toggle="modal" data-target="#nlModal">Open Modal</button>
</div>
Modal currently in Layout View
<div class="modal-body">
<div class="form-group">
<label for="emailInputLogin">Email address</label>
<input type="email" class="form-control" id="nlSubscribeEmail" />
</div>
</div>
Currently this is my codes. After clicking the button on my page, it will open the modal popup.
The value of the textbox will be pass to the textbox located on the modal popup. Currently the form and the modal popup are on my Layout view.
I want to accomplish the same but this time I want call a View (.cshtml) and display it as a modal popup and passing my textbox value to another textbox that is in the View that is being called.
Thanks
Sumbit your email id value to your action, Fill your submited email id to model or viewbag or tempdata
Load That data to your redirected page
<div class="modal-body">
<form action="/somecontroller/someaction" method="post">
<div class="form-group">
<label for="emailInputLogin">Email address</label>
<input type="email" class="form-control" name="email" id="nlSubscribeEmail" />
</div>
</form>
</div>
Controller Action method,
public ActionResult SomeAction(string email){
// You can also construct model
ViewBag.Email = email;
// Return view
return View("SomeViewName");
}
Redirected page(i.e. SomeViewName.cshtml)
<h1>#ViewBag.Email</h1>